Computer Magic Logo
Stylesheet properties

Saturday, July 18, 2015

Published by Aristotelis Pitaridis

We saw how to create and edit a stylesheet file but in Umbraco there is an easier way to organize and edit the CSS. This can be done using Stylesheet properties. We will create a new property for the div HTML element which will change its background color. In order to create a new stylesheet property we right click on the MyStylesheet stylesheet that we created the property and a list of commands will appear on the screen.

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

We type the in the Name textbox the word DivBackground and we click on the Create Button. The Edit stylesheet property form will appear on the screen and the new stylesheet property will appear as a tree node under the MyStylesheet stylesheet.

The first input control is the Name of the stylesheet property which contains the value that we defined in the previous form.

The next textbox is the Alias which automatically assigned the same value as the name of the stylesheet property. In case that we want to define CSS for an HTML element we just type its name. In our example we want to change the background color of the div elements so we type the value div.

If we want the stylesheet property to be applied on an id we have to add the "#" character in front of the alias and if we want to apply it on a class we use the "." character in front of the alias name.

After the Alias we have a textarea where we type all the CSS that we want to apply. In our case we just change the background of the div so that it will have a light gray color.

The last information in the form is the Preview. As we can see the new style that we applied does not appear for the preview. In order to apply it we have to save it so we click the Save button which is located at the upper right corner of the screen.

After the saving of the stylesheet property we will see a green panel on the screen in order to inform us about the successful saving of the stylesheet property and the preview container will display the light gray background so that we will see what the styling that we applied to the property is. Below we can see the generated CSS that Umbraco will create for us.

As we can see in the generated CSS file we have the CSS that we defined in the stylesheet editor and after the comment we have the stylesheet property that we defined. In this example we have two definitions of the div element which is not nice but we did it so that we will see how the stylesheet works in Umbraco.