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.

Example:


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

 



Comments

Post a Comment

Popular posts from this blog

Umbraco Razor Sort Nodes Ascending or Descending

Umbraco Razor get Querystring

Create a .NET Contact Form that Gets the Last Url Visited in C# Can also be Used in Umbraco