How would I work my logo into xenforo?

DaveL

Well-known member
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.webp
 
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
 
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.
 
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.webp

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

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

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)
 
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)
 
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;
}
 
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;
 
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.
 
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)
 
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.
 
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.
 
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%
 
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.
 
Thanks bambua,

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

2.webp

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