|
|
Sponsor Advertisement
|
Blogger Talk Blogging Community
Blogs directories, blogging resources, blog tools, blog sites, blogging news, Blog tutorial, Blogging books.
|
Link Directory
Want Exposure? Looking for one way Backlinks? Get Text Link Advertising for $1.00.
|
|
|
|
Admin
Site Admin
Occupation: Web Developer
Location: Canada
Offline
|
Joined: Nov 26, 2004
Find all post by Admin
Total Posts: 79
0.06 posts per day
Total Words: 26,399
|
 Posted: Fri May 18, 2007 2:21 pm Post subject: Advance CSS Style switcher
|
|
|
|
|
This is a little nifty effect that will allow the user to change the entire look of your website with one click!
CSS has grown in popularity so much I thought I would release a little tutorial for those who wish to add this functionality to their websites or blogs!
It's not that hard to implement at all and all that's required is CSS and a little JavaScript to do the trick!
Difficulty: Easy
Time: 10 minutes
Step 1
first, let's create the folders as I am a neat freak and believe everything should be organized and placed in groups according to their structure or functions!
On your desktop right click and select 'Create New Folder'
Now double click to open that folder and create 2 new folders, one called style1, and the other images!
Why did we name the CSS style folder style1, just incase you already have a style folder in your root folder on your domain you won't accidentally overwrite it.
Now having a folder called style1 and images, lets you store both style sheets and images for each layout in separate folders to keep things organized and less confusing.
Step 2
In notepad or an ASCII editor create a new document and call it "style.css". Now using CSS you can easily include images as well for the layout or background!
Example
|
Code:
|
|
background : url('../images/styleswitcher/my_image.jpg');
|
Now the key thing to remember here is that your going to simply copy your original CSS stylesheet but create multiples but giving them individual names!
The trick here is once you have the original CSS created for your site you only need to copy the original Style.css and create as many different variations that you want for each color style you want to include!
Style1.css, Style2.css, Style3.css etc...
Now all you need to do is change the CSS attributes in each of those styles sheets (Style1-2-3.css) to the colors of your choice and save them in the folder called style1 that we created earlier!
Now to set the Advanced CSS Style Switcher up we need to edit the index.html or whatever coding preference you’re using index.php, index.shtml etc.
Example:
Html CSS Style switcher link:
|
Code:
|
<strong>Style Changer:</strong><br />
<a href="#" onclick="setActiveStyleSheet('default'); return false;">Style (default)</a> |
<a href="#" onclick="setActiveStyleSheet('red'); return false;">Style 1 (red)</a> |
<a href="#" onclick="setActiveStyleSheet('blue'); return false;">Style 2 (blue)</a> |
<a href="#" onclick="setActiveStyleSheet('grey'); return false;">Style 3 (grey)</a> |
<a href="#" onclick="setActiveStyleSheet('pink'); return false;">Style 4 (pink)</a> |
|
Now that we have the active links in place a visitor can change or set the different styles of their choice by clicking those following links!
Step 3
Now in your source code of index.html file near the top you should see the following:
< /head >
Paste the following Code just after the < /head > tag:
|
Code:
|
<link rel="stylesheet" type="text/css" href="style.css" title="default" />
<link rel="alternate stylesheet" type="text/css" href="style1.css" title="red" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="blue" />
<link rel="alternate stylesheet" type="text/css" href="style3.css" title="grey" />
<link rel="alternate stylesheet" type="text/css" href="style4.css" title="pink" />
<script type="text/javascript" src="styleswitcher.js"></script>
|
This allows the switching of the style sheets, but in order for it to work correctly be sure to use the correct path of where you uploaded the style1 folder that contains the different style sheets that you created earlier in this tutorial.
Step 4
Now we need to create the file "styleswitcher.js" and save it inside the folder style1 for safe keeping!
Styleswitcher performs the magic allowing the user to switch style sheets by clicking a link that we placed on your index.html file earlier.
So the last portion of this tutorial is creating the file"styleswitcher.js".
Open up Notepad or an ASCII editor and copy the following code, once you have the following code you need to save the file.
In notepad you should see the menu, go FILE -> SAVE AS, and from this dialog box switch the SAVE AS TYPE to ALL FILES.
Give it the file name styleswitcher.js and save it in the folder style1.
styleswitcher.js Code:
|
Code:
|
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
|
This JavaScript code will load the appropriate style sheet that the user has chosen and set a cookie with a time frame and save the users preferences to use the alternate style sheet of their choice.
Step 5
Now all that's left is to upload everything, and you should have a working style changer for your site if you did everything correctly.
See a live demo here:
http://www.invision-graphics.com/style1/index.html
Important Tip:
If you decided to also switch images per style sheet its a good idea to place them in the "style1/images" folder.
This will keep things organized and help everything to run much more efficiently.
If you have any questions or need more help, feel free to post them here.
Shawn DesRochers :-)
Forum Signature Affordable Web Hosting | Ultra Game Play
|
|
|
|
      
|
Back to top
Sponsor Advertising
|
|
|
|
|
|
ryngonz
Level 1 User
Occupation: Web Designer and a College Student
Location: Philippines
Offline
|
Joined: Apr 06, 2007
Find all post by ryngonz
Total Posts: 10
0.02 posts per day
Total Words: 498
|
|
Posted: Sun Jun 17, 2007 6:52 am Post subject:
|
|
|
|
|
|
Wow, thank you!!! I have a hard time on switching my layouts. I am an amateur but not that amatuer. I know only the basic but not the advance part. tnx again!!!
|
|
|
|
|
|
|
|
Back to top
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum
|
|
|
|
