Formatting .NET Controls using Theme, Skin and CSS

THEME AND SKIN :-

-> To apply Theme and Skin, you have to create folder named “App_Themes” in your project. So to create “App_Themes” Folder, just right click on your project in solution explorer and select “ASP.NET Folder” and in that, select “App_Themes” Folder.

-> Now you have to add skin file in this folder. To do this, just right click on your project name and select “Add New Item” and select “skin” from that dialog.

-> If you will not create folder as mentioned above and direct adding skin file then it will ask you to create folder “App_Themes”. So just click yes and you will see that “App_Themes” folder is created with skin file.

-> Now give any name to skin file that makes easy to remember for you.

-> Next, open skin file and define .NET Control and write properties which you want to apply to that control.
For e.g., you want to apply default theme to all textboxes which are rendered on same page then write like this…

<asp:TextBox runat="server" font-names="Arial" font-size="medium" SkinId="textbox"></asp:TextBox>

remember to not forget to write “runat” and “SkinId” property in any control…

-> After Declaring it in skin file, now you have to apply theme to pages.

-> To do this, you just have to add Theme=”FolderName under which skin file or files are exist” in <@ page> directive in which you want to apply. After that, now in all textboxes in that page, just add SkinId=”textbox” properties.

-> By doing these steps, you will see your formatted textboxes in your page either in debug mode or by selectiing “view in browser”.

-> You can see formatted controls only in debug mode or view in browser mode. Not in design mode. So, just check that whether it is working properly or not.

CSS:-

-> If you apply css externally, then you can see formatted controls in design mode automatically

-> But If you apply css by creating it under Theme folder then you can’t see the formatted controls in design mode directly. How that i will tell you at the end of this section.

-> This is also external css but defined under theme folder. So just for knowledge, i have written about this.

-> To apply CSS to controls, you just have to create css file in theme folder in same way as creating Skin file.

-> Now in all ASP.NET controls, just add new property named “class”.

For e.g.,

<asp:TextBox id="txtName" runat="server" class="text"></asp:TextBox>

<asp:TextBox id="txtAddr" runat="server" class="text"></asp:TextBox>

<asp:TextBox id="txtNo" runat="server" class="Number"></asp:TextBox>

<asp:Label ID="lblName" runat="server" Text="Name :-" class="label"></asp:Label>

-> Here if you want to apply same formatting for more than one controls, then give same class name to those controls as shown above.

-> Now in css file, you just have to define style for every controls using class name or id.

For e.g., in css file using class name,

.text
{
   background-color:Blue;
   font-family:Verdana;
   direction:ltr;
}

.Number
{
   background-color:Yellow;
   font-family:Arial;
   direction:rtl;
}

.label
{
   font-family:Verdana;
   font-size:medium;
}

-> If you want to apply styles using classname then put “.” before classname and if you want to apply styles using id value then put “#” before id value of each controls.

-> Now to apply css to all pages, you just have to add Theme=”FolderName under which css file is exist” in <@ page ..> directive in all pages to whom you want to apply.

-> So after doing this, it will fetch styles from that css file.

-> Now as i told you earlier that you can see formatted controls using css in design mode. So to see them, You have to add StyleSheetTheme=”Name of css file” in <@ page ..> directive in all pages to whom you want to see formatted controls.

-> So after declaring it, you can see formatted controls in design mode using css.

Leave a Reply

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


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>