Application Theme Guide in ASP.net

Application Theme Guide

.CSS // Cascaded Style Sheet- CSS are used for assigning style-properties to  HTML Tags as well as Server Controls[CssClass].

.skin       // Skin file- .skin files are used for assigning style properties to server controls ONLY.

~/App_Themes                – /WhiteTheme

– White.css

– White.skin

.CSS // Cascaded Style Sheet : 3 – ways:

• Apply to individual HTML Tag:

<b  style=”color:Red; background-color:silver;”>Bold Text</b>

<h1 style=”Color:navy;”>Header One</h1>

• Applying Style for all HTML Tags in a Page

<style>

B{ color:Green; Background-Color:Yellow;}

H1{Color:Red;}

TD {Color:Navy; font-weight:bold; font-size:4;}

A {Text-Decoration:none;}

BODY {Color:Black; margin:0 0 0 0;}

/* Style Classes */

.AB {Color:White; Background-color:Black;}

.XY {Color:Red; background-color:white;font-weight:bold;}

TD.PQ {Color:Green; Background-color:Pink;}

</style>

<b>Bold Text</b>

<b class=ab>Bolder Text 1 </b>

<b class=xy>Bolder Text 2</b>

<td class=pq>ABC Content</td>

 

<asp:Label   CssClass=ab  . . . . .  />

<asp:Button  CssClass=xy  . . . . . ./>

• Creating an external .CSS file

Style.css

B{ color:Green; Background-Color:Yellow;}

H1{Color:Red;}

TD {Color:Navy; font-weight:bold; font-size:4;}

A {Text-Decoration:none;}

BODY {Color:Black; margin:0 0 0 0;}

/* Style Classes */

.AB {Color:White; Background-color:Black;}

.XY {Color:Red; background-color:white;font-weight:bold;}

TD.PQ {Color:Green; Background-color:Pink;}

Applying the Style.css to a Page

<head>

<link  href=”style.css”  rel=”stylesheet”  type=”text/css” />

SKIN Files

2 – Types:

• Default Skin for a server control:

• Named Skin for a server control:

ONLY one named skin for a server control can be created.

SkinId=”AnyName”

White.skin

<asp:Label   runat=server BackColor=”” ForeColor=””/>

<asp:Label   SkinId=”LblSkn” runat=server BackColor=”” ForeColor=””/>

<asp:Image runat=server Border=1 BorderStyle=”solid” ImageUrl=”~/Images/Img1.jpg”/>

<asp:Image   SkinId=”ImgSkn” runat=server Border=2 BorderStyle=”dashed”     ImageUrl=”~/Images/Img2.jpg”                />

 

Applying Theme to a Page named A.aspx

<%@ Page  StyleSheetTheme=”WhiteTheme” . . . %>

Applying Theme Programmatically

protected void  Page_PreInit(object o, EventArgs  e) {

Page.Theme = “WhiteTheme”;}

Changing Theme at run-time

static string myTheme = “WhiteTheme”;

protected void Page_PreInit(object sender, EventArgs e){

Page.Theme = myTheme;}

protected void ImgBtnTheme_Click(object sender, ImageClickEventArgs e){

if(e.X < 101) {

myTheme = “PinkTheme”;}

else if(e.X < 201) {

myTheme = “WhiteTheme”;}

else {

myTheme = “GreenTheme”;}

// Recursive process = Re-Requesting the page

//Response.Redirect(“~/WithTheme.aspx”);

Response.Redirect(Request.CurrentExecutionFilePath);               }

Thanks for your attentions

Ref: Md. Sadiq Sir

Related information

ASP.NET Themes and Skins

How to: Apply ASP.NET Themes

ASP.NETThemes

Tag: ASP.NET Themes and skins, themes, application theme guide,asp net theme download,free asp net theme,asp net theme web config,asp net theme images,asp net theme master page,asp net 3.5 theme,visual studio theme

About

Hi, This is R K Gupta, an IT professional and Entrepreneur. I have written many articles yet for my websites gsesoftsolutions.com, Hope you like it. Kindly subscribe our feed for any updates. Add me in Facebook and Google+

Posted in Microsoft .Net Help, Software Development

Leave a Reply

Your email address will not be published. Required fields are marked *

*