Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 3 Articles
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
How To Make A Scalable Header For Your Forums
DieselMinded's Avatar
DieselMinded
Join Date: Mar 2007
Posts: 1,655

 

Show Printable Version Email this Page Subscription
DieselMinded DieselMinded is offline 03-07-2009, 10:00 PM

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:
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
Reply With Quote
  #12  
Old 08-16-2009, 11:33 PM
DieselMinded's Avatar
DieselMinded DieselMinded is offline
 
Join Date: Mar 2007
Posts: 1,655
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Glad it helped
Reply With Quote
  #13  
Old 09-07-2010, 01:52 AM
narhot's Avatar
narhot narhot is offline
 
Join Date: Dec 2007
Location: www.jawhara1.com/vb
Posts: 16
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

A good idea and a wonderful Forum member hand
thanks my brother
Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:19 PM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.03842 seconds
  • Memory Usage 2,230KB
  • Queries Executed 18 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (2)bbcode_html
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (3)post_thanks_box
  • (3)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (3)post_thanks_postbit_info
  • (2)postbit
  • (3)postbit_onlinestatus
  • (3)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete