Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set up a CSS switcher

I'm working on a website that will switch to a new style on a set date. The site's built-in semantic HTML and CSS, so the change should just require a CSS reference change. I'm working with a designer who will need to be able to see how it's looking, as well as a client who will need to be able to review content updates in the current look as well as design progress on the new look.

I'm planning to use a magic querystring value and/or a javascript link in the footer which writes out a cookie to select the new CSS page. We're working in ASP.NET 3.5. Any recommendations?

I should mention that we're using IE Conditional Comments for IE8, 7, and 6 support. I may create a function that does a replacement:

<link href="Style/<% GetCssRoot() %>.css" rel="stylesheet" type="text/css" /> <!--[if lte IE 8]>     <link type="text/css" href="Style/<% GetCssRoot() %>-ie8.css" rel="stylesheet" /> <![endif]--> <!--[if lte IE 7]>     <link type="text/css" href="Style/<% GetCssRoot() %>-ie7.css" rel="stylesheet" /> <![endif]--> <!--[if lte IE 6]>     <link type="text/css" href="Style/<% GetCssRoot() %>-ie6.css" rel="stylesheet" /> <![endif]--> 
like image 676
Jon Galloway Avatar asked Aug 07 '08 18:08

Jon Galloway


People also ask

How do you make a toggle button in HTML and CSS?

We can do that by using the HTML label tag and HTML input type = checkbox. HTML code: The HTML code is used to create a structure of toggle switch.

What is toggle CSS?

The toggle() method toggles between hide() and show() for the selected elements. This method checks the selected elements for visibility. show() is run if an element is hidden. hide() is run if an element is visible - This creates a toggle effect.

How do I make a text toggle switch?

Adding Text In CSS Toggle Button To add text to the toggle button, we just need to add another HTML element inside the toggle button and style it using CSS to make it look like a label. Again use pseudo-class to create labels that shows ON and OFF text depending on the state of the toggle switch.


2 Answers

In Asp.net 3.5, you should be able to set up the Link tag in the header as a server tag. Then in the codebehind you can set the href property for the link element, based on a cookie value, querystring, date, etc.

In your aspx file:

<head>   <link id="linkStyles" rel="stylesheet" type="text/css" runat="server" /> </head> 

And in the Code behind:

protected void Page_Load(object sender, EventArgs e) {   string stylesheetAddress = // logic to determine stylesheet   linkStyles.Href = stylesheetAddress; } 
like image 151
Yaakov Ellis Avatar answered Oct 02 '22 13:10

Yaakov Ellis


You should look into ASP.NET themes, that's exactly what they're used for. They also allow you to skin controls, which means give them a set of default attributes.

like image 26
Shawn Avatar answered Oct 02 '22 11:10

Shawn