Announcement

Collapse
No announcement yet.

title image resolution

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • G3MM4
    replied
    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)

    Code:
    .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):

    Code:
    <!-- 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.
    Last edited by G3MM4; Sun 7 Aug '05, 8:26am.

    Leave a comment:


  • G3MM4
    replied
    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:

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

    Code:
    <!-- 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. )
    Attached Files

    Leave a comment:


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

    Leave a comment:


  • gsd103
    replied
    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

    Leave a comment:


  • Jake Bunce
    replied
    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

    Leave a comment:


  • gsd103
    replied
    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

    Leave a comment:


  • gsd103
    replied
    Originally posted by Jake Bunce
    To make it clickable, add the link tags. To set a width, change the width parameter:

    Code:
    <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?

    Leave a comment:


  • gsd103
    replied
    Originally posted by 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?

    Leave a comment:


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

    Leave a comment:


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

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

    Leave a comment:


  • gsd103
    replied
    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

    Leave a comment:


  • gsd103
    replied
    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

    Leave a comment:


  • Jake Bunce
    replied
    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:

    Code:
    <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.
    Last edited by Jake Bunce; Sun 23 Sep '07, 3:54pm.

    Leave a comment:


  • biagrin
    started a topic title image resolution

    title image resolution

    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.
widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
Working...
X