Don’t repeat your common CSS between your different themes

To fully understand this article, you need an Asp.Net Themes system knowledge

The case :

You have an application with a CSS layout, and a few themes.
There is just a little change between the different themes, by example you change only the color scheme.

A solution to do that is to repeat all CSS files in all your themes, and change the color part.
The problem with that solution is that if you change one common style in one of your themes, you’ll have to repeat the change in all themes. This is a bad idea, it leads to chaos !

Then how can you do to avoid the code repetition ?

My solution:

1.) Create a Common Theme.

In the Common theme, you define CCS files with a default color scheme (just in case)

.testclass
{
border:solid 1px #DDDDDD;
background-color:#DDDDAA;
font-size:xx-large;
}

2.) Create an other Theme (let say “Green”)

In the Green theme, you define CCS files with only the color information


.testclass
{
background-color:#00FF00;
}

2b.) Create an other Theme (let say “Blue”)

In the Green theme, you define CCS files with only the color information


.testclass
{
background-color:#0000FF;
}

Your Theme structure has to look like this :

image

3.) Create a default page (Default.aspx)

And set the class of a div to “testclass” (define above)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ThemTests._Default"
%>

<!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>Test with themes</title>
</head>
<body>
 <form id="form1" runat="server">
 <div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut tellus eget turpis semper adipiscing sit amet id odio. Nunc vitae imperdiet tellus. Aenean quis orci metus, vitae placerat leo. Pellentesque luctus, lectus sit amet lacinia tincidunt, mi nibh sagittis nisl, vitae mollis eros nisi sit amet sem. Nunc dictum massa turpis. Etiam nisi mauris, consectetur et tempus id, pharetra in turpis. Nullam pretium ultricies nulla nec gravida. Sed porttitor metus nisl, ac condimentum nunc. Integer id feugiat orci. Maecenas ut lacinia purus. Mauris egestas mattis accumsan. Nunc in justo massa, quis egestas orci. Ut tincidunt, ligula sit amet tempor pharetra, magna mauris gravida mi, sed semper magna justo at velit. Donec vulputate fringilla lacus non sollicitudin. Morbi nulla nibh, pellentesque sed bibendum cursus, malesuada ut nisi.
 </div>
 </form>
</body>
</html>

4.) Edit the Web.Config file

Go to the “Pages” section, set the styleSheetTheme attribute to “Common” and the theme attribute to “Green”


<pages styleSheetTheme="Common" theme="Green">

Now launch your web application, the result has to be like this :

image

See in firebug :

image

Explanation :

This works because of the styleSheetTheme and theme attributes.

In fact, ASP.NET applies the styleSheetTheme defined theme first, then applies the page defined styles and at least applies the theme defined theme.

With this technique you can get rid of a few headaches.

Incoming search terms:

  • difference between DTD and CSS in net

About Sam Beauvois

Application Developer, .NET enthusiast since 2004, I'm interested in technology watch, usability, code quality, patterns & practices, UX, ...

1 comment

  1. This article is fantastic. My requirement is a little more complex but this solution fits very well.

    I have two “common” themes which are set on a “delivery basis” which I can set via Web.Config using the higher level “styleSheetTheme” attribute.

    Within a particular delivery platform we have lots of “organisations” and some of those require custom theming which I can do by setting Page.Theme attribute in the Page_PreInit.

    Both combination of templates roll in lovely.

    Thanks

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>