Back to vBulletin 3 Articles

How To Make A Scalable Header For Your Forums
by DieselMinded 08 Mar 2009

Alot of webmasters code and design for there monitor size , there site always looks perfect to them but what they dont realize is how bad it looks to others with different screen sizes

See Bad Design


Even the banner ads are aligned left

With wide screen monitors it looks real bad and un professional

So how do you get your header to accommodate just about all monitor sizes ?

I used multiple images .. 3 and justified the each one differently , left , center , right

and replaced this code in the DEFAULT VB header template
HTML Code:
    <td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
    <td align="$stylevar[right]" id="header_right_cell">
        <if condition="$ad_location['ad_header_logo']">$ad_location[ad_header_logo]<else />&nbsp;</if>
    </td>
with this code
HTML Code:
<td align="$stylevar[left]"><div align="center">
<a href="$vboptions[forumhome].php$session[sessionurl_q]">
<img src="http://www.dieselbombers.com/images/dieselbomber.png" align="right" border="0" alt="Diesel Bombers - The Ultimate Diesel Community" />
<img src="http://www.dieselbombers.com/images/dieselbomberleft.png" align="left" border="0" alt="Diesel Bombers - The Ultimate Diesel Community" />
<img src="http://www.dieselbombers.com/images/dieselbombersheader2009.png" align="center" alt="$vboptions[bbtitle]" border="0" /></a></div></td>
    <td align="$stylevar[right]" id="header_right_cell">
        <if condition="$ad_location['ad_header_logo']">$ad_location[ad_header_logo]<else /></if>
    </td>
now the site suits all users with a scalable header

demo:
http://www.dieselbombers.com

grab the right side of your browser window and drag it in , the images move to accommodate the screen size .

Do your self a favor start a thread on your forum asking for screen shots of your home page , you may be suprized how different your site looks to others

DM

vblts.ru supports vBulletin®, 2022-2024