The Arcive of Official vBulletin Modifications Site.

Powerofdreams · #12 02-20-2008, 10:35 PM

good article thanks

badseed00 · #13 02-27-2008, 04:07 AM

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

rooban12 · #14 02-27-2008, 05:10 PM

its not working for me

cypher1973 · #15 03-10-2008, 09:34 AM

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

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



$spacer_open

$_phpinclude_output

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

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

carrlos · #16 03-11-2008, 03:16 AM

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

choccyclaire · #17 03-12-2008, 09:28 PM

Quote:

Originally Posted by edgecutioner

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:

K4GAP · #18 04-28-2008, 06:38 PM

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


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

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

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

yaoren · #19 04-30-2008, 07:02 PM

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

Krumbz · #20 08-26-2008, 12:09 AM

excellent tutorial.. now a tutorial on how to add a login box or a search box in the header would be great

tazB.ca · #21 09-17-2008, 03:34 AM

Okay I'm really confused sorry...

When I add that code into my HEADER... I end up losing both the header and the navbar?...

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04729 seconds Memory Usage 2,356KB 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
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!