Developing Websites using Themes (Themes vs StyleSheetThemes): Part 4

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">

<asp:Label ID="Label1" runat="server" Text="Label" BackColor="Blue"></asp:Label>

<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">

<asp:Label ID="Label1" runat="server" Text="Label" BackColor="Blue"></asp:Label>

<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!