Warning: You are browsing the documentation from version 4 to 10 of Pimcore. Please visit https://pimcore.com/docs/platform/ for the latest versions of Pimcore.

Version:

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

Setting	Description
Primary Hex Code	main nav icons, primary button stylings, folder navigation, footer bottom bar, ... (Bootstrap CSS primary color)
Secondary Hex Code	filter background color, loading icons, folder/tags switch border, ... (Bootstrap CSS secondary color)
Dark Hex Code	listing teaser icon buttons, (button) icon colors, footer
Light Hex Code	listing teaser "open" button, light button,...
Button Primary Text	Text color of primary buttons
Button Secondary Text	Text color of secondary buttons
Button Dark Text	Text color of dark buttons
Button Light Text	Text color of light buttons
Header Hex Code	header background color
Header Icon COlor	header icon color

Other

Setting	Description
Header Gradients	Enable/disable gradient in the header
Nav Icon Gradients	Enable/disable gradient for main navigation icons
Modal Gradients	Enable/disable for the title bar of all modal windows