How can I make a three part forum header?

[K4GAP]

I've noticed on some of the nicer styles the designer has implemented forumheaders that consist of three images made up as a "right side", "center" and "left side".

Anyone have information they would like to share about how to do this?

The attachment shows just a regular single image forum header, I want a 3 piece.

[Chivster]

Are you sure its not designed as one image, but differently in Photoshop, etc?

[Disco_Dave]

Can you show us an example?

[Lynne]

You put an image aligned left and aligned right and then the center image can just be a background image x-repeated.

[K4GAP]

You put an image aligned left and aligned right and then the center image can just be a background image x-repeated.

That's exactly what I have in mind :up: . What I need is the code to accomplish that.

[Disco_Dave]

This is our code we use for a small logo on the left, may be this can help get you started:

/*NIRC FORUM HEAD CSS EDITS*/

.forumbit_nopost .forumhead .forumtitle a {
margin-left: 28px;
}

.forumhead .forumtitle, .forumbits .forumhead h2 { background:url(images/evid_blue/elements/forumhead.png) no-repeat top left; }

.forumhead h2.forumtitle, .forumbits .forumhead h2 span.forumtitle { text-indent:30px; }

.forumbits .forumhead h2 span { background-image:none; }

.forumbit_nopost .forumhead span, .forumbits .forumhead h2 { padding:10px 0px 8px 0px; }

.forumbit_nopost .forumhead .collapse { padding:10px 0px 8px 0px; }

.forumbit_post .forumhead h2 span { padding:10px 0px 8px 0px; }

.forumbit_nopost .forumhead .forumtitle { padding:10px 0px 8px 0px; }

.forumbit_nopost .forumhead a.collapse img { top:-2px; right:4.4px; }

.blockhead img { padding-top:2px; padding-right:5px; }

/*NIRC FORUM HEAD CSS EDITS*/

But I'm not 100% sure if this is what you are looking.

[K4GAP]

This is our code we use for a small logo on the left, may be this can help get you started:

/*NIRC FORUM HEAD CSS EDITS*/

.forumbit_nopost .forumhead .forumtitle a {
margin-left: 28px;
}

.forumhead .forumtitle, .forumbits .forumhead h2 { background:url(images/evid_blue/elements/forumhead.png) no-repeat top left; }

.forumhead h2.forumtitle, .forumbits .forumhead h2 span.forumtitle { text-indent:30px; }

.forumbits .forumhead h2 span { background-image:none; }

.forumbit_nopost .forumhead span, .forumbits .forumhead h2 { padding:10px 0px 8px 0px; }

.forumbit_nopost .forumhead .collapse { padding:10px 0px 8px 0px; }

.forumbit_post .forumhead h2 span { padding:10px 0px 8px 0px; }

.forumbit_nopost .forumhead .forumtitle { padding:10px 0px 8px 0px; }

.forumbit_nopost .forumhead a.collapse img { top:-2px; right:4.4px; }

.blockhead img { padding-top:2px; padding-right:5px; }

/*NIRC FORUM HEAD CSS EDITS*/But I'm not 100% sure if this is what you are looking.

It doesn't appear to be because the code I see in your's looks like it's controlling the forumhead not the header?

[Disco_Dave]

Your pic above ^ shows the forumhead, not the header, that's why I asked to see an example ;)

[K4GAP]

Your pic above ^ shows the forumhead, not the header, that's why I asked to see a example ;)

It sure does .... sorry about that.
Either or both would be sufficient as I'm attempting to create a style that requires both.

Thanks for pointing that out to me.

[Lynne]

If you post a link to an example, then we can just get the CSS/code used right from that.

[K4GAP]

Here is a good example (http://www.sultantheme.com/vb4forum/forum.php?styleid=12) of a header with three pieces.

[Disco_Dave]

there it is :)

I just done what Lynne as suggested, above.


.headerL{
float:left;
width:146px;
background-image: url(images/artakusia/artakusia_headerL.png);
background-repeat: no-repeat;
height: 173px;


}

