How to change header to use 3 images?

[Gleedo]

Hello

I am trying to change the header of future black to have 3 parts, but I am struggling with what changes to make.

Firstly I have created a new skin using FutureBlack as the parent and have called it TOGABlackFluid.

I have changed the header-back.png for the one I will be using and that tiles across the top ok.

I have also uploaded my left side and right side images for the rest of the header, but I have no idea how to find the 'bluepearl-design-logo.png' in the style vars and change it to my left.png image for this new style. I can't just replace that logo file because i have fixed width versions of FutureBlack (also child styles) which use that image as the whole header.

I also need to work out how to add style info for the right.png and get that in the header.

Here is my forum at the moment with the fluid skin im working on:
http://www.theoldgitsarmy.com/forums...php?styleid=15

Here are the 3 graphics I am trying to use for the header:
left.png


header-back.png


right.png

[Gleedo]

Have made some progess by getting the left.png to appear after reading this post :)

Just need to work out how to get the right.png to appear on right of header....

Any help on that very much appreciated :)

[Sean]

Sorry for the late response. To change the logo you change the stylevar 'titleimage'

Now for a 3 part header the best way would be to change the header code to something similar to this.

<div id="header">
 <div id="headleft"></div>
 <div id="headright"></div>
</div>

And the CSS:

#header {
width: 100%;
}

#headleft {
float: left;
}

#headright {
float: right;
}

You can then modify the CSS to add background images

[Gleedo]

Thanks for reply. I dont really understand where to put such code but I have almost managed what I intended, but when you shrink the browser width down, the right image then moves below the rest of the header....

http://www.theoldgitsarmy.com/forums...php?styleid=15

Here is my code from header in edittemplates - headright div is the bit i added:

<div id="header" class="floatcontainer doc_header">
    <div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>
<div class="headright" style="float: right"><img src="http://www.theoldgitsarmy.com/forums/images/FutureBlack/fluid/right.png" /></div>

Any thoughts?

[Sean]

In stylevars what is this currently set to?

doc_minwidth

[Gleedo]

In stylevars what is this currently set to?

doc_minwidth

Aha!! Thank you. Was 650 but have now upped it and it works fine.

Thanks Sean :)

[Sean]

Was hoping that would do the trick ;)