Website Designers and Webmasters

Dedicated to all the tasks Webmasters, Website Developers and Website Designers find themselves facing.

Switching CSS on the Same Website


Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 116

Warning: Use of undefined constant add_to_content - assumed 'add_to_content' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 117

Warning: Use of undefined constant add_to_page - assumed 'add_to_page' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 118

Warning: Use of undefined constant add_to_feed - assumed 'add_to_feed' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 119

Warning: Use of undefined constant limit - assumed 'limit' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 120

Warning: Use of undefined constant match_content - assumed 'match_content' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 121

Warning: Use of undefined constant exclude_pages - assumed 'exclude_pages' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 122

Warning: Use of undefined constant blank_output - assumed 'blank_output' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 123

Warning: Use of undefined constant exclude_categories - assumed 'exclude_categories' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 124

Warning: Use of undefined constant exclude_cat_slugs - assumed 'exclude_cat_slugs' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 125

Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 116

Warning: Use of undefined constant add_to_content - assumed 'add_to_content' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 117

Warning: Use of undefined constant add_to_page - assumed 'add_to_page' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 118

Warning: Use of undefined constant add_to_feed - assumed 'add_to_feed' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 119

Warning: Use of undefined constant limit - assumed 'limit' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 120

Warning: Use of undefined constant match_content - assumed 'match_content' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 121

Warning: Use of undefined constant exclude_pages - assumed 'exclude_pages' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 122

Warning: Use of undefined constant blank_output - assumed 'blank_output' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 123

Warning: Use of undefined constant exclude_categories - assumed 'exclude_categories' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 124

Warning: Use of undefined constant exclude_cat_slugs - assumed 'exclude_cat_slugs' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 125

WiaF MascotAs I was doing some CSS research yesterday, I came upon a site that really impressed me. This site was primarily Red. It had a page called “skins”. “Skins” usually mean what the website/program look like. For example, Trillian messaging program is always the same program, but you can change the way it looks by getting new skins. Here are a couple skins from their website:

AOL, MSN, Yahoo, ICQ, and more all in one!

Now this kind of confused be, because a website will always have one look, and you have to actually edit the site to change that, right? Wrong! On this guy’s “skins” Page he had three buttons and when you clicked on them, it totally changed what the page looked like!! So of course I learned all I could about it, and here is what I have to share with you.

You can view his site here.

Here is the code:

You need two (or more) different style sheets to use for the same website. You will include it in the header like this:

<link rel=”stylesheet” type=”text/css” href=”asset/stile.css” title=”metrostation” media=”screen” />
<link rel=”alternate stylesheet” type=”text/css” media=”screen” href=”asset/cielo.css” title=”cielo” />

This is the javascript that needs to be included in the page:

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;
     }
   }
}

Then all you need to do is create this simple anchor on your website that will switch themes to that CSS document(You will need to make a different button for each different CSS):

onclick=”setActiveStyleSheet(‘cielo’, 1);return false;”

That is freaking the coolest thing, with endless possibilities. Once I have duplicated this on mywebsite, I’ll be sure to make a post so you can find it!

-Enjoy,
-Ashton Sanders

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment