Customizing styles: User-Controlled Style Sheets – Part III - Defining the HTML markup and Style Sheets
(Page 5 of 6 )
At this point, it’s 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 we’ve 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 we’re almost finished.
The rest of our work is to briefly show the CSS rules for the style sheets. Since it’s rather pointless to list the code for each one of them, let’s 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, here’s 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, we’ve been playing with sections of code to understand how it’s working. Now, let’s glue the pieces back to see the entire picture.
Next: Putting the pieces together >>
More Style Sheets Articles
More By Alejandro Gervasio
AT&T devCentral & BlackBerry(r) Webcast Series: BlackBerry and GPS -Build Location Awareness into your BlackBerry Applications, July 10th -1:00PM EST. 
