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

R K Gupta

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+

More Posts - Website

Follow Me:
TwitterFacebookPinterestYouTube

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