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 == "Green")
@Html.Raw("<link href=\"/css/colour-green.css\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />");

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

STEP 5: Let the User Select the Colour from the Umbraco Backend



Post a Comment

Popular posts from this blog

Umbraco 7 - C# Razor - Passing a parameter variable from a Template to a Partial View.

Umbraco 7 Hide a page from Navigation or Sub Navigation with umbracoNaviHide using Razor in a template or partial view

Umbraco Razor Sort Nodes Ascending or Descending