[HowTo] Design and Tweak your Frontpage

[Floris]

[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]

[Floris]

(1) Breaking up the categories from eachother

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

(installation)
We are going to modify a few original templates, and because we had some users who said they couldn't revert to original after things got messy; so .. backup! > copy the template, paste in notepad, save as templatename_template_original.txt.
Ok, installation will be done in a few steps:

• Step 1
• Login to the Admin Control Panel (ACP).
  Templates > Modify > Expand
  Forum Home Page Templates > Expand
  forumhome > change original
• Find the following code (should be above $forumbits) and remove it from the template:
  

  <tr align="center">
    <td bgcolor="{tableheadbgcolor}"><smallfont>&nbsp;</smallfont></td>
    <td bgcolor="{tableheadbgcolor}" width="80%" align="left"><smallfont color="{tableheadtextcolor}"><b>Forum</b></smallfont></td>
    <td bgcolor="{tableheadbgcolor}"><smallfont color="{tableheadtextcolor}"><b>Posts</b></smallfont></td>
    <td bgcolor="{tableheadbgcolor}"><smallfont color="{tableheadtextcolor}"><b>Threads</b></smallfont></td>
    <td bgcolor="{tableheadbgcolor}" nowrap><smallfont color="{tableheadtextcolor}"><b>Last Post</b></smallfont></td>
    <td bgcolor="{tableheadbgcolor}" width="20%"><smallfont color="{tableheadtextcolor}"><b>Moderator</b></smallfont></td>
  </tr>

• Now find $forumbits again and on a new line below it add the following code:
  

  </table>
  </td></tr></table><br>
  <table cellpadding="{tableouterborderwidth}" cellspacing="0" border="0" bgcolor="{tablebordercolor}" {tableouterextra} width="{contenttablewidth}" align="center"><tr><td>
  <table cellpadding="4" cellspacing="{tableinnerborderwidth}" border="0" {tableinnerextra} width="100%">

• Now find this code:
  

  <!-- main -->
  <table cellpadding="{tableouterborderwidth}" cellspacing="0" border="0" bgcolor="{tablebordercolor}" {tableouterextra} width="{contenttablewidth}" align="center">

  and replace it with this code:
  

  <!-- main -->
  <table cellpadding="{tableouterborderwidth}" cellspacing="0" border="0" bgcolor="{pagebgcolor}" {tableouterextra} width="{contenttablewidth}" align="center">

• Now "Save" the forumhome template and continue to step 2.

• Step 2
• Click on forumhome_forumbit_level1_nopost > Change original
• The first line should be: <tr id="cat">, BEFORE this, add the following code (on a empty line):
  

  </table>
  </td></tr></table><br>
  <table cellpadding="{tableouterborderwidth}" cellspacing="0" border="0" bgcolor="{tablebordercolor}" {tableouterextra} width="{contenttablewidth}" align="center"><tr><td>
  <table cellpadding="4" cellspacing="{tableinnerborderwidth}" border="0" {tableinnerextra} width="100%">

• The last line should be: </tr>, AFTER this, add the following code (on an empty line):
  

  <tr align="center">
    <td bgcolor="{tableheadbgcolor}"><smallfont> </smallfont></td>
    <td bgcolor="{tableheadbgcolor}" width="80%" align="left"><smallfont color="{tableheadtextcolor}"><b>Forum</b></smallfont></td>
    <td bgcolor="{tableheadbgcolor}"><smallfont color="{tableheadtextcolor}"><b>Posts</b></smallfont></td>
    <td bgcolor="{tableheadbgcolor}"><smallfont color="{tableheadtextcolor}"><b>Threads</b></smallfont></td>
    <td bgcolor="{tableheadbgcolor}" width="170" nowrap><smallfont color="{tableheadtextcolor}"><b>Last Post</b></smallfont></td>
    <td bgcolor="{tableheadbgcolor}" width="20%"><smallfont color="{tableheadtextcolor}"><b>Moderator</b></smallfont></td>
  </tr>

• Now "Save" the forumhome_forumbit_level1_nopost template and continue to step 3.

• Step 3
• Click on forumhome_forumbit_level2_nopost > Change original
• The last line should be: </tr>, AFTER this, add the following code (on an empty line):
  

  <tr align="center">
    <td bgcolor="{tableheadbgcolor}"><smallfont> </smallfont></td>
    <td bgcolor="{tableheadbgcolor}" width="80%" align="left"><smallfont color="{tableheadtextcolor}"><b>Forum</b></smallfont></td>
    <td bgcolor="{tableheadbgcolor}"><smallfont color="{tableheadtextcolor}"><b>Posts</b></smallfont></td>
    <td bgcolor="{tableheadbgcolor}"><smallfont color="{tableheadtextcolor}"><b>Threads</b></smallfont></td>
    <td bgcolor="{tableheadbgcolor}" width="170" nowrap><smallfont color="{tableheadtextcolor}"><b>Last Post</b></smallfont></td>
    <td bgcolor="{tableheadbgcolor}" width="20%"><smallfont color="{tableheadtextcolor}"><b>Moderator</b></smallfont></td>
  </tr>

