vb.org Archive
Page 1 of 4 1 23 Last »
Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   Graphics Articles (https://vborg.vbsupport.ru/forumdisplay.php?f=221)
-   -   How To Expand Custom Image Header (https://vborg.vbsupport.ru/showthread.php?t=137415)

miner 01-23-2007 10:00 PM
How To Expand Custom Image Header
 
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...

https://vborg.vbsupport.ru/


Then Crop the leftside (your logo part):


https://vborg.vbsupport.ru/


And save it as head_left.gif


https://vborg.vbsupport.ru/




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

https://vborg.vbsupport.ru/

And save as head_right.gif

https://vborg.vbsupport.ru/



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

https://vborg.vbsupport.ru/

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

https://vborg.vbsupport.ru/


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

https://vborg.vbsupport.ru/


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...

Princeton 01-26-2007 03:20 PM
Helpful tut ... many people will find this useful :up:

Great job!

AzzidReign 05-23-2007 12:11 AM
Very nice tutorial, GJ

Charged 05-25-2007 03:40 PM
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>

Ohiosweetheart 06-10-2007 03:19 PM
Thank you z - I've been using this tut of yours for some time - very helpful!

edgecutioner 10-14-2007 09:28 AM
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 :p. I replaced it with $stylevar[outertablewidth] for it to be dependent on the outer table width size on StyleVars

SLY LS1 10-20-2007 11:55 AM
Quote:
Originally Posted by edgecutioner (Post 1359614)
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 :p. I replaced it with $stylevar[outertablewidth] for it to be dependent on the outer table width size on StyleVars
Worked perfect

Cheers

KWonline 12-23-2007 05:46 PM
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! :))

Webmist 12-31-2007 04:22 AM
Quote:
Originally Posted by KWonline (Post 1407713)
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.

ndut 01-28-2008 04:51 PM
very nice..


All times are GMT. The time now is 01:22 PM.
Page 1 of 4 1 23 Last »
Show 40 post(s) from this thread on one page

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.01155 seconds
  • Memory Usage 1,765KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (3)bbcode_code_printable
  • (2)bbcode_php_printable
  • (2)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.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/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.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
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete