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

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.