How would I work my logo into xenforo?

[DaveL]

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

 

[Jake Bunce]

I prefer using the wifth 100% so it stretchs along with the browser when re-sized.

I would normally say you can't do that. But a Google search reveals some possible solutions involving javascript and CSS:

http://css-tricks.com/766-how-to-resizeable-background-image/

 

[bambua]

Thanks bambua,

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

View attachment 19254

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

Under Style Properties->General->Page Width Controller

Set the margins.

 

[DaveL]

Thanks Jake, although that guide lost me a bit.

All I want to do is have my image stretch across the page. This is my current site > http://www.doverlocals.co.uk/forum/

Its fluid so if you resize the screen, the banner resizes with it.

 

[DaveL]

Under Style Properties->General->Page Width Controller

Set the margins.

Thanks. Ive set the margins to 0.

Looks like thats the best im going to get it.

Thanks for your help, really appreciated.

 

[DaveL]

Last night on a test site it all worked fine! Resize the page big or small and the logo would stretch of get smaller accordingly.

Tonight on a new mock up, im having no such luck. All the settings are the same as last night and ive been through and checked and double checked but no luck. When you stretch the page, the logo wont stretch with it, despite being set at width 100%.

This is the site - Any ideas as im scratching my head here!

 

[DaveL]

Ive had another try this morning and ive kind of got it sorted, but not quite.

I had to move some of the code around in logo_block so it went from

<div id="logoBlock">
<div class="pageWidth">
<div class="pageContent">
<xen:include template="ad_header" />
<xen:hook name="header_logo">
<div id="logo"><a href="{$logoLink}">
<span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
<img src="@headerLogoPath" width='100%' height='100%' alt="{$xenOptions.boardTitle}" />
</a></div>
</xen:hook>
<span class="helper"></span>
</div>
</div>
</div>

to

<div id="logoBlock">
<div class="pageWidth">
<div class="pageContent">
<xen:include template="ad_header" />
<img src="@headerLogoPath" width='100%' height='100%' alt="{$xenOptions.boardTitle}" />
<xen:hook name="header_logo">
<div id="logo"><a href="{$logoLink}">
<span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>

</a></div>
</xen:hook>
<span class="helper"></span>
</div>
</div>
</div>

Doing that made the logo stretch the entire width of the header, but through some of the navbar out and lost the click.

Getting there so slowly! Any pointers greatly appreciated!

 

[DaveL]

Scrap that idea, caused too many issues with the template

Back to square one again! This is what ive got

<div id="logoBlock">
<div class="pageWidth">
<div class="pageContent">
<xen:include template="ad_header" />
<xen:hook name="header_logo">
<div id="logo"><a href="{$logoLink}">
<span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
<img src="@headerLogoPath" width="100%" height="100%" alt="{$xenOptions.boardTitle}" />
</a></div>
</xen:hook>
<span class="helper"></span>
</div>
</div>
</div>

And this is the problem

 

[EQnoble]

ok so you want this? And you want the image to stretch to fit the page width?

 

[DaveL]

Hi EQnoble,

I manged to get the export the theme form the test forum so got it sorted now

 

[EQnoble]

good stuff