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 - Reset the Admin Password via SQL Server

-
To reset the admin password of a Umbraco website. 1. In Sql server, run the following script on the database: USE  INSERT-YOUR-DATABASE-NAME-HERE GO UPDATE umbracoUser set userdisabled=0, userLogin='admin', userPassword='default' where id=0 2. In your web config file, find the "UsersMemnershipProvider" section, change the setting: passwordFormat="Hashed" to passwordFormat="Clear" You should now be able to login using the Username: Admin and the Password: default ("the two sweetest words in the english language").
Read more

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

-
This is a Simple Contact From done in C# .Net and also can be used in Umbraco.  Paste the code in to Visual Web Developer for a better view. The important bits are coment in the second file.  One of the Commented out lines highlights how to get the mailto address from an Umbraco field. The code Below includes the myContactForm.ascx.cs codebehind file and the myContactForm.ascx file. 1) The myContactForm.ascx file:  <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ContactFormforPublications.ascx.cs" Inherits="usercontrols_ContactFormPublications" %> <div class="contact-form" id="contactForm" runat="server">     <h3>Request a Publication</h3>     <div class='int'>         <form runat="server">         <asp:Panel DefaultButton="contactFormSubmit" runat="server">      ...
Read more

Umbraco Macro for IFrame when Embedding Video, Vimeo Universal Player, or other types of IFrame on to a Page XSLT version and Razor Version

-
Vimeo Uneversal Player is cross platform compatiable, and uses IFrames, so you need a Macro to Embedd a video from Vimeo in to Umbraco: Part A: Create the XSLT File and Macro  (If you want to use Razor instead of xslt, the Razor code is at the bottom of this post) 1) Create a New Clean XSLT File and tick Create Macro. 2) Give the Macro a Name, such as: Vimeo IFrame Embedd for Vimeo Universal Player 3) Paste in the following Code: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]> <xsl:stylesheet     version="1.0"     xmlns:xsl=" http://www.w3.org/1999/XSL/Transform "     xmlns:msxml="urn:schemas-microsoft-com:xslt"     xmlns:umbraco.library="urn:umbraco.library"     exclude-result-prefixes="msxml umbraco.library"> <xsl:output method="xml" omit-xml-declaration="yes"/> <xsl:para...
Read more