Computer Magic Logo
Creating a stylesheet file

Saturday, July 18, 2015

Published by Aristotelis Pitaridis

All the stylesheet files that the Umbraco Back Office finds in order to edit are located in the css subfolder of Umbraco’s root folder. Whenever we create a new stylesheet file from the Back Office, it is going to be placed in this folder. If we copy a stylesheet file in this folder the Back Office will find it and it will allow us to edit it using the stylesheet editor. In order to create a new stylesheet file we have to find the Stylesheets node from the Settings section.

We right click on the Stylesheets node and the Stylesheets commands will appear on the screen.

We click on the Create command and the Stylesheet Create form will appear on the screen.

We type the name of the stylesheet in the Name textbox. For our example we give the name MyStylesheet and we click the Create button. The stylesheet will be created and it will appear in the nodes tree. The Back Office will open it and display its contents in the Stylesheet editor.

We can type the CSS that we want to have in the CSS file using the stylesheet editor. We just add a border and margin to all the divs of the page so that we will see in action. 

When we finish we save the stylesheet by clicking the Save button which is located in the upper right corner of the page. A green panel will appear on the screen informing us about the successful save of the stylesheet.

Now that we created the stylesheet file let’s see how to find what is the path of the new file. At the top of the stylesheet editor we enable the properties tab.

Now we can see the name of the stylesheet which is editable. In case we change the name we have to click the save button in order to save new name. Under the name we can see the path of the file which can be used in our templates.

The path of the stylesheet is a link so we can click on it in order to see its contents.

At the bottom of the generated CSS we can see a comment which asks us not to delete this line. This is used so that Umbraco will be able to separate the edited CSS that we typed and the CSS generated by the properties of CSS that we will see later.