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

[Tony G]

Originally Posted by ogden2k

This doesn't tell how to separate just the who's online/PM's from the rest?

You can do a similar modification but just put the spacing code after $forumbits and before $usersonline (Or whatever the online variable is)

[Floris]

I just released the version for vbulletin version 3 here at vbt.

Please check the vb3 template modifications forums to learn how to add a space between categories.

[F0xstud85]

I hate to bring a topic back from the dead but...I'm looking to use the background images on categories edit, but I want different backgrounds for different categories (see, I do a gaming site, and it'd be cool if I could get a Warcraft background on the Warcraft category, and Starcraft for Starcraft, etc.). Would ANYONE know how to do this? Or does this require a hack? If so, I know to look at vBulletin.org, but what is the hack called, I searched but couldnt find it...

Thanks for the help guys!

[F0xstud85]

*bump* Does anyone know how this can be done? Read my last post ^^^ thanks

[jgm]

Hello,

I am trying to do the forum spacing template mod, but I seem to be having some problems.
I am in the process of moving to a new webhost and upgrading to vB 2.3.0 from version 2.2.6

The Active users is detached from the rest of the forums after making the template change, but that is it.

You can see the underconstruction site at:
http://aries.lunarpages.com/~madoshi...dles/index.php


I have gone over the modification five times now, and everytime it is the same, so I revert and try again and have the same result

The current hacks and other mods I have installed on version 2.3.0 are:

vBindex2.1 final
BadMadman's avatar category hack
extlink_11a_fixed hack (URL linking for category)
Hermon's sig size control
(All used in 2.2.6 with out conflict)

I did also use bbimport_vb2 import script to see if I could merge my old database with the new one so I dont lose users, post counts threads... etc etc... but as far as I can tell it does not bring any template info over.

I would greatly appreciate any help/thoughts on this.
I will post my template info that I modified too if that is needed.


Thank you!
-JGM

[jgm]

Originally Posted by JGM007

I will post my template info that I modified too if that is needed.

After thinking about it I figured it would be better if I posted it lol

//////////////////
forumhome/////////////////////

{htmldoctype}
<html>
<head>
<!-- no cache headers -->
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
<!-- end no cache headers -->
<meta name="keywords" content="vbulletin,forum,bbs,discussion,jelsoft">
<meta name="description" content="$bbtitle is a discussion forum powered by vBulletin. To visit the forum, go to $bburl/ . To find out about vBulletin, go to http://www.vbulletin.com/ .">
<title>$bbtitle - powered by vBulletin</title>
$headinclude
</head>
<body>
$header

<!-- text -->
<table cellpadding="2" cellspacing="0" border="0" width="{contenttablewidth}" {tableinvisibleextra} align="center">
<tr valign="top">
<td><img src="{imagesfolder}/vb_bullet.gif" border="0" align="middle" alt="$bbtitle : Powered by vBulletin version $templateversion">
<normalfont><b>$bbtitle</b></normalfont></td>
<td align="right"><smallfont>$welcometext<br><b>$newpo sts</b></smallfont></td>
</tr>
</table>

<table cellpadding="2" cellspacing="0" border="0" width="{contenttablewidth}" {tableinvisibleextra} align="center">
$unregwelcomemessage
<tr valign="bottom">
<td><smallfont>
Members: $numbermembers, Threads: $totalthreads, Posts: $totalposts<br>
Welcome to our newest member, <a href="member.php?s=$session[sessionhash]&action=getinfo&userid=$newuserid">$newusername </a>
</smallfont></td>
<td align="right"><smallfont>
The time now is $timenow.<br>
You last visited: $bbuserinfo[lastvisitdate].
</smallfont></td>
</tr>
</table>
<!-- /text -->

<br>

<!-- main -->
<table cellpadding="{tableouterborderwidth}" cellspacing="0" border="0" bgcolor="{pagebgcolor}" {tableouterextra} width="{contenttablewidth}" align="center"><tr><td>
<table cellpadding="4" cellspacing="{tableinnerborderwidth}" border="0" {tableinnerextra} width="100%">


$forumbits

</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%">

$loggedinusers
$birthdaybits
$pminfo
</table>
</td></tr></table>
<!-- /main -->

<br>

<!-- timezone/login-->
<table cellpadding="2" cellspacing="0" border="0" width="{contenttablewidth}" {tableinvisibleextra} align="center">
<tr valign="top">
<td><smallfont>$timezone</smallfont></td>
<td align="right">$logincode</td>
</tr>
</table>
<!-- /timezone/login -->

<br>

<!-- icons -->
<table cellpadding="2" cellspacing="0" border="0" width="{contenttablewidth}" {tableinvisibleextra} align="center">
<tr>
<td align="center">
<img src="{imagesfolder}/on.gif" border="0" alt="On" align="absmiddle">
<b><smallfont>New posts</smallfont></b>
&nbsp;&nbsp;
<img src="{imagesfolder}/off.gif" border="0" alt="Off" align="absmiddle">
<b><smallfont>No new posts</smallfont></b>
&nbsp;&nbsp;
<img src="{imagesfolder}/offlock.gif" border="0" alt="Closed Forum" align="absmiddle">
<b><smallfont>A closed forum</smallfont></b>
</td>
</tr>
</table>
<!-- /icons -->

$footer
</body>
</html>





////////////
forumhome_forumbit_level1_nopost/////////////////
</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%">

<tr id="cat">
<td bgcolor="{categorybackcolor}" colspan="6"><a href="forumdisplay.php?s=$session[sessionhash]&forumid=$forum[forumid]"><normalfont color="{categoryfontcolor}"><b>$forum[title]</b></normalfont></a>
<br><smallfont color="{categoryfontcolor}">$forum[description]</smallfont></td>
</tr>

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

///////////////////////////
forumhome_forumbit_level2_nopost///////////////////////
<tr id="cat">
<td bgcolor="{categorybackcolor}"><smallfont>&nbsp;</smallfont></td>
<td bgcolor="{categorybackcolor}" colspan="5">
<a href="forumdisplay.php?s=$session[sessionhash]&forumid=$forum[forumid]"><normalfont color="{categoryfontcolor}"><b>$forum[title]</b></normalfont></a>
<br><smallfont color="{categoryfontcolor}">$forum[description]</smallfont></td>
</tr>

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

[cindyd]

On line 598 remove </table>

</table>
</td></tr></table><br> ------->this is line 598
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#555576" width="100%" align="center"><tr><td>
<table cellpadding="4" cellspacing="1" border="0" width="100%">

<tr id="cat">
<td bgcolor="#606096" colspan="6"><a href="online.php?"><font face="verdana, arial, helvetica" size="2" color="#FFF788"><b>Currently Active Users</b></font></a><font face="verdana, arial, helvetica" size="2" color="#FFF788"><b>: 1</b></font></td>
</tr>
<tr>
<td bgcolor="#F1F1F1" colspan="6"><font face="verdana,arial,helvetica" size="1" >
<nobr>There are currently 0 members and 1 guests on the boards.</nobr> |
<nobr>Most users ever online was 1 on 08-05-2003 at 02:01 AM.</nobr><br>
</font></td>
</tr>

[jgm]

Hello,
I tried what you suggested and it did not seem to work

Thank you though!



Code now looks like:

</table>
</td></tr><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%">

<tr id="cat">
.........................
.........................
.........................

[cindyd]

It worked when I did it, see screenshot:

[cindyd]

Your line 598 may not have been the same, since I was taking it from View Source.....attached is a text file.

The </TABLE> (the one in caps) is what I took out.