Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > Graphics Articles

Reply
 
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
  #32  
Old 07-09-2009, 04:28 PM
willy888 willy888 is offline
 
Join Date: Apr 2006
Posts: 136
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Easy quick and thats what I wanted
Reply With Quote
  #33  
Old 02-06-2010, 08:22 AM
dmk82 dmk82 is offline
 
Join Date: Dec 2009
Posts: 3
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Hey guys, great tutorial thanks! I got this working for the most part on my forum, but I have a couple small issues:

http://gixxerpaddock.com/index.php

1) Why can you only click on the left side of the image and have it take you to the "home link" instead of anywhere on the image? If I click anywhere else in the header, I get cursor placement.

2) How do I get rid of the spacing on both sides that runs from the top to bottom of the page? (dark blue in color, few pixels wide) I'm sure it's some sort of setting like in the "Sizes and Dimensions" area, just can't figure out which one.


I think that's it for now. I used the code supplied in the first post.

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.png"  border="0" alt=""/></a></td>
<td align="right" valign="bottom"><img src="$stylevar[imgdir_misc]/head_right.png" alt="" /></td>
</tr>
</table>
</center>

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

$_phpinclude_output
Reply With Quote
  #34  
Old 02-07-2010, 09:10 AM
dmk82 dmk82 is offline
 
Join Date: Dec 2009
Posts: 3
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Anyone, anyone?
Reply With Quote
  #35  
Old 02-08-2010, 02:44 PM
Sunka Sunka is offline
 
Join Date: Mar 2008
Location: Croatia
Posts: 400
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by dmk82 View Post
Why can you only click on the left side of the image and have it take you to the "home link" instead of anywhere on the image? If I click anywhere else in the header, I get cursor placement.
That is interesting me too.
I've tried to add "<a href=....." to spacer and right image too, but come not good!
Any solution to all 3 pieces of logo be clickable?
Reply With Quote
  #36  
Old 02-15-2010, 04:37 AM
dmk82 dmk82 is offline
 
Join Date: Dec 2009
Posts: 3
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

bump
Reply With Quote
  #37  
Old 11-15-2011, 10:55 PM
yotsume's Avatar
yotsume yotsume is offline
 
Join Date: Dec 2006
Posts: 844
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Cyb - Flash-Image Banner Rotator
Can anyone help me place CYB Flash Image Banner in this header code so the banners will show on top of the right side image. I have asked the developer of that mod for help as well here:

https://vborg.vbsupport.ru/showpost....&postcount=197

PROBLEM: No matter where I place the code for that mod in this header code the banners do not align correctly on top of the right side image as they should.

Anyone know how to get this header code to work with this mod?
Reply With Quote
  #38  
Old 12-01-2011, 10:09 PM
Angle4cor Angle4cor is offline
 
Join Date: Sep 2011
Posts: 29
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Is it working also with vBulletin 4.1.x?
Reply With Quote
  #39  
Old 01-22-2012, 12:38 PM
TheSupportForum TheSupportForum is offline
 
Join Date: Jan 2007
Posts: 1,158
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Angle4cor View Post
Is it working also with vBulletin 4.1.x?
the template code has changed since v3 of vbulletin
the developer need to update his mod

which is now here
https://vborg.vbsupport.ru/showthrea...Banner+Rotator
Reply With Quote
Reply

Thread Tools

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:29 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.04382 seconds
  • Memory Usage 2,294KB
  • 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_code
  • (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
  • (9)post_thanks_box
  • (9)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (9)post_thanks_postbit_info
  • (8)postbit
  • (9)postbit_onlinestatus
  • (9)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