XF 1.3 Fluid custom logo in 3 parts

[Sunka]

Hi,
need help to setup my logo.
It contains 3 parts. Left and right parts of logo are fixed, and middle is streching (it depence of user width).
In vBulletin I have to put this in Aditional CSS:

#headerFill{
background-image: url(images/misc/middle.jpg);
background-repeat: repeat-x;
height: 140px;
width: 100%;
margin-right: auto;
margin-left: auto;
}
#headerL{
background-image: url(images/misc/left.png);
height: 140px;
background-repeat: no-repeat;
width: 185px;
float: left;

}
#headerR {
background-image: url(images/misc/right.png);
background-repeat: no-repeat;
height: 140px;
width: 715px;
float: right;

}

And in HEADER template, i have to put this:

<!-- logo -->
    <div id="headerFill"><div id="headerL"></div><div id="headerR"></div></div>
<!-- /logo -->

Can anybody help me to reproduce same on my XenForo forum?

Thank you

 

[Paul B]

You should be able to achieve a similar thing in XenForo using EXTRA.css.

See here for example CSS: http://xenforo.com/community/threads/category-image.69129/#post-723785

 

[Sunka]

I have tried, but have not results at all.
Tried to put in EXTRA.css, and then tried to costumize div for logo block.

Coul anybody help me, please

 

[Russ]

Can you post a picture of what your trying to achieve(or url)? There could be a different method.

 

[Sunka]

Those three pictures make fluid banner, right and left are fixed with, and middle one is streching depended wide of screen.
Here is complete banner picture

 

[Russ]

So just a thought use the left image as the normal logo, set the large image as the background of #logoBlock .pagewidth, then add a div In ad_header floating right using the right image as the background.

On my phone but it may work easier for you, and would work a little better responsively assuming you hide the right at smaller resolutions.

 

[Sunka]

Still no results, or simple I can not and not know how to do it.

It should be some simple way to code it like I did in vBulletin template (see code in first post)

 

[Russ]

A link would help, but I don't think you'll need all those edits.

 

[Sunka]

This is my forum, still on vBulletin - www.pijanitvor.com

Look at banner on thop. It contains 3 pictures. Left is fixed with transparent background, middle is streching all the way, and right picture is fixed too.

Point is that middle picture is streching/repeat x all the way (100% width), and left and right pictures are fixed and because they have transparent background on some parts, they are filled up with middle picture there.

 

[Sunka]

Finnaly I did it

 

[Sunka]

If anyone want to know how i did it, here it is.

You must have 3 part of banner (left, right, middle).
Left and right will be fixed on sides and both .png, and middle will be with 100% width and .jpg.

1. In template ad_header put:

<xen:comment> My logo (right part) </xen:comment>
<div id="rightpart"></div>
<xen:comment> /My logo (right part) </xen:comment>

2. In Style Properties: Header and Navigation pod Header Logo Image Path put:

styles/default/xenforo/my logo/left.png

In Height of Header Logo put (xxx= hight of banner image):

XXXpx



3. In EXTRA.css put:

/* My logo */

#logoBlock {
background-image: url(styles/default/xenforo/my_logo/middle.jpg);
background-repeat: repeat-x;
height: XXXpx;
width: 100%;
margin-right: auto;
margin-left: auto;
}

#rightlogo {
background-image: url(styles/default/xenforo/my_logo/right.png);
background-repeat: no-repeat;
height: 140px;
width: 715px;
float: right;
}

/* END My logo */


4. Put images in new folder (my_logo) => ../styles/default/xenforo/my_logo/