How to create your own theme

Step 1

Decide on the name of your custom theme, preferably one word, for example 'Custom1'

Step 2

Update file /config/usntheme.config' adding a new item for your theme:

<add name="Custom1" smallLogoHeight="60" largeLogoHeight="80" version="1.0" />

Step 3

Create a copy of the original theme folder (in this example we're using Fabric so the folder is called, 'usn_fabric') within each of the following folders:

  • /css/
  • /less/
  • /scripts/
  • /Views/Partials/

Step 4

Place your copied folders in these 4 folders and rename to the name of your theme, for example '/css/usn_custom1/', /less/usn_custom1/'. Make sure you prefix with 'usn_'.

For the Partial View folder, change the case of the folder name to 'USN_Custom1'.

If your theme name contains spaces as entered in Step 1, replace spaces in your folder name with'_'. e.g. 'Custom 1' would have folder name 'usn_custom_1'

Step 5

In your new LESS folder, '/less/usn_custom1/', locate the file '/less/usn_custom1/usn-imports.less'. Update the references to your LESS imports e.g.

@import "/less/usn_custom1/usn-global.less";

Make sure you do that for each import in this file.

 

Step 6

You are now free to edit your new theme which will be available within Umbraco with the name 'Custom1'

Step 7

Within the content section of Umbraco, go to one of the styles below the 'Website Styles' node. You will be able to select your new theme from the 'Selected theme' field.

Get started today

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