How to create your own color palette (Umbraco 8 themes v1.x to v2.x)

Creating your color palette couldn't be easier with uSkinned. Once you've created your color palette within your sites 'Design Styles', each part of your palette will be available for use throughout your website — think of your 'Design Style' as your Global Design System.

Step 1

Login to the CMS.

Step 2

In the tree menu, click on 'Design'.

Step 3

You will now see all available 'Design' in a grid. Above the grid on the left side, you will see a button 'Create Design Style', click this button.

Step 4

At the label 'Selected theme' use the dropdown to choose the theme your style should be based on. Typically, the main differences between each theme are the layout of the header.

Step 5

At 'Fixed width' choose to give your site a maximum width or not.

Step 6

At 'Colors' expand each of the following 'General', 'Content' and 'Button'. Use the color pickers provided to create your base level of colors.

Step 7 (Optional)

At 'Additional Content Options' add, sort or remove more colors that can be used throughout your website. Add as many or as few as you wish.

Step 8 (Optional)

At 'Additional Button Options' add, sort or remove more colors that can be used throughout your website. Add as many or as few as you wish.

Step 9 

Save and Publish.

Step 10

From the tree menu, click on 'Configuration'.

Step 11

From the grid of options, click on 'Global Settings'.

Step 12

At the label, 'Design Style' use the picker to 'Add' to display all style options in a slide-out panel. Choose your new style then hit 'Submit' in the bottom right. Save and Publish the node.

Step 1

Login to the CMS.

Step 2

Expand 'Website Styles'.

Step 3

Hover over 'Website Styles' and click '...' then choose to create a new 'Style'.

Step 4

At the label 'Selected theme' use the dropdown to choose the theme your style should be based on.

Step 5

At 'Fixed width' choose to give your site a maximum width or not.

Step 6

At 'Style Colors' expand each of the following 'General', 'Content' and 'Button'. Use the color pickers provided to create your base level of colors.

Step 7 (Optional)

At 'Additional Content Options' add, sort or remove more colors that can be used throughout your website. Add as many or as few as you wish.

Step 8 (Optional)

At 'Additional Button Options' add, sort or remove more colors that can be used throughout your website. Add as many or as few as you wish.

Step 9 

Save and Publish.

Step 10

Expand 'Website Configuration'.

Step 11

Open 'Global Settings'.

Step 12

At the label, 'Website Style' use the picker to 'Add' to display all style options in a slide-out panel. Choose your new style then hit 'Submit' in the bottom right. Save and Publish the node.

Get started today

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

NEW Site Builder!

We have launched a brand new, game-changing product for Umbraco CMS.