[HowTo] Design and Tweak your Frontpage
 

[HowTo] Design and Tweak your Frontpage

v1.0.0 [build for vBulletin 2.2.6 Final] last update:12/06/02

_____ Introduction:

• Each vBulletin forum installed on a web server is either a part of a web site or maybe the web site itself. Either way, the section that is probably the most requested by the end-user is the frontpage which holds the introduction to the forum, the categories with its boards and maybe some other boxes like the private messages, who is currently online and the birthdays. It speaks for itself, that at least this page should give a good impression to the end-user who is browsing your web site. And might consider to continue to browse it and maybe even register.
  
  It has been six months now since I have purchased a license for vBulletin. And since my forum has been online I had a lot of questions and awnsers to them on how to improve my site. Some that did not had a direct awnser and were sometimes somewhat hard to figure out, got sorted out and put together as a little how to so I could share the knowledge with other members who had the same questions and were looking for the same awnsers. Several of those threads turned out pretty nice and with some we found some issues and even though we were able to 'fix' them, the threads did look a bit messy. It was hard to figure out sometimes what to do where, etc. So that is why I have put together this thread, with some design tips and some tweaks in an easy (and better ordered) overview.
  
  Please understand that I am not a guru in anything, and that I am trying my best to get things to work for everybody. However, I will not and can not support older versions of these hacks, older versions of vBulletin, and/or integration with other code-hacks / template modifications. All template modifications in this thread are based on a clean installation of vBulletin 2.2.6 final. Some of the provided code are also very good examples on how you could continue to apply them to other pages of your board; so read and learn > 'How can I do this on that other page?'-questions means that you didn't read and learned.
  
  Said that, let's explain what you can expect.

_____ Index:[list=1][*] Breaking up the categories from eachother[*] Adding background images to the categories[*] Adding onMouseOver-highlighting effect to the boards[*] Adding your own (blinking and clickable) private messages images[/list=1]

<font color="darkred">(1) Breaking up the categories from eachother</font>

(description)
This template modification will put a white space between the categories so they appear as they are no longer attached to eachother, giving the effect as if each category is in its own block; giving a much better overview of your topics.

(2) Adding background images to the categories

(description)
This template modification will set a background image to the category and the index row. This will give a nice texture effect and dimension to your frontpage. Away with that flat-look! This is also the perfect way to integrate the look of your web site into your forum.


(Please note that I did not include the cat_bg_0*.gif images, and that the below screenshot is ugly, I just used a random image to highlight the effect - the best way is to make them yourself!)

(3) Adding onMouseOver-highlighting effect to the boards

(description)
This template modification will set an inversed color effect to the boards. So when you hover with your mouse over a board, it will highlight and clickable to that specific board. (And when you move your mouse out of the board, it will return to original color). Very nice!


(For more of these onMouseOver highlighting effects, please read the original thread: here)

(4) Adding your own (blinking and clickable) private messages images

(description)
On the index page of your forum, there is a box that says "Private Messages" with an default vBulletin on/off icon and the message if there are any messages and/or how many there are unread/total.
This hack does two things to this box:
1- Lets you use your own on/off image-icons
2- Makes the icon clickable which feels more 'natrual'.


(Please note that I did not include the .gif images, if you want to use the images I use, please download them from: here!)

Here are the posts from the original threads;
use them for reference, nostalgy, whatever.

1. (support has dropped for these threads)
2. [howto] -> Spaces Between Categories
3. Background images .. (never released this one)
4. [HowTo] Make your boards highlight with onMouseOver (template) hack
5. [PM] Your own on/off clickable icons (template) hack

I could include other frontpage hacks in this thread, but I did not make them, and the support is done by the author of that particular template mod. So, use that thread. *g*

If you are going to reply or comment on one of the four template mods, then please include which one. Thank you.

All the above template modifications are applied to my personal web site which is powered by vBulletin 2.2.6 (http://www.creations.nl/) and these hacks are tested on this site, as well as on my private -none public - test board on my computer. Oh, no one gets to use the style/graphics from my site, without my written permission.

I do hope that someone likes these template mods and I do hope I didn't make any mistakes (and if so, I will update the appropiate post). ENJOY

this is all great info, thanks a bunch.

but i dont think we are allowed to post all that code in the forums, because it messes up the tables.

Nice hacks...i've found them allready on vbulletin.com forum:D

All the templates here are allready on vBulletin.com. *doh

Ah, I wasn't sure about that. I'll update my posts.


Done! Updated the posts.

ALL the templates? Why is this site maded then??