Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > Graphics Articles
Reload this Page How To Expand Custom Image Header
FAQ Community Calendar Today's Posts Search

Reply
Page 1 of 4 1 23 Last »
 
Thread Tools
How To Expand Custom Image Header
miner's Avatar
miner
Join Date: Mar 2005
Posts: 594

 

Show Printable Version Email this Page Subscription
miner miner is offline 01-23-2007, 10:00 PM
We hear it many times...
"How can I make my header image expandable to screen width?"

This tutorial will help you accomplish this task.

Requirements:
  • A bit of html knowledge;
  • photo editor;
  • and, photo editing.
Let's Get Started!

Let's start with a 780px header image ... you can use the example image below...




Then Crop the leftside (your logo part):





And save it as head_left.gif







Second crop the right side of the header image as shown below:



And save as head_right.gif





Next select background image -just 1 or 2px width like shown below:



Crop the selected part and save it as headbg.gif:




Now load all the three images to the misc folder of images...

Next goto admincp> styles&templates> style manager> all style options>

scroll down to header




Delete the existing code complete and insert the follow there:

Code:
<!-- logo -->
<a name="top"></a>
<center>
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center" style="background-image:url($stylevar[imgdir_misc]/headbg.gif)">
<tr>

<td align="left" valign="top"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/head_left.gif"  border="0" alt=""/></a></td>
<td align="right" valign="bottom"><img src="$stylevar[imgdir_misc]/head_right.jpg" alt="" /></td>
</tr>
</table>
</center>

<!-- /logo -->
<!-- content table -->
$spacer_open

$_phpinclude_output
Updated the code above and just change the gif/jpg name you are using...
Reply With Quote
  #2  
Old 01-26-2007, 03:20 PM
Princeton's Avatar
Princeton Princeton is offline
 
Join Date: Nov 2001
Location: Vineland, NJ
Posts: 6,693
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Helpful tut ... many people will find this useful :up:

Great job!
Reply With Quote
  #3  
Old 05-23-2007, 12:11 AM
AzzidReign's Avatar
AzzidReign AzzidReign is offline
 
Join Date: Apr 2006
Posts: 497
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Very nice tutorial, GJ
Reply With Quote
  #4  
Old 05-25-2007, 03:40 PM
Charged Charged is offline
 
Join Date: Jun 2005
Posts: 23
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
I just did this on my site, though I've used css rather than a table for those who would rather here is how I did it. Save images the same as explained above then in the header put

Code:
<div style="width:100%; background-image:url($stylevar[imgdir_misc]/headbg.gif); background-repeat:repeat-x;">
<div style="float:left;"><img src="$stylevar[imgdir_misc]/head_left.jpg"  border="0" alt=""/></div>
<div style="float:left; position:absolute; right:0px;"><img src="$stylevar[imgdir_misc]/head_right.jpg" alt="" /></div>
</div>
Reply With Quote
  #5  
Old 06-10-2007, 03:19 PM
Ohiosweetheart Ohiosweetheart is offline
 
Join Date: Dec 2005
Location: N.E. Ohio
Posts: 2,291
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Thank you z - I've been using this tut of yours for some time - very helpful!
Reply With Quote
  #6  
Old 10-14-2007, 09:28 AM
edgecutioner edgecutioner is offline
 
Join Date: Jul 2007
Location: Qatar
Posts: 120
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
thanks for the tip man. this will add up to my skin designing skills

[edit]After trials and errors for 1/2 hour, I found something that will not work if you want your skin to be fluid. see the code below:

PHP Code:
<!-- logo -->
<a name="top"></a>
<center>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center" style="background-image:url($stylevar[imgdir_misc]/headbg.gif)">
<tr>

<td align="left" valign="top"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/head_left.gif"  border="0" alt=""/></a></td>
<td align="right" valign="bottom"><img src="$stylevar[imgdir_misc]/head_right.gif" alt="" /></td>
</tr>
</table>
</center>

<!-- /logo -->
<!-- content table -->
$spacer_open

$_phpinclude_output 
The original value in the highlighted is "100%" which will go to fit your skin which is wrong . I replaced it with $stylevar[outertablewidth] for it to be dependent on the outer table width size on StyleVars
Reply With Quote
  #7  
Old 10-20-2007, 11:55 AM
SLY LS1's Avatar
SLY LS1 SLY LS1 is offline
 
Join Date: May 2007
Location: Melbourne Australia
Posts: 123
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by edgecutioner View Post
thanks for the tip man. this will add up to my skin designing skills

[edit]After trials and errors for 1/2 hour, I found something that will not work if you want your skin to be fluid. see the code below:

PHP Code:
<!-- logo -->
<a name="top"></a>
<center>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center" style="background-image:url($stylevar[imgdir_misc]/headbg.gif)">
<tr>

<td align="left" valign="top"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/head_left.gif"  border="0" alt=""/></a></td>
<td align="right" valign="bottom"><img src="$stylevar[imgdir_misc]/head_right.gif" alt="" /></td>
</tr>
</table>
</center>

<!-- /logo -->
<!-- content table -->
$spacer_open

$_phpinclude_output 
The original value in the highlighted is "100%" which will go to fit your skin which is wrong . I replaced it with $stylevar[outertablewidth] for it to be dependent on the outer table width size on StyleVars
Worked perfect

Cheers
Reply With Quote
  #8  
Old 12-23-2007, 05:46 PM
KWonline KWonline is offline
 
Join Date: Aug 2006
Location: Kent, UK
Posts: 4
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
I am trying to add a header which has curved edges to my forum using this technique. However, my middle background bit is repeating under the invisable pixels of left and right header images. I'm stumped as to how to stop that happening?

(great tut by the way! )
Reply With Quote
  #9  
Old 12-31-2007, 04:22 AM
Webmist's Avatar
Webmist Webmist is offline
 
Join Date: Jan 2006
Location: Virtual Reality
Posts: 30
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by KWonline View Post
I am trying to add a header which has curved edges to my forum using this technique. However, my middle background bit is repeating under the invisable pixels of left and right header images. I'm stumped as to how to stop that happening?

(great tut by the way! )
An alternate way is to add a center table cell to expand with as follows:
Code:
<!-- logo --> 
<a name="top"></a> 
<center> 
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center"> 
<tr> 

<td align="right" valign="top"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/head_left.gif"  border="0" alt=""/></a></td> 
<td align="center" valign="top" style="background-image:url($stylevar[imgdir_misc]/headbg.gif)">
<td align="left" valign="top"><img src="$stylevar[imgdir_misc]/head_right.gif" alt="" /></td> 
</tr> 
</table> 
</center> 

<!-- /logo --> 
<!-- content table --> 
$spacer_open 

$_phpinclude_output
Of course to adjust the header you may have to specify the width of the left and right table cell. Remember this is a complete table in the header template.
Reply With Quote
  #10  
Old 01-28-2008, 04:51 PM
ndut ndut is offline
 
Join Date: Sep 2007
Location: Indonesia
Posts: 335
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
very nice..
Reply With Quote
Reply
Page 1 of 4 1 23 Last »

« 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 03:16 AM.

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.04756 seconds
  • Memory Usage 2,333KB
  • 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
  • (3)bbcode_code
  • (2)bbcode_php
  • (2)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
  • (2)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
  • (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
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete