Skip to main content

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 7 - C# Razor - Passing a parameter variable from a Template to a Partial View.

Passing a parameter variable from a Template to a Partial View Example - Passing a Page Id to a Partial View.
In the example below we are passing 3 page Ids (1090. 1091, 1092) to a partial view.  The Partial View will display the details for each of these nodes on a home page.  See final output below.


1) In your Template:
@Html.Partial("HomePageLinksToLandingPages", new ViewDataDictionary{{ "pageId", 1090}}) @Html.Partial("HomePageLinksToLandingPages", new ViewDataDictionary{{ "pageId", 1091}}) @Html.Partial("HomePageLinksToLandingPages", new ViewDataDictionary{{ "pageId", 1092}})

2) The Partial View:
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage @{ var thisPageId = 1090; var stringPage = @ViewData["pageId"]; thisPageId = Convert.ToInt32(stringPage); } <div class="col-md-4"> <article class="common-blog-pos…

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

How to Allow the user to Hide a Page from Navigation in Umbraco 7. By using a tick box:
This example shows hide the Search Results page from the main navigation in umbraco 7.


1)  In your Document Type add a property called "umbracoNaviHide", it must be called "umbracoNaviHide"

The property should be a tick box, so it should be a "True/False "



2) In your Navigation, add the highlighted code to your for each loop that writes out the navigation:

  @foreach(var p in homePage.Children().Where("visible"))
                        {
                            write out navigation

3) Now when the user ticks Hide from Nav in the backend, the page will not show in the navigation:


Umbraco Razor Sort Nodes Ascending or Descending

Descending:
@inherits umbraco.MacroEngines.DynamicNodeContext  
@using umbraco.cms.businesslogic.template;

@foreach(var item in Model.Children.OrderBy("Name descending"))
{
if(item.HasAccess())
{
@item.Name 
}
}


Ascending:
@inherits umbraco.MacroEngines.DynamicNodeContext  
@using umbraco.cms.businesslogic.template;

@foreach(var item in Model.Children.OrderBy("Name"))
{
if(item.HasAccess())
{
@item.Name 
}
}