Developing Websites using Themes (Themes vs StyleSheetThemes): Part 4
Introduction
Download
Download
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"
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>
<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"
</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"
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>
<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"
</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.
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.
Comments
Post a Comment