Skip to main content
Version: 2024.3

Styling Settings and Frontend Build

It is possible to customize the styling of portals and thus change their look and feel.

In this section you will learn how to do this directly in the Pimcore backend. If you are interested into detailed customization possibilities via code changes take a look at Customize Appearance within the development documentation.

Style settings

You will find the style settings within the portal configuration document (root document of the portal engine site).

Style SettingsStyle SettingsStyle Settings

There it is possible to change certain variables through input fields and checkboxes. To change the styling the following steps are needed:

  • Change the input values and checkboxes in the "Style Settings" section according to your needs.
  • Save the document.
  • Press "Update Frontend Build".

Now the new styling should be visible in the frontend.

Description of style settings

Colors

SettingDescription
Primary Hex Codemain nav icons, primary button stylings, folder navigation, footer bottom bar, ... (Bootstrap CSS primary color)
Secondary Hex Codefilter background color, loading icons, folder/tags switch border, ... (Bootstrap CSS secondary color)
Dark Hex Codelisting teaser icon buttons, (button) icon colors, footer
Light Hex Codelisting teaser "open" button, light button,...
Button Primary TextText color of primary buttons
Button Secondary TextText color of secondary buttons
Button Dark TextText color of dark buttons
Button Light TextText color of light buttons
Header Hex Codeheader background color
Header Icon Colorheader icon color
Login Background Colorbackground color of the login page sidebar
Login Text Colortext color used in the login page sidebar

Other

SettingDescription
Header GradientsEnable/disable gradient in the header
Nav Icon GradientsEnable/disable gradient for main navigation icons
Modal GradientsEnable/disable for the title bar of all modal windows