Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to apply Themes in a web page with ASP.NET

The article aims making developers learn the process to work with App_Themes folder that have been brought into picture since ASP.NET 2.0.

Introduction to Theme

One can define a theme by accessing the right click on Web Project and then navigate as > Add ASP.NET Folder > Theme. By default, a folder by the name of App_Themes > Theme1 will be create and one can rename the Theme1 folder as well but not the App_Themes folder. The folder name under App_Themes folder will be regarded as a Theme name. Also the entire .css files and .skin files under this will be attached with that theme. One can create any number of themes under App_Themes folder. There can be more than than one .css and/or .skin files.

Introduction to .css file

A Cascading Style Sheet file is nothing but a file that comprises of the style, behavior about an html page and its elements. We have styles that are actually written in the .css file as a block of code that is referred to as css class. There could be following types of css classes

1. for a specific element - this describes the style of any html element that is named as the html tag name like p, table, tr etc. We have the following style being applied to all table of the page.

Listing 1: Applying Style to page table

Table
            {
                  border-collapse:collapse;
                  border:1px solid #c0c0c0;
            }

2. for any html element - this describes the style that can be executed in any html elements.

This starts with . (dot) that is followed by the name of the css class.

Listing 2: Applying background to a page

.ChangeBackground
         {
               background-color:#c9c9c9;
         }

We can specifiy any css class in any html element. The below is the example of the same.

  • In HTML tag: <span class="ChangeBackground">My text</span>
  • In ASP.NET Control: <asp:Label ID="lblMessage" runat="Server" CssClass="ChangeBackground" />

2. for a particular Identifier - this describes the style of an html element that has a specific id starting with the # and followed by name of the css class.

Listing 3: Defining the style of html element

         #divMain
         {
            width:100%;
            border:1px solid #cccccc;
         }

As far as the above css class behaviour’s is concerned, it will be put into practice to the html element whose id is "divMain". Like:

 <div id="divMain">This is main placeholder</div>

Introduction to .skin file

A .skin file contains style information of any asp.net server control and the details or rather the information is written in this file. The information is written in the asp.net page however we have the ID property which is not specified. The below subsequent lists the example of the same.

Listing 4: Defines the information in the .skin file

<asp:Label runat="server" Font-Names="Courier" />
<asp:Label SkinID="LabelMessage" runat="server" ForeColor="Green" BackColor="Yellow" />
<asp:Label SkinID="LabelError" runat="server" ForeColor="Red" BackColor="Yellow" />

Making use of the theme with above skin in your project, we will have the 1st line that will define the style of all Label controls going to be used in the aspx page. On the other hand, we have the 2nd line that describes the style of only those label controls that have the SkinID specified as LabelMessage. The process will allow you to place number of Label controls in your .skin files with different SkinID that can be used for different purposes.

We don’t have any much restriction on number of .css and .skin files that can be created in a Theme However it is recommended to limit the number just for easy maintainability and tracking.

How to use theme

We can make use of theme in the following ways after defining a theme in the asp.net project:

1. One can define the name of the theme one wish to make use of in the Page directives of the aspx page. This can be done as below:

Listing 5: Defining the Theme’s name

<%@ Page Theme="Theme1" Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

It can be notices that Theme1 is the name of the folder inside the App_Themes folder which is referred as the theme name. After making use of the theme in the aspx page, we have the page that is ready to utilize all skins defined in the theme and we have all the css classes being defined in the .css files. The below lists the method to obtain the intellisense in Visual Studio IDE:

Listing 6: Defining intellisense in Visual Studio IDE

Intellisense for SkinID defined in .skin file
Intellisense for Class definied in .css file

We will now take a look at the different behaviour of theme in different scenarios where we have the subsequent code in the StyleSheet.css and SkinFilefile.skin files placed under Theme1.

Listing 7: Defining code in StyleSheet.css

Stylesheet.css
body 
{
font-family:Arial, Verdana;
font-size:small;
}
.Label
{
background-color:Black;
color:White; 
}
SkinFile.skin
<asp:Label runat="server" Font-Names="Courier" />
<asp:Label SkinID="LabelMessage" runat="server" ForeColor="Red" BackColor="Yellow" />

We have the following code in the .aspx page in order to create different scenarios and one can notice that we have a plain text in the top without any style and four other Label controls with different combination of SkinID and CssClass. The below example illustrates the behaviour of the same in different combinations.

Listing 8: Illustrating the behaviour in different combinations

<div>
Plain Body Text
<br />
<asp:Label ID="lblMessage" runat="server" Text="Label: Text without SkinID but skin defined for Label in .skin file" />
<br />
 
<asp:Label ID="Label1" runat="server" Text="Label: Text with Skin defined in .skin file and SkinID specified" SkinID= SkinID="LabelMessage" />
<br />
 
<asp:Label ID="Label2" runat="server" Text="Label: Text without SkinID but CSS class used from .css file - CSS overrides the Theme" CssClass="Label" />
<br />
 
<asp:Label ID="Label3" runat="server" Text="Label: Text with SkinID and CSS class used from .css file - CSS doesn't override the Theme" SkinID="LabelMessage" CssClass="Label" />
</div>

The below snapshot refers to the outcome of our tutorial.

  1. We have a 1st line being displayed as a plain text that contains no style information thereby making it inheriting the style that is being defined in the body class of .css file.
  2. The 2nd line has a Label control however without CssClass and SkinID thereby inheriting the style that is being defined in the .skin file without SkinID
  3. Then we have a 3rd line that has a CssClass which is defined as "Label" thereby again inheriting the style that is being defined in the Label class of .css file.
  4. Finally there is a 4th line that has both SkinID and CssClass defined. This has make it overridden the style that is defined in the CSS thereby inheriting only style that is being defined in the .skin file (LabelMessage - foreground red and background yellow).
Result of example

Figure 1: Result of example

Conclusion

We learned how to work with themes making use of .NET with style of different behaviours under different combinations.



Software Developer from India. I hold Master in Computer Applications Degree and is well versed with programming languages such as Java, .Net, C and C++ and possess good working knowledge on Mobile Platforms as well.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login