This tutorial shows how to implement CSS StyleSheet usage with ASP.NET and how to change them dynamically. C# version.
This tutorial will show how easy it is to implement CSS stylesheets to an ASPX page, and also how to let the user dynamically change the look and feel of the website in an instant. In the example below, we use radio buttons to change between a light and a dark look to the website. This is done with two separate CSS files:
Two simple example CSS files are as follows.
Dark.css:
| body { color: #cc0033; }background-color: #996666; .reverse { background-color: White; } color: Maroon; |
We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!
Light.css:| body { background-color: White; }color: Black; .reverse { background-color:Black; } color:White; |
To attach the StyleSheet, we add the following code inside the <head> tags:
| <link href="dark.css" rel="stylesheet" type="text/css" id="stylesheet" /> |
We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.
The ASPX code will look something like this.Notice the radio buttons' OnCheckedChanged attributes.
| <form id="form1" runat="server"> <div> <asp:Label ID="CaptionLabel" runat="server" Style="font-size: 1.2em; font-family: Arial, 'Times New Roman', Verdana; background-color: #99ffff" Text="Label"></asp:Label> </div><asp:TextBox ID="NumberTextbox" runat="server" Style="background-color:Blue; color:Yellow;"></asp:TextBox> <asp:Label ID="ResultLabel" runat="server" Text="Label" CssClass="reverse"></asp:Label> <asp:RadioButton ID="radioLight" runat="server" AutoPostBack="True" GroupName="grpSelectStylesheet" OnCheckedChanged="SwitchStylesheets" Text="Light" /> <asp:RadioButton ID="radioDark" runat="server" AutoPostBack="True" Checked="True" GroupName="grpSelectStylesheet" OnCheckedChanged="SwitchStylesheets" Text="Dark" /> </form> |
Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
The code simply switches the StyleSheets upon radiobutton click. The code-behind should look something like this:| using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) } { } protected void SwitchStylesheets(object sender, EventArgs e) { if (radioDark.Checked) }stylesheet.Href = "dark.css"; if (radioLight.Checked) stylesheet.Href = "light.css"; |
No comments:
Post a Comment