Neoseeker : Tags : forum themes

I admit that few things feel better than coming up with a color scheme that works and works well, but for the rest of us mortals there is a fantastic site from Adobe Labs called Kuler.

When you first go to the site you're greeted with a number of highly rated color schemes that use five colors, like Cold Lake, shown below.





After browsing through a few themes, I found The Sky Through Glass, some of the colors of which you'll see on this blog. Usually I will find a scheme that I like and choose one or two of those colors for a web site. If you want the hex color codes, click on the somewhat hidden button outlined in red below to go to the editor.





At the editor, you can find the color codes for any of the colors shown. You can also tweak existing themes to meet your needs or even create your own color schemes from scratch!





I'd be really interested in seeing what kind of themes Neoseekers are using, so I'd appreciate if you leave a comment here if you're using a theme on your blog that you found or created on Kuler.

Happy Coloring!

Kuler

color scheme blog themes forum themes web development technology

Read more


So I just got this NeoPM earlier today from Artificer which detailed how to create your own forum themes (a general guide for most moderators). It coincidently linked to one of his blog entries, which in turn introduced me to Neoseeker's new blogging system. So since then, I've been thinking of appropriate themes for my forum, Monster Hunter Freedom 2 (PSP). What do you think might be some good colour variations of the forum? I've also had the idea of having a forum competition, where one of the prizes may be that the forum member can create their own forum theme and have it implemented under their name. Thoughts on this also?

playstation portable neoseeker related forum themes mhf2

Read more

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="http://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

Read more
(0.0563/d/web8)