Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Theme > Theme Selector
Mottie (SuperAdmin) 7/28/2008 9:30 AM EST : Theme Selector
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 5/21/2009 3:59 PM EST : RE: Theme Selector
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 9/5/2009 11:29 PM EST : RE: Theme Selector
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

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 it does ever get added back.... Also, the statebar ID "#ctl00_ContentPlaceHolder1_ctl00_pnlTopBar" may vary from site to site, 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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

QuinnFaye13 (Member) 2/23/2012 4:37 PM EST : RE: Theme Selector

QuinnFaye13
Posts: 6

0
Like

0
Dislike

I like this, can it be customized for STO themes?

Characters: Quinn le Faye
TopBottom

Mottie (SuperAdmin) 2/23/2012 9:21 PM EST : RE: Theme Selector
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

It can be customized for any theme.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

QuinnFaye (Applicant) 2/24/2012 4:08 PM EST : RE: Theme Selector

QuinnFaye
Posts: 1

0
Like

0
Dislike

How? Where can I get the STO themes featured on Guildportal..or is it best to find others?
TopBottom

Mottie (SuperAdmin) 2/24/2012 7:24 PM EST : RE: Theme Selector
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

To be honest, adding a theme selector to your site takes a lot of work. I made this way back before GuildPortal added themes, so this may not be the best option any more.

To find more STO guild themes, you might just have to manually look for them yourself. One method would be to search through guilds with STO themes, on this page you can find a list of all of the games (in case there might be some other related game) and this is a list specifically for STO. Sorry, I can't be of more help... I just don't have the time, patience or talent to make game based themes.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%