Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Adding a theme selector to your site
Mottie (MVP) 7/28/2008 6:36 PM EST : Adding a theme selector to your site
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

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.
TopBottom

RedRydur (Guild Admin) 7/29/2008 9:08 AM EST : RE: Adding a theme selector to your site
RedRydur
Posts: 1065
Zomgawsh Poster

awesome Mottie! ...Some of us work weeks on our 1 theme and you whip up 7 nice looking ones on a freaking whim! grrrrr...
---------------------------------------------
-
RedRydur the Pure
TopBottom

Mottie (MVP) 7/29/2008 10:16 AM EST : RE: Adding a theme selector to your site
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

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
TopBottom

Tamaverfir (Guild Admin) 7/29/2008 11:14 AM EST : RE: Adding a theme selector to your site
Tamaverfir
Posts: 221
Fingers of Fury!

Thanks Mottie
Ima try those out, although i can barely understand all that code hoo ha
-hands yet another cookie over-


"So I'm guessing those big red things on the ground that are blowing me up are the bombs?" - Plumb

TopBottom

Mottie (MVP) 5/21/2009 3:56 PM EST : RE: Adding a theme selector to your site
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

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.
TopBottom

Mottie (MVP) 9/5/2009 11:32 PM EST : RE: Adding a theme selector to your site
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Updated all the CSS files (new URLs above) to better match the changes to GuildPortal - it's not all inclusive.

*Note: There still isn't a "StateBar" class, but I left it in in case itdoes ever get added back.... Also, the statebar ID"#ctl00_ContentPlaceHolder1_ctl00_pnlTopBar" may vary from site tosite, so do a view source on your page and look for (Ctrl-F)"pnlTopBar" to get the exact ID in case the one provided doesn't work.
TopBottom

Guppy Queen (New Admin) 9/6/2009 4:02 PM EST : RE: Adding a theme selector to your site
Guppy Queen
Posts: 41034
Zomgawsh Poster

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

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%