If you've been to Loungin' since July, you may have noticed the drop-down list in the forum header that allows you to change how you and only you view the forum. This gives seekers a great opportunity to view forums in a different light without annoying other people with their choice. The best part is that your choice is saved for the next time you view the forum, assuming you have cookies enabled.

Since the feature hit Loungin' I've had a few PMs from moderators who want to do the same thing in their forum(s), but I haven't had a good answer for them...until now! I intend for this post to walk you through each step required to add this feature.

Step 1. Build Your Themes

Obviously in order to have a theme selector, you have to have themes! tekmosis gives a good introduction to theme making here, but there is one thing you have to keep in mind. Instead of creating your theme like this—

code

<style type="text/css"> /* YOUR THEME DETAILS HERE */ </style>

You'll need to put your theme in an external .css file. For example, if this were what I used to put in the forum header—

code

<style type="text/css"> body { background-color: black; } </style>

Then all I would do is take the text between the style tags and put them in a file and save it as something like MyTheme.css. Remember, don't put the style tags in the file!

Here are some examples from Loungin': Dark Knight, Aya Pink, Shane Blue


Step 2. Upload Your Themes

You'll next have to make sure that your themes are accessible online. If you don't have a way to host CSS files online, I'd recommend signing up for an account at Lycos; afterwards navigate to the WebFTP area and upload your files that way.


Step 3. Upload the Script (Be Nice to Ren of Heavens)

Ren is your friend when it comes to uploading scripts for your forum. If you ask him nicely to upload this script for your forum, you'll be one step closer to having your dynamic themes.


Step 3b. Modify Your Forum Header (Optional)

If you intend for the themes to change your forum header as well, you will need to ensure that your header has an ID attribute with the value "theme_header". For example—

code

<img src="https://i.neoseeker.com/m/31026_photo.gif" id="theme_header" />

Step 4. Add the Theme Selector to Your Forum

Let's review quickly. If you've reached this point, this means you have at least one custom theme you'd like to use, and you also have the script uploaded in your forum. Assuming that's the case, let's move on to the last part: the theme selector.

The drop-down list is very easy to make; the template looks like this:

code

<select id="theme_selector"> <option>Default</option> /* Additional Themes */ </select>

For each theme you want to add, follow this pattern:

code

<option value="THEME_KEY" csshref="CSS_URL" headersrc="FORUM_HEADER_URL">THEME_NAME</option>

1. THEME_KEY: A one-character piece of text that identifies this theme. This means that each theme in your forum must have a unique THEME_KEY.
2. CSS_URL: The URL for the CSS file you uploaded in Step 2 for this theme.
3. FORUM_HEADER_URL: If you want to change the forum header to match your theme, put the URL for the new image here.
4. THEME_NAME: This is what people will see in the theme selector, so make it a friendly name like "Aya Pink" or "Shane Blue".

Here are some examples.

Loungin'

code

<select id="theme_selector"> <option>Default</option> <option csshref="http://neoloungin.makesgirlscrazy.com/AyaFix.css" value="a">Aya Pink</option> <option csshref="http://neoloungin.makesgirlscrazy.com/EnigmaS.css" value="e">Enigma Maroon</option> <option csshref="http://neoloungin.makesgirlscrazy.com/KjgFix.css" value="k">Kjg Blue</option> <option csshref="http://neoloungin.makesgirlscrazy.com/QuiertaS.css" value="q">Quierta Purple</option> <option csshref="http://neoloungin.makesgirlscrazy.com/ShaneS.css" value="s">Shane Blue</option> <option csshref="http://neoloungin.makesgirlscrazy.com/Black.css" value="b">Gun Metal</option> <option csshref="http://neoloungin.makesgirlscrazy.com/Poison Ivy.css" value="g">Poison Ivy</option> <option csshref="http://neoloungin.makesgirlscrazy.com/Sour Line.css" value="l">Sour Lime</option> <option csshref="http://neoloungin.makesgirlscrazy.com/DarkKnight2.css" value="d">Dark Knight</option> </select>

HTML/CSS & NeoHome Help

code

<select id="theme_selector"> <option>Neoseeker Theme (Default)</option> <option value="d" csshref="http://members.lycos.co.uk/suffusion/dynamic_themes/devpenTheme.css">DEVPEN Theme</option> <option value="t" csshref="http://members.lycos.co.uk/suffusion/dynamic_themes/tornsTheme.css" headersrc="http://members.lycos.co.uk/suffusion/dynamic_themes/torn_htmlforumbanner.jpg">Torn's Theme</option> </select>

Afterwards, the theme selector and the script should work together to give you your custom themes.

---

I hope this helps! Feel free to post any questions or comments you have here.

neoseeker forum themes theme switching web development technology neoseeker related