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 2 of 4 1 2 34
 
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
  #12  
Old 02-20-2008, 10:35 PM
Powerofdreams Powerofdreams is offline
 
Join Date: Jan 2008
Location: Turkey
Posts: 14
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
good article thanks
Reply With Quote
  #13  
Old 02-27-2008, 04:07 AM
badseed00 badseed00 is offline
 
Join Date: Jan 2008
Posts: 7
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Ok, so I tried to follow the basic guidlines of the tutorial and implement them into my complex table. however, I seem to be running into some issues;

1. When I set the expaniding sections to 100%, they take up the entire header adn my main image is gone
2. If I change the % width to somethign like 20%, they expand and contract as they should BUT, when the screen res lessens the two expandable areas only shrink down a little bit and then the main image acts like it has two columns and they begin to shrink.

What did I do wrong?
Here is the code I used;

Code:
<!-- logo -->
<a name="top"></a>
<table border="0" cellpadding="0" cellspacing="0"  $stylevar[outertablewidth] align="center">
	<tr>
		<td rowspan="4" width="50%" height="180" style="background-image: url(http://localhost/forum/images/head/left_fill.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
		<td rowspan="4" width="416" height="180" style="background-image: url(http://localhost/forum/images/head/Banner_02.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
		<td colspan="2" rowspan="3" width="104" height="152" style="background-image: url(http://localhost/forum/images/head/Banner_03.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
		<td colspan="3" width="243" height="13" style="background-image: url(http://localhost/forum/images/head/Banner_04.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
		<td rowspan="4" width="17" height="180" style="background-image: url(http://localhost/forum/images/head/Banner_05.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
		<td rowspan="4" width="50%" height="180" style="background-image: url(http://localhost/forum/images/head/right_fill.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
	</tr>
	<tr>
		<td colspan="2" width="234" height="60" style="background-image: url(http://localhost/forum/images/head/ad.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
		<td width="9" height="60" style="background-image: url(http://localhost/forum/images/head/Banner_08.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
	</tr>
	<tr>	
		<td colspan="3" width="243" height="79" style="background-image: url(http://localhost/forum/images/head/Banner_09.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
	</tr>
	<tr>
		<td width="99" height="28" style="background-image: url(http://localhost/forum/images/head/home.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
		<td colspan="2" width="109" height="28" style="background-image: url(http://localhost/forum/images/head/forum.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
		<td colspan="2" width="139" height="28" style="background-image: url(http://localhost/forum/images/head/links.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
	</tr>
	<tr>
		<td width="8" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
		<td width="416" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
		<td width="99" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
		<td width="5" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
		<td width="104" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
		<td width="130" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
		<td width="9" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
		<td width="17" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
		<td width="12" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
	</tr>
</table>
<!-- /logo -->
Reply With Quote
  #14  
Old 02-27-2008, 05:10 PM
rooban12 rooban12 is offline
 
Join Date: May 2007
Posts: 159
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
its not working for me
Reply With Quote
  #15  
Old 03-10-2008, 09:34 AM
cypher1973 cypher1973 is offline
 
Join Date: May 2007
Posts: 22
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
hey guys ive done this and used this code in my header
Quote:
<table class="tborder" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td align="top">
<!-- 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
<!-- Right Column Code -->
<<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td valign="top">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<!-- End Left Column Code -->

