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

Get started

Build your website

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

View demo Get started

Step 1

Start a free trial of Site Builder.

Step 2

Design

Tailor the look and feel with the Visual Designer to suit your brand.

Step 3

Create

Add content with built-in eCommerce and third-party integrations.

Step 4

Go Live

You can host on Azure with us or choose your own with the self-hosted license.