Skip to content
Search Articles/

less than a minute read • Updated 10 minutes ago

Style the customer portal

How to style the Foxy customer portal to match your site's branding.

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>
  1. 1

    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.