This tutorial shows how to implement CSS StyleSheet usage with ASP.NET and how to change them dynamically. VB 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; |
I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.
To attach the StyleSheet, we add the following code inside the <head> tags:| <link href="dark.css" rel="stylesheet" type="text/css" id="stylesheet" /> |
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> |
Try Server Intellect for Windows Server Hosting. Quality and Quantity!
The code simply switches the StyleSheets upon radiobutton click. The code-behind should look something like this:| Imports Microsoft.VisualBasic Imports System Imports System.Data Imports System.Configuration Imports System.Web Imports System.Web.Security Imports System.Web.UI Imports System.Web.UI.WebControls Imports System.Web.UI.WebControls.WebParts Imports System.Web.UI.HtmlControls Partial Public Class _Default Inherits System.Web.UI.Page End Class Protected Sub SwitchStylesheets(ByVal sender As Object, ByVal e As EventArgs) If radioDark.Checked Then End Substylesheet.Href = "dark.css" End IfIf radioLight.Checked Then stylesheet.Href = "light.css" End If |
No comments:
Post a Comment