Home arrow Style Sheets arrow Page 5 - Customizing styles: User-Controlled Style Sheets Part III
STYLE SHEETS

Customizing styles: User-Controlled Style Sheets Part III


In this third part and final part of our article series about user-controlled style sheets, we will learn how to make switching between style sheets both reversible and persistent across all pages of your website for your visitors.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 15
April 20, 2005
TABLE OF CONTENTS:
  1. · Customizing styles: User-Controlled Style Sheets Part III
  2. · Breaking the "changeStyle()" function into pieces
  3. · Listing the complete source code
  4. · Making the big change: multiple style sheets and persistence
  5. · Defining the HTML markup and Style Sheets
  6. · Putting the pieces together

print this article
SEARCH DEVARTICLES

Customizing styles: User-Controlled Style Sheets Part III - Defining the HTML markup and Style Sheets
(Page 5 of 6 )

At this point, its necessary to define the markup to be used, in order to explain how the "setStyleSheet()" function is passing the ID corresponding to the style sheet to be activated. The HTML is as follows:

<h1>Page Name</h1>

<div id="stylepanel">

<p>

<a href="#" title="Change Style" id="switcher1">Style 1</a>

<a href="#" title="Change Style" id="switcher2">Style 2</a>

<a href="#" title="Change Style" id="switcher3">Style 3</a>

<a href="#" title="Change Style" id="switcher4">Style 4</a>

</p>

</div>

<div class="content">

<p>Content for div1 goes here...Content for div1 goes here...Content for div1 goes here...</p>

</div>

<div class="content">

<p>Content for div2 goes here...Content for div2 goes here...Content for div2 goes here...</p>

</div>

<div class="content">

<p>Content for div3 goes here...Content for div3 goes here...Content for div3 goes here...</p>

</div>

 

Having listed the HTML markup, things become quite clear. Notice that weve assigned style sheets IDs in the sequence "style1", "style2" "style4". Regarding of the switcher links, their ID's attributes have been similarly assigned in the following way: "switcher1", "switcher2""swicther4".

Each time a link is clicked, it is passing its ID to the "setStyleSheet()" function, which gets the style sheet ID to be activated by simply replacing the "switcher" string with the "style" value. That implies that if the "switcher3" has been clicked, the style sheet for being enabled will be "style3.css." As you can see, the process is a bit tricky, but it works very nicely. Are you sticking with me? Good, because were almost finished.

The rest of our work is to briefly show the CSS rules for the style sheets. Since its rather pointless to list the code for each one of them, lets just define the rules for "default.css." Feel free to specify the rules that you want to apply for the rest of them, making the style change noticeable, when the user selects a different style sheet. So, heres the code for our default style sheet:

.content {

     clear: left;

     font: normal 12px "Arial", Helvetica, sans-serif;

     color: #000;

     background: #fff;

     margin-bottom: 10px;

}

h1 {

     font: bold 24px "Arial", Helvetica, sans-serif;

     color: #000;

}

#switcher1 {

     float: left;

     display: block;

     width: 50px;

     height: 15px;

     padding: 2px;

     border: 1px solid #000;

     font: bold 12px "Arial", Helvetica, sans-serif;

     color: #000;

     text-align: center;

     text-decoration: none;

     background: #ccc;

}

#switcher2 {

     float: left;

     display: block;

     width: 50px;

     height: 15px;

     padding: 2px;

     border: 1px solid #000;

     font: bold 12px "Arial", Helvetica, sans-serif;

     color: #000;

     text-align: center;

     text-decoration: none;

     background: #9cf;

}

#switcher3 {

     float: left;

     display: block;

     width: 50px;

     height: 15px;

     padding: 2px;

     border: 1px solid #000;

     font: bold 12px "Arial", Helvetica, sans-serif;

     color: #000;

     text-align: center;

     text-decoration: none;

     background: #fc0;

}

#switcher4 {

     float: left;

     display: block;

     width: 50px;

     height: 15px;

     padding: 2px;

     border: 1px solid #000;

     font: bold 12px "Arial", Helvetica, sans-serif;

     color: #000;

     text-align: center;

     text-decoration: none;

     background: #393;

}

Just let your inspiration soar and define some catching-eye styles for each style sheet!

Okay, weve been playing with sections of code to understand how its working. Now, lets glue the pieces back to see the entire picture. 


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials