Back to vBulletin 3.8 Template Modifications

Top Header and Side Borders on Forum Home
Mod Version: 1.5, by Boosted Panda

vB Version: 3.8.x Rating: (0 vote - 0 average) Installs: 8
Released: 26 Oct 2008 Last Update: Never Downloads: 3
Not Supported  

I get asked a lot for my code on how to make a top header and side borders for a forum. You can see an example by going to: http://yorkiechat.net. This assumes you have a Fixed Size of 800. You will notice in the Header and Footer the widths are 808. This is to compensate a 4px border we will add.

Another super simple Mod that really enhances the overall look of the forum. First off you'll need to adjust the header template.

Paste below and edit where needed:
PHP Code:
<table cellpadding="$stylevar[cellpadding]cellspacing="0" border="0" width="808" class="page" align="center">
<
tr>
    
<
td align="center" class="navheader"><a href="www.yourforum.com">Description Here</a></td>

<
td align="center" class="navheader"><a href="www.yourforum.com">Description Here</a></td>

<
td align="center" class="navheader"><a href="www.yourforum.com">Description Here</a></td>

<
td align="center" class="navheader"><a href="www.yourforum.com">Description Here</a></td>
            
    </
td>
</
tr>
</
table>
<!-- /
logo -->

<!-- 
content table -->
$spacer_open

$_phpinclude_output

$ad_location
[ad_header_end
Next we'll need to edit the Footer

PHP Code:
$ad_location[ad_footer_start]

<
br />
<
div align="center">
<
div class="smallfont" align="center">$vbphrase[all_times_are_gmt_x_time_now_is_y]</div>
    <
div class="smallfont" align="center">
    <!-- Do 
not remove this copyright notice -->
    
$vbphrase[powered_by_vbulletin]
    <!-- Do 
not remove this copyright notice -->
    </
div>

    <
div class="smallfont" align="center">
    <!-- Do 
not remove $cronimage or your scheduled tasks will cease to function -->
    
$cronimage
    
<!-- Do not remove $cronimage or your scheduled tasks will cease to function -->

    
$vboptions[copyrighttext]
    </
div>
</
div>
<
br />

$spacer_close
<!-- /content area table -->

<
form action="$vboptions[forumhome].php" method="get">

<
table cellpadding="$stylevar[cellpadding]cellspacing="0" border="0" width="808" class="page" align="center">
<
tr>
    <if 
condition="$show['quickchooser']">
        <
td class="tfoot">
            <
select name="styleid" onchange="switch_id(this, 'style')">
                <
optgroup label="$vbphrase[quick_style_chooser]">
                    
$quickchooserbits
                
</optgroup>
            </
select>
        </
td>
    </if>
    <if 
condition="$show['languagechooser']">
        <
td class="tfoot">
            <
select name="langid" onchange="switch_id(this, 'lang')">
                <
optgroup label="$vbphrase[quick_language_chooser]">
                    
$languagechooserbits
                
</optgroup>
            </
select>
        </
td>
    </if>
    <
td class="tfoot" align="$stylevar[right]width="100%">
        <
div class="smallfont">
            <
strong>
                <if 
condition="$show['contactus']"><a href="$vboptions[contactuslink]rel="nofollow" accesskey="9">$vbphrase[contact_us]</a> -</if>
                <if 
condition="$vboptions['hometitle']"><a href="$vboptions[homeurl]">$vboptions[hometitle]</a> -</if>
                <if 
condition="$show['admincplink']"><a href="$admincpdir/index.php$session[sessionurl_q]">$vbphrase[admin]</a> -</if>
                <if 
condition="$show['modcplink']"><a href="$modcpdir/index.php$session[sessionurl_q]">$vbphrase[mod]</a> -</if>
                <if 
condition="$vboptions['archiveenabled']"><a href="archive/index.php">$vbphrase[archive]</a> -</if>
                
$template_hook[footer_links]
                <if 
condition="$vboptions[privacyurl]"><a href="$vboptions[privacyurl]">$vbphrase[privacy_statement]</a> -</if>
                <if 
condition="$vboptions[tosurl]"><a href="$vboptions[tosurl]">$vbphrase[terms_of_service]</a> -</if>
                <
a href="#top" onclick="self.scrollTo(0, 0); return false;">$vbphrase[top]</a>
            </
strong>
        </
div>
    </
td>
</
tr>
</
table>

</
form>

$ad_location[ad_footer_end]

<if 
condition="$show['dst_correction']">
<!-- 
auto DST correction code -->
<
form action="profile.php?do=dst" method="post" name="dstform">
    <
input type="hidden" name="s" value="$session[sessionhash]/>
    <
input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]/>
    <
input type="hidden" name="do" value="dst" />
</
form>
<
script type="text/javascript">
<!--
    var 
tzOffset $bbuserinfo[timezoneoffset] + $bbuserinfo[dstonoff];
    var 
utcOffset = new Date().getTimezoneOffset() / 60;
    if (
Math.abs(tzOffset utcOffset) == 1)
    {    
// Dst offset is 1 so its changed
        
document.forms.dstform.submit();
    }
//-->
</script>
<!-- / 
auto DST correction code -->

</if>
<
script type="text/javascript">
<!--
    
// Main vBulletin Javascript Initialization
    
vBulletin_init();
//-->
</script
Now in the .page CSS area add this to the Extra CSS attributes. Change the color as necessary to fit your forum.

PHP Code:
border-left4px solid #000000;
border-right4px solid #000000; 
And finally add this to the Additional CSS area. Again change colors as needed to fit your forum.

PHP Code:
.navheader
{
background#000000;
color#FFFFFF;
fontbold 8pt tahomaverdanagenevalucida'lucida grande'arialhelveticasans-serif;
padding3px 6px 3px 6px;
white-spacenowrap;
}

.
navheader a:link, .tfoot_alink
{
    
color#FFFFFF;
}
.
navheader a:visited, .tfoot_avisited
{
    
color#FFFFFF;
}
.
navheader a:hover, .tfoot a:active, .tfoot_ahover
{
    
color#40364D;

For those using vBadvanced
adv_portal template

Find:
PHP Code:
<table align="center" class="page" cellspacing="0" cellpadding="0" width="100%"
Replace With:
PHP Code:
<table align="center" class="portal" cellspacing="0" cellpadding="0" width="100%"
Add in Additional CSS Area
PHP Code:

.portal 
colorSAME AS .PAGE
backgroundSAME AS .PAGE;
fontSAME AS .PAGE;

And thats it! Cool little mod to make your site POP!

Download

No files for download.

Screenshots

Click image for larger version
Name:	Picture 1.png
Views:	1752
Size:	65.8 KB
ID:	88778   Click image for larger version
Name:	Picture 2.png
Views:	1284
Size:	33.3 KB
ID:	88779  

Similar Mods

Forum Home Enhancements Right side column on forum home only vBulletin 3.6 Add-ons

vblts.ru supports vBulletin®, 2022-2024