Skip to content
Search Articles/

less than a minute read • Updated a day ago

Style the customer portal

How to customize the customer portal's colors, spacing, and typography to match your brand using the Lumo editor and a custom style block.

The customer portal’s appearance can be customized to match your branding by adding a style block to the page where it’s embedded.

Steps

  1. 1

    Go to the Lumo editor and customize the colors, spacing, and typography options.

  2. 2

    Copy the generated output, which will look like this:

       <custom-styles>
     <style>
       html {
         --lumo-border-radius: 0.5em;
         --lumo-primary-color: #53275E;
         --lumo-primary-text-color: rgb(83, 39, 94);
         --lumo-body-text-color: hsl(214, 0%, 16%);
         /* ...additional variables... */
       }
     </style>
   </custom-styles>
  3. 3

    Add this block to your page, after the <script> tag used to embed the portal.

Notes

  • To apply the styles globally in your page’s <head> instead of scoping them to the portal, change the html selector to :root.

  • Dark mode is not currently supported by the customer portal.

  • If you use the “advanced” options on the Lumo editor’s typography page, note that the portal’s elements don’t use the “3X large” size.

Need Help?

Did this article answer your questions? Need help with anything? Please click below to contact us.