Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 3 Articles
Reload this Page How To Make A Scalable Header For Your Forums
FAQ Community Calendar Today's Posts Search

Reply
Page 1 of 2 1 2
 
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
  #2  
Old 03-12-2009, 07:39 AM
sensimilla sensimilla is offline
 
Join Date: Dec 2004
Location: Poland
Posts: 555
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
could be useful in my next project, thanks
Reply With Quote
  #3  
Old 04-11-2009, 07:57 PM
n_only n_only is offline
 
Join Date: Oct 2003
Posts: 21
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
I couldn't use your a scalable header on this forum:

http://www.shmmr.net/vb/

the header does not have stretching piont , other than header left-right sides

do you have a bright idea that could help me ?
Reply With Quote
  #4  
Old 04-12-2009, 07:32 PM
madotds madotds is offline
 
Join Date: Oct 2007
Location: UK
Posts: 133
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Thanks for that mate I was trying to work out how to do that
Reply With Quote
  #5  
Old 04-14-2009, 03:53 AM
DieselMinded's Avatar
DieselMinded DieselMinded is offline
 
Join Date: Mar 2007
Posts: 1,655
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by n_only View Post
I couldn't use your a scalable header on this forum:

http://www.shmmr.net/vb/

the header does not have stretching piont , other than header left-right sides

do you have a bright idea that could help me ?
Possibly Change this

PHP Code:
    <th scope="col" width="760"><img src="newheader_a/main1a.jpg" alt="" width="760" height="172" border="0" usemap="#Map" dir="rtl" lang="ar" /></th> 
to this

PHP Code:
    <th scope="col" width="90%"><img src="newheader_a/main1a.jpg" alt="" width="90%" height="172" border="0" usemap="#Map" dir="rtl" lang="ar" /></th> 
Reply With Quote
  #6  
Old 04-14-2009, 08:28 AM
n_only n_only is offline
 
Join Date: Oct 2003
Posts: 21
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
thanks for your reply

but .. that did not work fine with me. there are an open space between "left & right" cell
Attached Images
File Type: jpg scalable-header-test1.jpg (43.0 KB, 0 views)
Reply With Quote
  #7  
Old 04-14-2009, 03:49 PM
DieselMinded's Avatar
DieselMinded DieselMinded is offline
 
Join Date: Mar 2007
Posts: 1,655
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
dont use "px" to justify your image use a % and make your image all 1 file
Reply With Quote
  #8  
Old 04-15-2009, 02:56 PM
dbirosel dbirosel is offline
 
Join Date: Feb 2007
Location: San Diego
Posts: 587
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Sweet article. I'll do this for sure when I get home!
Reply With Quote
  #9  
Old 07-18-2009, 06:49 PM
DieselMinded's Avatar
DieselMinded DieselMinded is offline
 
Join Date: Mar 2007
Posts: 1,655
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Good Luck !
Reply With Quote
  #10  
Old 07-23-2009, 03:06 PM
1Unreal 1Unreal is offline
 
Join Date: Jul 2008
Location: London
Posts: 372
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Nice article. Thanks!
Reply With Quote
Reply
Page 1 of 2 1 2

« Previous Thread | Next Thread »

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:33 PM.

Contact Us - Archive - Top

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.04937 seconds
  • Memory Usage 2,321KB
  • Queries Executed 24 (?)
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
  • (2)bbcode_php
  • (1)bbcode_quote
  • (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
  • (10)post_thanks_box
  • (10)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (10)post_thanks_postbit_info
  • (9)postbit
  • (1)postbit_attachment
  • (10)postbit_onlinestatus
  • (10)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
  • postbit_attachment
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete