• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.3 Fluid custom logo in 3 parts

Sunka

Well-known member
#1
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:


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

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

Sunka

Well-known member
#3
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
 

Sunka

Well-known member
#5
desna.png

lijeva.png

sredina.jpg


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

aaa.png
 

Russ

Well-known member
#6
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

Well-known member
#7
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)
 

Sunka

Well-known member
#9
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

Well-known member
#11
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/