title image resolution

[biagrin]

i cant find the answer to this anywhere so i apologise if ive been a bit blind.

how do i set a title image to be the same width as the board in all types of screen resolutions. at the moment its okay in 1074x968 but not in 800x600.

[Jake Bunce]

Images are a fixed width. If you want a title bar that expands and contracts with the size of the window, then you need to use something like this:

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
	<td width="200">
		<img src="[color=red]path/to/leftpiece.gif[/color]" alt="" border="0" />
	</td>
	<td background="[color=red]path/to/righttile.gif[/color]">
		&nbsp;
	</td>
</tr>
</table>

Where the title image is such that leftpiece.gif is the left piece of the image, and righttile.gif is a "tilable" piece that tiles to fill the rest of the space on the right.

[gsd103]

How could you make the left tile clickable (url Home). And can you put the right tile so that it expands the length of the forum, then put the clickable logo on top of it? And where do I paste the code in? Here is my old code a friend made for my old forum:

<!--IBF.BANNER-->
<div id='logostrip' align='left'>
<a href='http://socaledit.com/forum/index.php?amp;' title='Board Home'> <img src='style_images/Bluesky_-755/logo4.gif' alt='Powered by Invision Power Board' border="0" /></a>
</div>
<table width="100%" cellspacing="0" id="submenu">
<tr>
<td align='right'><a href='http://socaledit.com/forum'><img src="style_images/Bluesky_-755/atb_home.gif" border="0" alt="" /></a>
<!--IBF.RULES-->

This code worked for the header and logo, but seems complex.

In my new VB3 forum the header is 1280 pix which does not align properly with the forum. Is there a way to make it always align properly with all resolutions. Or do I simply resize the pic to the forums pixel size?

Thanks, Dom

[gsd103]

http://socalsoccer.com/vbtest/index.php3? what I have now. The header is to big. see my existing IPB forum that I am trying to duplicate www.socalsoccer.com

[Jake Bunce]

To make it clickable, add the link tags. To set a width, change the width parameter:

<table width="[color=green]100%[/color]" cellspacing="0" cellpadding="0" border="0">
<tr>
	<td width="200">
		[color=blue]<a href="LINK HERE">[/color]<img src="[color=red]path/to/leftpiece.gif[/color]" alt="" border="0" />[color=blue]</a>[/color]
	</td>
	<td background="[color=red]path/to/righttile.gif[/color]">
	</td>
</tr>
</table>

[gsd103]

Sorry for the stupid question, but where do I paste this code to? I know DUH

[gsd103]

Sorry for the stupid question, but where do I paste this code to? I know DUH

Or what area or name is this file located in?

[gsd103]

To make it clickable, add the link tags. To set a width, change the width parameter:

<table width="[COLOR=green]100%[/COLOR]" cellspacing="0" cellpadding="0" border="0">
<tr>
	<td width="200">
		[COLOR=blue]<a href="LINK HERE">[/COLOR]<img src="[COLOR=red]path/to/leftpiece.gif[/COLOR]" alt="" border="0" />[COLOR=blue]</a>[/COLOR]
	</td>
	<td background="[COLOR=red]path/to/righttile.gif[/COLOR]">
	</td>
</tr>
</table>

I pasted this exact code in the header code area, and I get a red x. Does the path need to have the www. in order for it to work? And I deleted all the other code inside the header area, was I supposed to?

[gsd103]

okay I got the left tile to show up and it is linked. The right one will not show. Is something missing in this code for the right side not to show up. Or is it the right side of my brain that is not linked

[Jake Bunce]

You need to use a full URL or web path for the image locations. For example:

http://www.yoursite.com/images/background.gif

or

/images/background.gif

[gsd103]

See how the grass in my banner is misaligned. http://socalsoccer.com/vbtest/index.php3? and in this one it is not socalsoccer.com How do I get the two gifs that make up the header to mesh correctly?

THanks Dom

[Jake Bunce]

That has to do with slicing the image correctly. You need a graphics editing program and pixel measurements.

[G3MM4]

Hi,

I've tried the code that is posted in thei thread so my header image would expand, but it doesn't seem to work right.

Here's what I have:

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
    <td width="555">
        <a href="http://www.shimmeringmysteries.com"><img src="styles/purple_shimmer/images/misc/background_left.jpg" alt="" border="0" /></a>
    </td>
    <td background="styles/purple_shimmer/images/misc/header_expanded.jpg">
    </td>
<td width="225">
        <img src="styles/purple_shimmer/images/misc/background_right.jpg" alt="" border="0" />
    </td>
</tr>
</table>

<!-- content table -->
$spacer_open

$_phpinclude_output

Should I leave

<!-- content table -->
 $spacer_open
 
 $_phpinclude_output

in or out?

At the moment, my forum width is at 100%, the left side of the header is aligned correctly, but the middle tiling part is missing, even though the path is correct (all my styles are in a folder called styles... i.e. the purple_shimmer style path would be styles/purple_shimmer/images/) and the right side is not aligned correctly.

However, if I set my forum width to 90% then no part of the header is aligned correctly.

My header image is the sort that needs a left part, middle part and a right part.

So any help would be appreciated.

Please see attachment to see how my header is with forum width set at 100%. (Lol, the graphics looks bad now because I had to resize it so I could upload it to here... at the proper size they look good. )

[G3MM4]

Okay, I've managed to get this working but not in the same way as Jake did it. So I'll post my (idiot's guide) method for anyone who might find it helpful.

Firstly, I went into Drreamweaver and sorted out a bit of CSS code as follows: (this is for my website, you might have to fiddle around with it to get it to fit your website)

.logobg {
     background-color: #46005A;
     background-image: url(styles/purple_shimmer/images/misc/header_expanded.jpg);
     background-repeat: repeat-x;
     background-position: left top;
 }

and stuck that in the Additional CSS Definitions area (Styles & Templates > Style Manager > Your Style > All Style Options > Additional CSS Definitions), I used the 2nd box.

I fiddled around with Jake's code to make it all work. Replace the paths and sizes to suit your website. Here's what I have (I also set my forum width to 90% as I originally wanted it):

<!-- expandable header image -->
<table class="logobg" width="90%" cellspacing="0" cellpadding="0" border="0" align="center">
  <tr>
    <td width="555">
      <a href="http://www.shimmeringmysteries.com"><img src="styles/purple_shimmer/images/misc/background_left.jpg" alt="" border="0" /></a></td>
    <td width="225" align="right">
      <img src="styles/purple_shimmer/images/misc/background_right.jpg" alt="" border="0" /></td>
  </tr>
</table>

<!-- content table -->
$spacer_open

$_phpinclude_output

This code goes in the Header template.

You need to make sure that the width of the table matches the value you entered for your forum width. I.e. I set my forum width at 90% so I set the table width to 90%.

I hope that helps someone out there.

Thanks for the original code Jake.