• Now "Save" the forumhome_forumbit_level2_nopost template.

Done!

[Floris]

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

(installation)
We are going to modify a few templates, and because we modified them in our previous post, I assume they are not original no more. So these next step are only correct if you have applied the template modification from the previous post.
Ok, installation will be done in a few steps:

• Step 1
• Login to the Admin Control Panel (ACP).
  Templates > Modify > Expand
  Forum Home Page Templates > Expand
  forumhome_forumbit_level1_nopost > edit
• find the following code:
  

  <tr id="cat">
  	<td bgcolor="{categorybackcolor}" colspan="6">

  and replace that with:
  

  <tr id="cat">
  	<td background="{imagesfolder}/frontpage/cat_bg_01.gif" bgcolor="{categorybackcolor}" colspan="6">

• Now find this code: (at the end of the template)
  

  <tr align="center">
    <td bgcolor="{tableheadbgcolor}"><smallfont> </smallfont></td>
    <td bgcolor="{tableheadbgcolor}" width="80%" align="left"><smallfont color="{tableheadtextcolor}"><b>Forum</b></smallfont></td>
    <td bgcolor="{tableheadbgcolor}"><smallfont color="{tableheadtextcolor}"><b>Posts</b></smallfont></td>
    <td bgcolor="{tableheadbgcolor}"><smallfont color="{tableheadtextcolor}"><b>Threads</b></smallfont></td>
    <td bgcolor="{tableheadbgcolor}" width="170" nowrap><smallfont color="{tableheadtextcolor}"><b>Last Post</b></smallfont></td>
    <td bgcolor="{tableheadbgcolor}" width="20%"><smallfont color="{tableheadtextcolor}"><b>Moderator</b></smallfont></td>
  </tr>

  And replace that with the following code:
  

  <tr align="center">
    <td background="{imagesfolder}/frontpage/cat_bg_02.gif" bgcolor="{tableheadbgcolor}"><smallfont> </smallfont></td>
    <td background="{imagesfolder}/frontpage/cat_bg_02.gif" bgcolor="{tableheadbgcolor}" width="80%" align="left"><smallfont color="{tableheadtextcolor}"><b>Forum</b></smallfont></td>
    <td background="{imagesfolder}/frontpage/cat_bg_02.gif" bgcolor="{tableheadbgcolor}"><smallfont color="{tableheadtextcolor}"><b>Posts</b></smallfont></td>
    <td background="{imagesfolder}/frontpage/cat_bg_02.gif" bgcolor="{tableheadbgcolor}"><smallfont color="{tableheadtextcolor}"><b>Threads</b></smallfont></td>
    <td background="{imagesfolder}/frontpage/cat_bg_02.gif" bgcolor="{tableheadbgcolor}" width="170" nowrap><smallfont color="{tableheadtextcolor}"><b>Last Post</b></smallfont></td>
    <td background="{imagesfolder}/frontpage/cat_bg_02.gif" bgcolor="{tableheadbgcolor}" width="20%"><smallfont color="{tableheadtextcolor}"><b>Moderator</b></smallfont></td>
  </tr>

• Now "Save" the forumhome_forumbit_level1_nopost template and continue to step 2.

• Step 2
• Open template forumhome_pmloggedin > Change original
• Find the following code:
  

  <tr id="cat">
  	<td bgcolor="{categorybackcolor}" colspan="6">

  and replace it with the following code:
  

  <tr id="cat">
  	<td background="{imagesfolder}/frontpage/cat_bg_01.gif" bgcolor="{categorybackcolor}" colspan="6">

• Now "Save" the forumhome_pmloggedin template and continue to step 3.

• Step 3
• Open template forumhome_loggedinusers > Change original
• Find the following code:
  

  <tr id="cat">
  	<td bgcolor="{categorybackcolor}" colspan="6">

  and replace it with the following code:
  

  <tr id="cat">
  	<td background="{imagesfolder}/frontpage/cat_bg_01.gif" bgcolor="{categorybackcolor}" colspan="6">

• Now "Save" the forumhome_loggedinusers template and continue to step 4.

• Step 4
• Login to your web server with your FTP client and browse to the images/ directory.
• Create a new directory in the images/ directory called 'frontpage'. (so we have images/frontpage/)
• Upload your cat_bg_01.gif and cat_bg_02.gif to this new directory (images/frontpage/) - and log out.

Done!

(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!)

[Floris]

