What is a Theme?
Themes are the text-based style
definitions in ASP.NET 2.0. Themes are similar to Cascading Style Sheets (CSS)
in that they enable you to define visual styles for your Web pages. A theme is
a collection of property settings that allow you to define the look of pages and
controls, and then apply the look consistently across pages in a Web
application, across an entire Web application, or across all Web applications on
a server.
In the solution explorer, Themes and
Skins are centrally placed at App_Themes folder. To add a new Theme to your
project, Right click your solution explorer, Select “Add ASP.Net folder” and
click “Theme”. This will add “App_Themes” folder and a default theme with name
“Theme1” under this. Rename this theme as per your requirement.
Each theme folder can contain
combination of following elements,
Ø Skin
files
Ø CSS
files
Ø Images
Ø Other
resources files that is used to style the page and page elements.
You can add css files and CSS files
from “Add New Item” dialogue box.
The CSS files will have the CSS styles
sheets which can be used to style the page and page elements as usual. Skin is
new feature that is released new in ASP.Net 2.0. We will see more about Skins in
coming sections. Themes can also include graphics and other resources, such as
script files or sound files or Image Files.
It will be good if we understand how to
apply theme before understanding Skins. Next section, we will see about
that.
Applying Themes
A theme can be applied to an ASP.Net
project in various ways.
1. At Page level
2. At Application level
3. At Control level
4. At Server level
At Page Level
A theme can be applied to a form
through the @Page Directive by the following syntax,
<%@Page Language="VB"
Theme="DotNetIndiaSkin" %>
At Application Level
We can also apply it at an application
level from the web.config file.
<system.web>
<pages theme=" DotNetIndiaSkin"
/>
</system.web>
Now all the Web forms under this
web.config will apply the “DotNetIndiaSkin” theme.
Skins
A skin is a definition of styles
applied to server controls for your ASP.NET page. A skin file is created with
extension .skin that contains the controls with styles assigned to
it.
To create a Skin file, right click the
themes folder in your Solution Explorer, click “Add New Item”. Select a skin
file.
You can define 2 types of skins for the
page controls,
Default skin
It is a type of skin that gets
automatically applied to a page when the theme name is assigned in @Page
Directive. In other word, a default skin does not have SkinID. Suppose, if you
define a default skin for a Button Control then it will apply to all the button
controls in that page when it is applied. For example, it is something similar
to defining CSS styles for HTML elements like LI, LABEL which will be
automatically applied when the style sheet is referenced in the HTML
file.
Refer a default skin for button control
below,
<asp:Button runat="server"
BackColor="#FFE0C0" BorderStyle="Solid" ForeColor="Maroon" />
Named Skin
It is a type of skin which we have to
apply to every control explicitly. In other words, it will have SkinID attribute
associated with it. To apply it to a control, the skin ID should be assigned to
the SkinID property of the control.
<asp:Button SkinID=”ClassicButton”
runat="server" BackColor="#FFE0C0" BorderStyle="Solid" ForeColor="Maroon"
/>
Applying the named skin to a
control
<asp:Button ID="btnSave"
SkinID="ClassicButton" runat="server" Text="Button" />
This is an example of applying theme to
control level. Make sure, you have set Theme property of Page attribute to a
Theme that contains the skins.
Types of the Themes
The Themes we discussed above is
private to that particular web application because it appears in the private
folder “App_Themes” under that web application. The types of themes we can
create depend on accessibility will be,
1. Page Themes
2. Global themes
Page themes are the one which we
discussed above.
|