eFront lets you use your own custom layout on your portal and, when necessary, use a different layout on each branch.

Note: For more information on the role of themes in customizing your portal, and in case you need to add a widget, or embed a code using <script> tags, see this article.

Sign in to your eFront account as Administrator and go to Home > Themes.

Go to the Change theme tab (1). Here, you can either select one of the available themes or create a new one. To set an existing theme as active, click the respective pin symbol in the Active theme column. Click the preview symbol to see how your theme looks when active. Click the edit symbol to make further adjustments.

To create a new theme, click Add theme (2).

Under the Primary section, type a name for your new theme in the Name (3) field (e.g., Partners).

Note: Naming your theme is required both when using our editor to create a new theme or when adding your own CSS to override the code of your selected theme.

When you want the new theme to be available for use on a specific branch and its sub-branches, click Click to set branch ownership (4) to open the Ownership field.

Note: By setting Branch ownership you're not activating a theme for a branch. You simply make that theme available for exclusive use on the selected branch (e.g., Partners). It's up to the Branch administrator to activate the theme for their branch and sub-branches.

See also this article on customizing themes and homepages for branches.

Under the Styling section, click Layout component (5) and, from the drop-down list, choose the component of your theme you want to customize first.

The available components are:

• Header (default)
• Background
• Breadcrumb
• Block Background
• Primary Button

For each component, you can choose a color by either typing the Hex (hexadecimal) code in the Color field or using the color picker that pops up.

On the color picker, first, use the vertical slider to choose a color (hue) (6). Then, click a spot on the color box (7) to adjust the brightness and saturation of that color.

Note: When typing or picking a color, you get a live preview both in the Color field and on the layout component.

To add extra CSS to your theme or use an entirely CSS-based theme, type or paste your code in the Additional CSS code text area.

Note: For more on customizing your eFront theme by using CSS, see this article.