(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!

(installation)
This is only going to take one template modification and should be pretty easy.

• Step 1
• Login to the Admin Control Panel (ACP).
  Templates > Modify > Expand
  Forum Home Page Templates > Expand
  forumhome_forumbit_level2_post > edit
• find the following code:
  

  <td bgcolor="{firstaltcolor}" align="left">

  and replace that with:
  

  <td bgcolor="{firstaltcolor}" align="left"
  onMouseOver="this.style.backgroundColor='{secondaltcolor}'; 
  this.style.cursor='hand';" 
  onMouseOut="this.style.backgroundColor='{firstaltcolor}';" 
  onClick="window.location.href='forumdisplay.php?s=$session[sessionhash]&forumid=$forum[forumid]'">

• Now "Save" the forumhome_forumbit_level2_post template.

Done!

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

[Floris]

(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'.

(installation)
We are going to modify a template, and because we modified it in our previous post(s), I assume it is not original no more. So these next step are only correct if you have applied the template modification from the previous post(s).
Ok, installation will be done in a few steps:

• Step 1
• Login to the Admin Control Panel (ACP).
  Templates > Modify > Expand
  Forum Home Page Templates > Expand
  forumhome_pmloggedin > edit
• find the following code:
  

  <tr id="cat">
  	<td background="{imagesfolder}/frontpage/cat_bg_01.gif" bgcolor="{categorybackcolor}" colspan="6"><a href="private.php?s=$session[sessionhash]" 
  title="Click Here to Open Your Private Messages $inboxname"><normalfont color="{categoryfontcolor}"><b>Private Messages</normalfont></b></a></td>
  </tr>
  <tr>
  	<td bgcolor="{secondaltcolor}" align="center" valign="top"><img src="{imagesfolder}/$lightbulb.gif" alt=""></td>
  	<td bgcolor="{firstaltcolor}" colspan="5"><smallfont>
  	<b>$bbuserinfo[username]</b> - You have $newpm[messages] new message(s) since your last visit.<br>
  	(You have $unreadpm[messages] unread messages and $allpm[messages] total messages in all your folders.)</smallfont></td>
  </tr>

  and replace that with:
  

  <tr id="cat">
  	<td background="{imagesfolder}/frontpage/cat_bg_01.gif" bgcolor="{categorybackcolor}" colspan="6"><a href="private.php?s=$session[sessionhash]" 
  title="Click Here to Open Your Private Messages $inboxname"><normalfont color="{categoryfontcolor}"><b>Private Messages</normalfont></b></a></td>
  </tr>
  <tr>
  	<td bgcolor="{secondaltcolor}" align="center" valign="top">
  <a href="private.php?s=$session[sessionhash]" title="Click Here to Open Your Private Messages $inboxname">
  <img src="{imagesfolder}/frontpage/$lightbulb.gif" alt="Private Messages System" border="0">
  </a></td>
  	<td bgcolor="{firstaltcolor}" colspan="5"><smallfont>
  	<b>$bbuserinfo[username]</b> - You have $newpm[messages] new message(s) since your last visit.<br>
  	(You have $unreadpm[messages] unread messages and $allpm[messages] total messages in all your folders.)</smallfont></td>
  </tr>

• Now "Save" the forumhome_pmloggedin template and continue to step 2.

• Step 2
• Login to your web server with your FTP client and browse to the images/frontpage/ directory.
• Upload your on.gif and off.gif to this directory (images/frontpage/) - and log out.

Done!

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

[Floris]

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.

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

[DestyNova]

Excellent! It is finally work!

Many thanks!

[bluecat]

Thank you. Excellent step by step instructions.

[hypedave]

thankyou for taking the time to share this info with us,

[VeRTeX]

wow that just owns, haha write a book = ]

actually i think someone should make this sticky and maybe added to the users guide, very nice job,

two thumbs up man and keep them coming = ]

[N9ne]

I use almost all of your template mods keep it up!!!!

I'm rating this thread 5 star because it's brilliant

[N9ne]

Okay I've run into a problem; I've installed the space between categories mod but I get these lines. Now I tried getting rid of one by doing what was stated in the other topic about getting rid of the line. Didn't work.

This is a picture of when I'm logged out. I see two lines at the top, and one at the bottom. One line is above whos online and one below.

[N9ne]

This is a pic of the line at the bottom when logged out. When logged in, the line above who's online disappears but the rest stay.

[rapspits]

I would say .... In the oringinal "space between categories" . THere is a way to get rid of the line . Go take a look at the tutorial . Read thuroughly and you should be able to get rid of it.

[N9ne]

Originally posted by rapspits
I would say .... In the oringinal "space between categories" . THere is a way to get rid of the line . Go take a look at the tutorial . Read thuroughly and you should be able to get rid of it.

In my post in this topic i said i'd read it and it didn't remove the line. I can post my templates' code on request in here, if that may help fix the problem.