Skip to main content


Showing posts from November, 2013

Umbraco: Load Different Stylesheets depending on values in a Tick Box.

The purpose of this is to allow the user to influence the colours of a page by loading a different style-sheet. Using CSS, Umbraco and Razor.

STEP 1: Create a New Data Type 1)  Add a new Data Type called "Colours"

2) Make the Data Type a Checkbox List and add some Values to it for the User.


STEP 2: Add the Colours Option to the Document Type in the Backend
STEP 3: Add Seperate CSS Style Sheets with your CSS Rules For example:  colour-purple.css, colour-gree.css, color-orange.css, colour-pink.css 

STEP 4: Create Some Razor Code
...@if (@Model.pageColour == "Purple")
@Html.Raw("<link href=\"/css/colour-purple.css\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />");

@if (@Model.pageColour == "Pink")
@Html.Raw("<link href=\"/css/colour-pink.css\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />");

@if (@Model.pageColour == "…