Quick Tip: How to change the colour scheme of your uSkinned Umbraco theme

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 a

You will now need to edit each Partial View that refers to the colour picker.

Login to CMS > Go to Settings > Expand Partial Views > Expand USNAdvancedPageComponents > Open USN_AC_BannerSlider > Add the new colour and class references

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

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

case “YOUR COLOUR HEX CODE": 
backgroundStyle = “YOUR BACKGROUND COLOUR CLASS";
headingStyle = “THE CLASS YOU WISH TO USE FOR THE TEXT COLOUR";
textStyle = "";
break;

This code also:

case "YOUR COLOUR HEX CODE": 
buttonStyle = "THE CLASS YOU WISH TO USE FOR THE BUTTON";
break;

You should now repeat step 3 for each Advanced Component that has the colour options within it.

Step 3 b

You will also need to add step 3 to the Outro Strip and Header Image Section. These can be found by:

Login to CMS > Go to Settings > Expand Partial Views > USNMiscPageElements > USN_OutroStripSection & USN_HeadingImageSection > Add the new colour and class references

comments powered by Disqus

Get started today

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