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

How would I work my logo into xenforo?

DaveL

Well-known member
#1
Currently running one of my sites on IPB3.1 and looking to make the change over to Xenforo.

One major question - How easy would it be to work my logo into Xenforo?

This is what I currently have on IPB

dl.png
 

bambua

Well-known member
#2
Currently running one of my sites on IPB3.1 and looking to make the change over to Xenforo.

One major question - How easy would it be to work my logo into Xenforo?

This is what I currently have on IPB

View attachment 19197
Very easy, change where the logo points to in the style properties and adjust the height in the admin control panel and it's in there.
 

Jake Bunce

XenForo moderator
Staff member
#3
For a big image like that you might consider using it as a background:

Admin CP -> Appearance -> Style Properties -> Header and Navigation -> Header -> Background

And yes, you need to adjust the header height appropriately:

Admin CP -> Appearance -> Style Properties -> Header and Navigation -> Height of Header Logo
 

DaveL

Well-known member
#4
Thanks Jake. I seem to be getting there! Is there any setting I can change so the header background width is 100%? Ive found a setting to change the height, just not the width.
 

Jake Bunce

XenForo moderator
Staff member
#5
Background images don't scale like that.

With a background like this in a space without fixed dimensions I would set repeat and position, like so:

Screen shot 2011-09-28 at 12.17.22 PM.png

That will center it to the top middle, no repeat.
 

DaveL

Well-known member
#6
Hi Jake,

Thanks for your reply. Ive tried that suggestion but it just dosent look right.
header.png

Im guessing theres just no easy way of getting my banner to be 100% width. That really is a shame as wanted to migrate from IPB.

Thanks for your help, really been appreciated. (y)
 

bambua

Well-known member
#7
You could pretty easily do that specifically with a template edit on the header and put an image in there rather than having it be the background of a css element. I know background-size: 100% is in CSS3 but the support on that isn't widespread yet.

Hi Jake,

Thanks for your reply. Ive tried that suggestion but it just dosent look right.
View attachment 19253

Im guessing theres just no easy way of getting my banner to be 100% width. That really is a shame as wanted to migrate from IPB.

Thanks for your help, really been appreciated. (y)
 

DaveL

Well-known member
#8
Hi, Thanks for your reply.
Ive set it as the logo, What would I need to add to the logo css to make it have a width of 100%?

On prior software ive normally just put the image link in the header template with the image dimensions.

#logo
{
display: block;
float: left;
line-height: {xen:calc '@headerLogoHeight - 4'}px;
*line-height: @headerLogoHeight;
height: @headerLogoHeight;
vertical-align: middle;
}

/* IE6/7 vertical align fix */
#logo span
{
*display: inline-block;
*height: 100%;
}

#logo a:hover
{
text-decoration: none;
}

#logo img
{
vertical-align: middle;
}
 

Jake Bunce

XenForo moderator
Staff member
#9
The forum width needs to match the width of the image. That is controlled by this style property:

Admin CP -> Appearance -> Style Properties -> General -> Page Width Controller

To specify a fixed width you can use this in the Miscellaneous box:

Code:
width: 780px;
margin: auto;
 

bambua

Well-known member
#10
The forum width needs to match the width of the image. That is controlled by this style property:

Admin CP -> Appearance -> Style Properties -> General -> Page Width Controller

To specify a fixed width you can use this in the Miscellaneous box:

Code:
width: 780px;
margin: auto;
This is the solution I used on my forum to fix this problem.
 

DaveL

Well-known member
#11
Hi Jake,

Im happy with the default width of the forum, just want my logo to fill the entire top area. like ive currently got on IPB.
 

DaveL

Well-known member
#12
Sorry guys,

I really dont follow what your saying. The only way to get my image to fill the top area is to make my actual forum smaller to it matches the image size? If thats the case, seems t bit backwards to me (n)
 

bambua

Well-known member
#13
Sorry guys,

I really dont follow what your saying. The only way to get my image to fill the top area is to make my actual forum smaller to it matches the image size? If thats the case, seems t bit backwards to me (n)
I went the width route because I liked the width of my forum. You can always do a template edit find where it puts the image in and set the width to 100% just like it is on your current theme.
 

Brogan

XenForo moderator
Staff member
#14
Just increase the width of the image to match the site page width.

It's going to have to be stretched one way or another as it is physically smaller than the width you want it to fill.
 

DaveL

Well-known member
#15
Thanks bambua,

Ive looked in the header template, but cant see where the codes is for the actual logo.

<xen:hook name="header">
<div id="header">
<xen:include template="logo_block" />
<xen:include template="navigation" />
<xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>
</div>
</xen:hook>
Im guessing it must be in the css, but not sure what css to add to make the width 100%
 

DaveL

Well-known member
#16
Just increase the width of the image to match the site page width.

It's going to have to be stretched one way or another as it is physically smaller than the width you want it to fill.
I prefer using the wifth 100% so it stretchs along with the browser when re-sized.
 

bambua

Well-known member
#18
Thanks bambua,

Ive looked in the header template, but cant see where the codes is for the actual logo.

Im guessing it must be in the css, but not sure what css to add to make the width 100%
Should be the logo_block template, it's included by the header.
 

DaveL

Well-known member
#19
Hi Brogan,

Tried that first of all after Jake Bunce suggested it, however you cant alter the width of the header background.
 

DaveL

Well-known member
#20
Thanks bambua,

Really seem to be getting somewhere now! I added 100% height/width to that template and its made a vast improvement :)

2.png

One last thing, is there anyway to get the image so it covers the green on the left and right hand sides?