.headerR{
float:right;
width:146px;
background-image: url(images/artakusia/artakusia_headerR.png);
background-repeat: no-repeat;
height: 173px;


}

.headerC{
margin-left:146px;
margin-right:146px;
height: 173px;
background-image: url(images/artakusia/artakusia_logo.png);
background-repeat: no-repeat;
background-position: center top;
}


.navwrap {
background-image: url(images/artakusia/artakusia_navbg.png);
height: 54px;

}




.navL{
float:left;
width:92px;
background-image: url(images/artakusia/artakusia_navL.png);
background-repeat: repeat-y;
height: 54px;



}

.navR{
float:right;
width:92px;
background-image: url(images/artakusia/artakusia_navR.png);
background-repeat: repeat-y;
height: 54px;


}

.navC{
margin-left:92px;
margin-right:92px;
height: 54px;

}


/* CONTENT - cara ni je expand vertical div dgn background,lansung takde float */


.contentL {
width:100%;
background-image: url(images/artakusia/artakusia_left.png);
background-repeat: repeat-y;



}

.contentR {
padding-top: 0;
padding-right:8px;
padding-bottom: 0;
padding-left:8px;
background-position: right;
background-image: url(images/artakusia/artakusia_right.png);
background-repeat: repeat-y;

}

.contentC {
width:100%;
background-image: url(images/artakusia/artakusia_cbg.png);
background-repeat: repeat;
}







.bottomwrap {
overflow:hidden;
background-image: url(images/artakusia/artakusia_footbg.png);
background-repeat: repeat-x;


}



.bottomL{
float:left;
width:92px;
background-image: url(images/artakusia/artakusia_footL.png);
background-repeat: repeat-y;
height: 93px;


}

.bottomR{
float:right;
width:92px;
background-image: url(images/artakusia/artakusia_footR.png);
background-repeat: no-repeat;
height: 93px;


}

.bottomC{
margin-left:92px;
margin-right:92px;
height: 93px;

}

[K4GAP]

there it is :)

I just done what Lynne as suggested, above.

**

And this goes into additional ?

[Lynne]

The CSS posted isn't going to help unless you also modify your template.

Have you tried googling "3 part header CSS"? There are a lot of articles that come up. Even better:

"3 part header CSS" site:vbulletin.com

[K4GAP]

The CSS posted isn't going to help unless you also modify your template.

Have you tried googling "3 part header CSS"? There are a lot of articles that come up. Even better:

"3 part header CSS" site:vbulletin.com

No, but I will.
Thanks Lynne

[Lynne]

Whoops....

"3 part header CSS" site:vbulletin.org

(changed to .org)

[Max Taxable]

Another example (http://usmessageboards.com) of a 3 image fluid header.

[K4GAP]

Whoops....

"3 part header CSS" site:vbulletin.org

(changed to .org)

Thanks Lynne, I ended up going with some old code that was originally posted in '09

https://vborg.vbsupport.ru/showthread.php?p=1927493

--------------- Added 16 Aug 2013 at 13:24 ---------------

Another example (http://usmessageboards.com) of a 3 image fluid header.

Thanks Max. I've found some useable code.

--------------- Added 17 Aug 2013 at 00:45 ---------------

The following is what I did to have a left and a right image with a background to blend the two.

First I looked for this code in the header template:
<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>Replace that code with this:
<div id="headerfill"><div id="headerl"></div><div id="headerr"></div></div>Add the following to the styles additional css area:
#headerfill{
background-image: url(images/headerfill.png);
background-repeat: repeat-x;
height: 150px;
width: 100%;
margin-right: auto;
margin-left: auto;
}
#headerl{
background-image: url(images/headerl.png);
height: 150px;
background-repeat: no-repeat;
width: 400px;
float: left;
}
#headerr{
background-image: url(images/headerr.png);
background-repeat: no-repeat;
height: 150px;
width: 400px;
float: right;
}

Works for me and I'm running vb 4.2.1

Thank you once again Lynne for pointing me in the right direction.