How to add or edit Colors in your Theme Design

Step 1

Login to the CMS.

Step 2

In the tree menu on the left-hand side, go to 'Designs'.

Step 3

Click on the 'Design' you wish to use. Or, create a new 'Design'.

Step 4

Go to the 'Colors' tab.

Step 5

The 'Colors' tab is split into 3 main sections: Base colors, Additional content colors, and Additional content colors. 

Base Colors
This is a range of color settings that are required for the base level of your theme design. These include  Body, Header, Logo (if you are using plain text as your logo), Main Navigation, Secondary Navigation, Navigation Dropdown, Content, Button, Footer. Within each part there a variety of color pickers.

Additional content colors
These are additional background and text color options you can set that can then be used throughout your site on components and pods. You can control the background (including solid, linear gradients, or radial gradients), Heading, Secondary Heading, Body Text, Link, Link Hover, Borders, Highlight, and Highlight Text. You can add unlimited additional content color combinations. 

Additional button colors
These are additional button color options you can set that can be used throughout your site anywhere a button is added. You can control the background (including solid, linear gradients, or radial gradients), text, and borders of both the initial and hover/active/focus states. You can add unlimited additional button color combinations. 

Step 6

Set the Base colors for your Theme Design.

Set the base color combinations for your theme design in Umbraco.

Step 7

Add as many or as few 'Additional content colors' combinations as your Theme Design requires.

Step 8

Add as many or as few 'Additional button colors' combinations as your Theme Design requires.

Set the additional content and button color combinations for your theme design in Umbraco.

Step 9

Once you're happy hit 'Save and publish'.

 

Well done #h5yr! 

Step 1

Login to the CMS.

Step 2

Go to any page in the tree menu. For example, click on the 'Home' page.

Step 3

In the bottom right, click 'Save and Preview'. Preview mode will now load in a new tab or window. 

Step 4

On the right-hand side, you will see two buttons. One with a Paint Bucket icon and the other a Pencil icon. Click on the 'Paint Bucket' icon to access the Visual Designer.

Step 5

In the slide-out panel, go to the 'Colors' tab.

The 'Colors' tab is split into 3 main sections: Base colors, Additional content colors, and Additional content colors. 

Base Colors
This is a range of color settings that are required for the base level of your theme design. These include  Body, Header, Logo (if you are using plain text as your logo), Main Navigation, Secondary Navigation, Navigation Dropdown, Content, Button, Footer. Within each part there a variety of color pickers.

Additional content colors
These are additional background and text color options you can set that can then be used throughout your site on components and pods. You can control the background (including solid, linear gradients, or radial gradients), Heading, Secondary Heading, Body Text, Link, Link Hover, Borders, Highlight, and Highlight Text. You can add unlimited additional content color combinations. 

Additional button colors
These are additional button color options you can set that can be used throughout your site anywhere a button is added. You can control the background (including solid, linear gradients, or radial gradients), text, and borders of both the initial and hover/active/focus states. You can add unlimited additional button color combinations. 

Step 6

Set the Base colors for your Theme Design.

Base theme color settings with the Visual Designer in Umbraco CMS.

Step 7

Add as many or as few 'Additional content colors' combinations as your Theme Design requires.

Step 8

Add as many or as few 'Additional button colors' combinations as your Theme Design requires.

Additional theme color settings with the Visual Designer in Umbraco CMS.

Step 9

Once you're happy hit 'Save and publish'.

 

Well done #h5yr! 

Get started today

Join thousands of agencies, freelancers, enterprises & start ups worldwide who use uSkinned Site Builder for Umbraco to deliver results.

Award Winning!

uSkinned Site Builder for Umbraco CMS just won an Umbraco Award.