Quick Tip: Change the colour scheme of your theme in Umbraco 7.6.4 +

How do I update the colour scheme of the uSkinned Umbraco theme I have purchased?

uSkinned Member

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 colour in both HEX and RGBA format to the stylesheet in order for it to show on the front end:

Login to CMS > Go to Settings > Expand Stylesheets > Open palette

Login to CMS > Go to Settings > Expand Stylesheets > Open layout

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.

Go to your Umbraco solutions location > App_Code > USNHelpers > USNViewTemplateHelper.cs Add the new colour and class references

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

case "YOUR COLOUR HEX CODE":
settings.BackGroundStyle = "YOUR BACKGROUND COLOUR CLASS";
settings.HeadingStyle = "HEADING COLOUR CLASS";
settings.TextStyle = "TEXT COLOUR CLASS";
break;
Example:
case "ed6d19":
settings.BackGroundStyle = "c1-bg";
settings.HeadingStyle = "c5-text";
settings.TextStyle = "c4-text";
break;

This code also:

case "YOUR COLOUR HEX CODE":
settings.ButtonStyle = "BUTTON COLOUR CLASSES";
break;
Example:
case "ffffff":
settings.ButtonStyle = "c5-bg c1-text";
break;

 

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

comments powered by Disqus

Get started today

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