How to branch away from our codebase to your own codebase

It is essential that whenever you plan on making any code changes to the underlying supplied codebase you follow this guide.

Please note, that by following this guide, you will ensure that your code is never overwritten when you run an upgrade or build your project.

Step 1

We'll want to start off with the same folder and file structure before you add your own customisations.

Copy each of the following folders:

~/wwwroot/css/uskinned
~/wwwroot/images/uSkinned
~/wwwroot/scripts/uSkinned
~/wwwroot/EmailTemplates/uSkinned
~/Views/Partials/uSkinned

Now rename the copies to the name you wish to use for your codebase, in our example, we'll call it Website:

~/wwwroot/css/Website
~/wwwroot/images/Website
~/wwwroot/scripts/Website
~/wwwroot/EmailTemplates/Website
~/Views/Partials/Website

Step 2

Now we need to add our new codebase reference to the app settings. Go to the following file:

~/appsettings.json

Step 3

Next to "SourceCodeOptions" add your new codebase name after the uSkinned codebase:

"SourceCodeOptions": "uSkinned,Website"

Now restart your website.

Step 4

Step 5

In the tree menu, go to 'Design'.

Step 6

On the right-hand side, go to any theme design or create a new theme design.

Step 7

On your chosen design, go to the 'Advanced' tab.

Step 8

Under 'Frontend source', choose your new codebase from the dropdown select box.

Step 9

Click 'Save and publish'. Your theme design is now using your own codebase, you can start adding your customisations.

Step 1

Now, initially, we'll want to start off with the same folder and file structure before you add your own customisations.

Copy each of the following folders:

~/css/uskinned
~/scripts/uskinned
~/views/partials/uSkinned

Now rename the copies to the name you wish to use for your codebase, in our example, we'll call it My Website:

~/css/my_website
~/scripts/my_website
~/views/partials/My_Website

Step 2

Now we will add your new codebase reference to the config. Go to the following file:

~/config/usntheme.config

Step 3

Inside <themes> add your new codebase name:

<add name="My Website" />

Step 4

Step 5

In the tree menu, go to 'Design'.

Step 6

On the right-hand side, go to any theme design or create a new theme design.

Step 7

On your chosen design, go to the 'Advanced' tab.

Step 8

Under 'Frontend source', choose your new codebase from the dropdown select box.

Step 9

Click 'Save and publish'. Your theme design is now using your own codebase, you can start adding your customisations.

#h5yr

Related guides

Umbraco 9 +

How to download and install uSkinned Site Builder upgrades with NuGet

uSkinned Site Builder

Get started — for FREE!

Join thousands of agencies, freelancers & businesses of all sizes worldwide who use uSkinned Site Builder for Umbraco to deliver results.

Free trial Buy now