How to add a theme selector to your site

GuildPortal admin site link to original post

This method assumes that you have set up your site to use Custom CSS as well as custom HTML for your content boxes. Read this post if you haven't done this yet

Setting up your site

• Custom HTML content boxes with each box border element having a CSS class assigned (if you've followed this post, you will already have it done).
• Your site's Custom StyleSheet enabled with basic CSS needed for all pages of your site. Here is an example: Overall CSS
  
  
• Have more than one CSS design for your site. On my test site 2, I actually have nine set up. Here are links to the different CSS themes I have so you can see examples.
  
  
  1. Bold (default)
  2. Black
  3. Blue
  4. Grey
  5. Night Elves
  6. Parchment
  7. WowVault (yeah I copied it from them *hide*)
  8. Slim - (LOL don't ask me why I called it this, because I don't remember)
  9. Exodar
  
  
• This is a basic layout for the CSS
  
  

  body { } form { } input, select { }	Overall page style - body Adjust width of your site with form input, select changes the input buttons/boxes style
  a:link, a:visited { } a:hover { } a:active { }	Link styles (these over-ride the default)
  #tooltip.. { }	tooltip styles
  .AltGridRow { } .NormGridRow { } .MoGridRow { }	Alternate Grid Row, Normal Grid Row style and Mouse-over Grid Row styles
  .StateBar,#ctl00_ContentPlaceHolder1_ctl00_pnlTopBar { }	Welcome bar style
  .BannerArea {}	Banner area styling (background image mostly)
  .TabBar { } .SelectedTab a { !important} .UnSelectedTabMo a { !important}	Tab bar style Selected tab link & Unselected tab link styles (these over-ride the default link styles)
  .SelectedTab { } .UnSelectedTab { } .UnSelectedTabMo { }	Internet Explorer's Selected tab, Unselected tab and Unselected tab mouse-over styles - IE doesn't behave like all other browsers when it comes to padding/height
  html>body .SelectedTab, html>body .UnSelectedTab, html>body .UnSelectedTabMo { }	All other browser's Selected tab, Unselected tab and Unselected tab mouse-over styles - most of the time this is just a height or padding difference from IE
  .ContentBox { } .ContentBoxTitle, .ContentBoxTitleNoBackground { } .ContentBoxBody { } .ContentTable { } .ContentGrid { } .blkbgl, .blkbgr, .blkContent { }	Content box styles, usually ContentBoxTitle and ContentBoxTitleNoBackground have the same styles. I have a ContentBoxBody2 in my CSS because this makes the transparent backgrounds look better.
  .topleft { } .toptile { } .topright { } .lefttile { } .righttile { } .bottomleft { } .bottomtile { } .bottomright { }	Box border styles (CSS defined, requires custom HTML box borders)
  .ForumCategoryHeader { } .MessageAuthorLinkCell1 {} .MessageSubjectCell1 { }	Forum header MessageAuthorLinkCell1 & MessageSubjectCell1 control the style of post header (between posts)
  .rmSlide { }	Style of the forum tools dropdown window
  Footer & Extras	In the CSS examples I have, these are custom CSS styles I use on my help site and custom styles for other things, like the custom feed box or even the facebox



• When you have your CSS styles set up, save them to the internet.

Adding and Customizing themes

There are two "modules" to this script, a selector module and a display module. You can use either one, or both.

I had previously used the selector module with images on the edge of the banner image to change the theme.

Paid Site:

1. Add the selector module to the banner area if you want to see it on every page.
2. If you would rather have the drop down menu in a free form text/HTML box, then you can add the display module to the header so it applies the theme to every page, or you could add the selector module to every page.

Free site:

1. Add the selector module to a free form text/HTML box on your main page or to every page if you desire.
2. Or, add the selector module to your main page and the display module to all other pages on your site - this is what I did on test-site 2.

Selector Module (Drop down menu)

<link rel="stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-bold.css" title="default" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-black.css" title="black" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-blue.css" title="blue" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-exodar.css"  title="exodar">
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-grey.css" title="grey" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-ne.css" title="ne" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-parch.css" title="parch" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-slim.css" title="slim">
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-wv.css" title="wv" />

<script src="http://www.axiomfiles.com/Files/262592/setstyle.js"></script>

<div align="center">
<select id="setStyle" class="StyleBox" onchange="setActiveStyleSheet(this.value)">
<option value="default">WoW-Bold
</option><option value="black">WoW-Black
</option><option value="blue">WoW-Blue
</option><option value="exodar">WoW-Exodar
</option><option value="grey">WoW-Grey
</option><option value="ne">WoW-Night Elves
</option><option value="parch">WoW-Parchment
</option><option value="slim">WoW-Slim
</option><option value="wv">WoW-Vault
</option></select>
</div>

<script type="text/javascript">
 var cookie = readCookie("style");
 var cssName = cookie ? cookie : "default";
 setPassiveStyleSheet(cssName);
 document.getElementById('setStyle').value = cssName;
</script>

Selector Module (using links or images)

<link rel="stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-bold.css" title="default" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-black.css" title="black" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-blue.css" title="blue" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-exodar.css"  title="exodar">
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-grey.css" title="grey" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-ne.css" title="ne" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-parch.css" title="parch" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-slim.css" title="slim">
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-wv.css" title="wv" />

<script src="http://www.axiomfiles.com/Files/262592/setstyle.js"></script>

<a href="#" onclick="setActiveStyleSheet('default'); return false;">WoW-Bold</a><br>
<a href="#" onclick="setActiveStyleSheet('black'); return false;">WoW-Black</a><br>
<a href="#" onclick="setActiveStyleSheet('blue'); return false;">WoW-Blue</a><br>
<a href="#" onclick="setActiveStyleSheet('exodar'); return false;">WoW-Exodar</a><br>
<a href="#" onclick="setActiveStyleSheet('grey'); return false;">WoW-Grey</a><br>
<a href="#" onclick="setActiveStyleSheet('ne'); return false;">WoW-Night Elves</a><br>
<a href="#" onclick="setActiveStyleSheet('parch'); return false;">WoW-Parchment</a><br>
<a href="#" onclick="setActiveStyleSheet('slim'); return false;">WoW-Slim</a><br>
<a href="#" onclick="setActiveStyleSheet('wv'); return false;">WoW-Vault</a><br>

<script type="text/javascript">
 var cookie = readCookie("style");
 var cssName = cookie ? cookie : "default";
 setPassiveStyleSheet(cssName);
</script>

Display Module

<link rel="stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-bold.css" title="default" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-black.css" title="black" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-blue.css" title="blue" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-exodar.css"  title="exodar">
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-grey.css" title="grey" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-ne.css" title="ne" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-parch.css" title="parch" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-slim.css" title="slim">
<link rel="alternate stylesheet" type="text/css" media="screen" href="http://www.axiomfiles.com/Files/262592/style-wv.css" title="wv" />

<script src="http://www.axiomfiles.com/Files/262592/setstyle.js"></script>
<script type="text/javascript">
 var cookie = readCookie("style");
 var cssName = cookie ? cookie : "default";
 setPassiveStyleSheet(cssName);
</script>

Customizing the modules

• Add and remove these links to your CSS as needed. The top link should have a rel="stylesheet" with a title="default",
  the remaining links have rel="alternative stylesheet" and a title of your choosing.
  
  <link rel="stylesheet" type="text/css" media="screen" href="URL TO DEFAULT CSS" title="default" />
  <link rel="alternate stylesheet" type="text/css" media="screen" href="URL TO CSS" title="SHORT NAME" />
• Replace the URLs in orange to your CSS files.
• Each CSS should have a title assigned to it (text in blue), but your default CSS (assigned in case javascript is disabled) is named "default" to match the title in the javascript (in red)
• The full name of your theme is added in the drop down menu (text in purple)
• I had previously used the selector module using links & images to allow the user to select the site theme and placed it in the banner area overlapping the banner image -
  this is just an idea I'm tossing out there on how to select your theme. See the image to the right.

Edit (5/21/2009): Added two new themes (Exodar and Slim) & changedthe links to the CSS files from ripway to axiomfiles (as they are nowGP hosted).
Edit (9/5/2009): Updated this scripting with new cleaner CSS files (now with comments) that better match the changes made to GP since this was last updated.

LOL no way... those all took me a long time. I've been tweaking each and every one of them for a long time now... I just need ideas for more

Added two new themes

• WoW-Exodar
  
• WoW-Slim
  

including links to the CSS and the updating of the code itself. To see these new themes, go check out my test-site 2.

Though I won't be using this feature, it's awesome Mottie