Many of us would have this question. Themes are found everywhere, but what about theming in our own websites? We have desktop themes, wordpress themes, even themes for our mobile phones. Can’t we give the same functionality in our websites? Even though we have seen many websites with theming functionalities, they seem to be hard!

Traditional Web Theming

Now lets see how the traditional theming in web works. They have more than two stylesheets (CSS) and they use JavaScripts to replace the original stylesheet with a new one. This is very tough and tricky, as changing a stylesheet href is not advisable and also, old browsers do not support them!

New Easy Theming

Well, there is another better and easy way to do the same, but not replacing the DOM Elements and their attributes. As CSS is based on classes and rules, it would be better to separate the layout and presentation, and we can give the distinction by classes. Okay, enough of theories. Lets go for the practical part.

Consider a web page XHTML 1.1, which has a few components, namely a sidebar with links, can be given in HTML as this way:

HTML

    
        
                   
    
    
        

            

                

                    [*][url=#]Link 1[/url]
                    [*][url=#]Link 2[/url]
                    [*][url=#]Link 3[/url]
                    [*][url=#]Link 4[/url]
                    [*][url=#]Link 5[/url]
                
            
            

                
Welcome
                
A Paragraph
                
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
                
                
A List
                

                    [*]
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    
                    [*]
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                    
                    [*]
                        Duis aute irure dolor in reprehenderit in voluptate velit esse.
                    
                
            
        
    

Now we need to add some styles to the document with the help of tag this way:

In the style.css, we will first add the styles to describe about the way the presentation will be.

Layout

First the skeleton CSS would be, for all the elements in this:

body {}
body .wrap {}
body .wrap .side {}
body .wrap .side ul {}
body .wrap .side ul li {}
body .wrap .side ul li a {}
body .wrap .side ul li a:hover {}
body .wrap .side ul li a.active {}
body .wrap .main {}
body .wrap .main h1 {}
body .wrap .main h2 {}
body .wrap .main p {}
body .wrap .main ul {}
body .wrap .main ul li {}
body .wrap .main ul li p {}

Filling up the CSS fully, gives us with:

body {font-family: segoe ui; background: #fff;}
body .wrap {width: 90%; margin: auto; overflow: hidden;}
body .wrap .side {width: 25%; float: left;}
body .wrap .side ul {margin: 0; padding: 0; list-style: none;}
body .wrap .side ul li {margin: 0; padding: 0; list-style: none;}
body .wrap .side ul li a {text-decoration: none; padding: 5px; display: block;}
body .wrap .side ul li a:hover {background: #ccc; color: #0ff;}
body .wrap .side ul li a.active {background: #0fc; color: #000;}
body .wrap .main {width: 75%; float: right; background: #0fc;}
body .wrap .main h1 {margin: 0; padding: 0 10px 10px;}
body .wrap .main h2 {margin: 0; padding: 10px;}
body .wrap .main p {margin: 0 10px 5px; text-align: justify;}
body .wrap .main ul {margin: 0 10px 10px;}

Theming

Now our work would be identifying the themable components. Here, with the base layout, we can theme only the colours and list styles of the unordered list. Lets get those styles alone first. Being a beginner's tutorial, lets concentrate only on the foreground and background colours and not layouts.

body {color: ; background: ;}
body .wrap .side ul li a {color: ; background: ;}
body .wrap .side ul li a:hover {color: ; background: ;}
body .wrap .side ul li a.active {color: ; background: ;}
body .wrap .main {background: ;}
body .wrap .main h1 {color: ;}
body .wrap .main h2 {color: ; background: ;}
body .wrap .main p {color: ;}
body .wrap .main ul li p {color: ;}

Now with this set of rules, we need to add classes. Body is the top most parent of the content. So, we will be adding classes to the and changing the rules of the others.

Lets name the first class as .light and the CSS for the same would be:

.light {color: #333; background: #f5f5f5;}
.light .wrap .side ul li a {color: #666; background: #eee;}
.light .wrap .side ul li a:hover {color: #333; background: #ddd;}
.light .wrap .side ul li a.active {color: #333; background: #0ff;}
.light .wrap .main {background: #0ff;}
.light .wrap .main h1 {color: #333;}
.light .wrap .main h2 {color: #666; background: #0fc;}
.light .wrap .main p {color: #093;}
.light .wrap .main ul li p {color: #09c;}

The above colours are some crazy combinations. Now lets create another theme and let everything be grayscale. The red, green and blue values should be the same for all the colours.

.grayscale {color: #333; background: #ccc;}
.grayscale .wrap .side ul li a {color: #666; background: #eee;}
.grayscale .wrap .side ul li a:hover {color: #333; background: #ddd;}
.grayscale .wrap .side ul li a.active {color: #333; background: #fff;}
.grayscale .wrap .main {background: #fff;}
.grayscale .wrap .main h1 {color: #333;}
.grayscale .wrap .main h2 {color: #fff; background: #999;}
.grayscale .wrap .main p {color: #666;}
.grayscale .wrap .main ul li p {color: #999;}

If you see the above colours, all can be viewed even in a Black & White monitor too. So we are done with our theming part. Lets start the interactive JavaScript Part in the #-Link-Snipped-#.