Customize the design

You can very easily customize things like the logo, fonts and colors and if you are friendly with CSS and HTML you will find this starter site very open to adaption.

You can find in-depth documentation on our developer website section on Starter Sites. Below are a few quick guides to get you started of in the right direction.

Quick guide to replacing the logo

On your computer, save your own logo using the file name logo.png

Launch the C1 Console, go to the Layout perspective and drill down the tree to this folder:

/Frontend/Images

Select the folder and click the command button Upload File and upload your logo. Say OK when asked if you wish to overwrite the existing logo.

Quick guide to re-skinning the website

Launch the C1 Console, go to the Layout perspective and drill down the tree to edit this file:

/Frontend/Images/bootstrap/variables.less

You can also edit this file from your favorite text editor.

Here you can make changes to a multitude of variables - like fonts, colors, page widths etc.

If you don't find what you are looking for in the variables.less file, find/add it to this file:

/Frontend/Styles/styles.less

Quick guide to editing the HTML templates

Launch the C1 Console, go to the Layout perspective and open up the Page Templates folder.

In the Shared Code folder you find MasterLayout.cshtml - this contains all the HTML common for all the page templates.

In the Page Templates folder you can find the individual templates and customize them if needed.

Read more about editing Razor based Page Templates