but as you can see i get a little white line ;( http://www.fusion64man.co.uk/index.php?pageid=home

Ive tried to get rid of this but o luck can anyone help.


Thanks andy
Reply With Quote
  #16  
Old 03-11-2008, 03:16 AM
carrlos's Avatar
carrlos carrlos is offline
 
Join Date: Nov 2006
Posts: 259
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Below is my header code. I have a Windows Live Mail sign up banner at the top of my forum under the header image. I want to change the forum from a 900px set width to 100% but I don't know how to recode the Windows Live banner. I already change the Main Table Width in StylesVar to 100%. I put the code that needs fixing in red.

Thanks in advance!
Code:
<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
	<td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><center><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></center></a></td>
	<td align="$stylevar[right]">
		&nbsp;
	</td>
</tr>
</table>
<!-- /logo -->
<div style="position:relative;width:900px;height:60px;background-image:url(http://img443.imageshack.us/img443/8826/openmembership900x60kw2.jpg);overflow:hidden;">
  <div style="height:100%;width:100%;overflow:hidden">
    <table align="left" border="0px" cellpadding="5px" cellspacing="0px" style="table-layout:fixed;word-wrap:break-word;">
      <tr>
        <td width="360px" height="60px" align="center" valign="middle" style="color:#000000;font:16px Arial">Get a free 5GB email account @maximus.ws</td>
      </tr>
    </table>
  </div>
  <div style="position:absolute;border:1px solid #ffffff;width:90px;left:420px;bottom:18px;">
    <div style="border:1px solid #1F59A5;">
      <div style="border:1px solid #ffffff;background-image:url(http://images.domains.live.com/OpenSignupImages/OpenButtonBackground.gif);padding:1px 0px 1px 0px;margin:0px;text-align:center;">
        <a href="https://domains.live.com/members/signup.aspx?domain=maximus.ws" target="_blank" style="font:bold 12px Arial,Helvetica,sans-serif;color:#092076;text-decoration:none;">Sign up</a>
      </div>
    </div>
  </div>
  <div style="position:absolute;border:1px solid #ffffff;width:90px;right:235px;bottom:18px;">
    <div style="border:1px solid #1F59A5;">
      <div style="border:1px solid #ffffff;background-image:url(http://images.domains.live.com/OpenSignupImages/OpenButtonBackground.gif);padding:1px 0px 1px 0px;margin:0px;text-align:center;">
        <a href="http://mail.live.com" target="_blank" style="font:bold 12px Arial,Helvetica,sans-serif;color:#092076;text-decoration:none;">Check e-mail</a>
      </div>
    </div>
  </div>
</div><!-- content table -->
$spacer_open

$_phpinclude_output
Reply With Quote
  #17  
Old 03-12-2008, 09:28 PM
choccyclaire choccyclaire is offline
 
Join Date: Jan 2008
Posts: 235
Благодарил(а): 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
This worked an absolute treat!

Thanks everyone. :up:
Reply With Quote
  #18  
Old 04-28-2008, 06:38 PM
K4GAP K4GAP is offline
 
Join Date: Mar 2008
Posts: 1,255
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
On my site I have a single image I want centered with expanding images on the right and left so that the center image remains in the center. Right now I've just resized the right side image to force the center image to what is the center on my monitor. But, I know different resolutions are going to display it differently. The code below is what I'm using right now...

<!-- begin disturbed header-->
<div align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="border">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<!-- This is where the top logo image goes -->
<td width="100%" height="150" align="left" valign="top"><img src="$stylevar[imgdir_misc]/expand.gif" width="100%" height="150" alt="Part of the TNT Network" /></td>
<!-- End top logo area -->
<td width="600" height="150" align="center" valign="top"><img src="$stylevar[imgdir_misc]/center.jpg" width="600" height="150" alt="The New Testament" /></td>
<td width="100%" height="150" align="right" valign="top" style="background-image: url($stylevar[imgdir_misc]/expand.gif)"><img src="$stylevar[imgdir_misc]/expand.gif" width="275" height="150" alt="=TNT=" /></td>
</tr>
</table>
Reply With Quote
  #19  
Old 04-30-2008, 07:02 PM
yaoren's Avatar
yaoren yaoren is offline
 
Join Date: May 2007
Location: Maryland, USA
Posts: 133
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
One thing I'd like to do and I don't know if this is the place to post this, is add a few tab buttons on the banner for navigation. I've seen it done on other forums and well I have it on the banner but I'll be honest I need to some help in figuring out the coding and laying it out right. As is just now it's only two separate images since I was just trying to get the code on here to work for me.

The other thing is how can I get my banner to be attached to the forum so it all runs together smoothly instead of it separated.

Attachment 79563

Any help is really appreciated
Reply With Quote
  #20  
Old 08-26-2008, 12:09 AM
Krumbz Krumbz is offline
 
Join Date: Feb 2006
Location: Poconos, PA
Posts: 69
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
excellent tutorial.. now a tutorial on how to add a login box or a search box in the header would be great
Reply With Quote
  #21  
Old 09-17-2008, 03:34 AM
tazB.ca's Avatar
tazB.ca tazB.ca is offline
 
Join Date: Sep 2005
Posts: 128
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Okay I'm really confused sorry...

When I add that code into my HEADER... I end up losing both the header and the navbar?...
Reply With Quote
Reply
Page 2 of 4 1 2 34

« 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 02:52 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.06365 seconds
  • Memory Usage 2,364KB
  • Queries Executed 26 (?)
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
  • (1)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
  • (3)pagenav_pagelink
  • (11)post_thanks_box
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (11)postbit_onlinestatus
  • (11)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