Introduction
You always have seen that when we apply a Theme to a page, the Skins in the
Theme override any existing properties of the controls in the page. In other
words, properties in a Skin override properties in a page. The example given
below which will set the background color of all the Label controls to the color
Red.
Label.skin Code
<asp:Label
BackColor="Red"
Runat="Server" />
Default.aspx Code
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" Theme="Simple" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Label" BackColor="Blue"></asp:Label>
<br /><br />
<asp:Label ID="Label2" runat="server" Text="Label" BackColor="Yellow"></asp:Label>
</div>
</form>
</body>
</html>
Now the image given above has red colored Label controls, its only because we
have applied Label.skin Theme to entire page using
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" Theme="Simple" %>
The default behavior of Themes makes it very easy to modify the design of an
existing website. We can override any existing control properties that have an
effect on the appearance of the control.
However, there are situations in which we might want to override Skin
properties. For example, we might want to display every Label in our website
with a red background color except for one Label. In that case, it would be nice
if there was a way to override the Skin property. We can override Skin
properties by applying a Theme to a page with the StyleSheetTheme attribute
instead of the Theme attribute. For example, the code given below uses the
StyleSheetTheme attribute to apply the Simple Theme to the page.
Default2.aspx Code
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" StylesheetTheme="Simple"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Label" BackColor="Blue"></asp:Label>
<br /><br />
<asp:Label ID="Label2" runat="server" Text="Label" BackColor="Yellow"></asp:Label>
</div>
</form>
</body>
</html>
Notice that in above code we have used.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" StylesheetTheme="Simple"%>
That is StylesheetTheme="Simple"
instead of
Theme="Simple".
Here is an image of this output.
In this image, color is not changed as usually happened in above image. Remember
that if we have other properties which is only in skin file not in content page
then that will affect that content page.
Note: Continue in next part.
HAVE A GREAT CODING!