Applying CSS Customization to the Customer Portal

You can customize the appearance of the Freemius Customer Portal with CSS to match your brand and site design. The portal supports custom style sheets and CSS variable overrides for flexible theming.

How CSS Customization Works

• The Customer Portal is embedded via an iframe or direct link, and you can apply custom CSS by specifying a style sheet URL in the Freemius Developer Dashboard.
• The portal uses CSS variables for colors, typography, and layout. Overriding these variables makes theme adjustments easy.

Overriding CSS Variables

Inspect the portal's root element using your browser's developer tools to discover available CSS variables.

Common variable groups include:

• --fs-ds-theme-*: Theme colors for major components
• --fs-ds-typography-*: Font families, sizes, and weights
• --fs-ds-appearance-*: Border radius, sizing, etc.

For example, to change the primary color and font family, add the following CSS:

:root {
  --fs-ds-theme-primary: #6753ff;
  --fs-ds-typography-font-family: 'Open Sans', sans-serif;
}

Adding Your Custom CSS

1. Host your CSS file on a secure (HTTPS) server.
2. In the Freemius Developer Dashboard, go to Stores > Settings > Customer Portal.
3. Paste your stylesheet URL into the Customer Portal CSS stylesheet field.

Your styles will then load and apply to the portal.

Tips

• Always use the :root selector for global variable overrides.
• Monitor changes in the Customer Portal HTML to avoid breaking your custom styles.
• For advanced theming, combine variable overrides with custom CSS rules targeting portal elements.

warning

Major portal updates may affect your custom styles; review changes after each update.

If you have questions or need help with advanced customization, contact Freemius Support.