How to create your own color palette (Umbraco 7 themes - Post 22nd May 2018)

Please note: This method is only relevant to Umbraco 7 themes released after 22nd May 2018.

Follow our simple 3-step process to updating the colours through out your uSkinned Umbraco theme.

Step 1

You will need to add your colour scheme to the component colour picker:

Login to CMS > Go to Developer > Expand Data Types > Open USN Color > Remove the existing theme colours and replace with your new colours

Step 2

You will now need to add your new colours to the stylesheets in order for them to show up in the frontend:

Method 1 - recommended

  • Find the file to add your colours to here: /scss/usn-global.scss
  • Once you've added your colours and saved the file they will be distributed to all other scss files and then compiled into the CSS file /css/usn-global.css
  • To work with the SCSS files you will need to work on your site within a code editor that supports Sass. Don't worry there are plenty of free ones available: You can also get extensions for VSCode and Visual Studio to compile the files.​
  • At uSkinned we use Visual Studio Code with the plugin You can choose which folder to compile your SCSS to CSS using this plugin. We set it to compile to the /css/ folder.

Method 2 - ignore if you followed method 1

However, the compiled CSS is available so if you'd prefer you can edit that instead. Open the file usn-global.min.css (or usn-global.css, just be sure to alter the reference to that file in the Master template) and then in a text/code editor find and replace the HEX code for each colour you wish to change.

Step 3

You should now combine both elements that you've worked on to create your colour combinations. Both the heading and text colour are chosen based on the background colour that is selected by a user in the CMS. This method of preset combinations will help to keep a consistent feel to your website and make it easier for content editors to manage.

Please note that the HEX code is case sensitive and should be entered in lowercase.

Go to your Umbraco solutions folder location (on your server or local machine) /App_Code/USNTemplate/USNViewTemplateHelper.cs Add the new colour and class references

Find this code and amend to include your new colour palette:

settings.BackGroundStyle = "YOUR BACKGROUND COLOUR CLASS";
settings.HeadingStyle = "HEADING COLOUR CLASS";
settings.TextStyle = "TEXT COLOUR CLASS";


case "ed6d19":
settings.BackGroundStyle = "c1-bg";
settings.HeadingStyle = "c5-text";
settings.TextStyle = "c4-text";

This code also:

settings.ButtonStyle = "BUTTON COLOUR CLASSES";


case "ffffff":
settings.ButtonStyle = "c5-bg c1-text";

You will now see your new colour scheme in the front end of your website and the back office of Umbraco CMS :)

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.