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

Ad_header, how to position banner?

#1
Hi all, I hijacked a thread in the pre-sales section with this question but figured it is better suited here.

I have placed a banner in the Ad_header template, and thanks to Brogans help have applied a float:right to get it to sit within the header rather than above it, however I now need to get it to sit within the middle of the header space as well, rather than being stuck at the top of the header, as per the attached image.

Screen shot 2012-01-20 at 12.59.48.png

So basically, I want it half way between the ACP link and the Log Out link below.

Any help appreciated!
 

Brogan

XenForo moderator
Staff member
#2
Try wrapping it in another div and using a fixed height and vertical-align: middle, or use padding, top, etc.

There are lots of ways this can be achieved.
 
#3
Thanks Brogan, I've tried
HTML:
<div style= vertical-align:middle>
but it doesn't seem to do anything. I have absolutely no doubt there are many ways to achieve this with padding etc but as I'm still learning, knowing I can use padding and knowing how to code padding (for example) are two very different things :D
 

Brogan

XenForo moderator
Staff member
#4
Try this:

Code:
<xen:hook name="ad_header" />
<div style="display: block; float: right; line-height: {xen:calc '@headerLogoHeight - 4'}px; *line-height: @headerLogoHeight; height: @headerLogoHeight; vertical-align: middle">
<img style="vertical-align: middle" src="../path/to/image.png" />
</div>
 
#6
I just came across this and it is almost exactly what I need. Thank you for providing the information.

The only thing I need now is to figure out how to ad some extra height for the image.

I have included a screenshot to better explain.



Any help is greatly appreciated.
 

Breixo

Active member
#10
Try this:

Code:
<xen:hook name="ad_header" />
<div style="display: block; float: right; line-height: {xen:calc '@headerLogoHeight - 4'}px; *line-height: @headerLogoHeight; height: @headerLogoHeight; vertical-align: middle">
<img style="vertical-align: middle" src="../path/to/image.png" />
</div>
Thanks! that worked for me. This should be included as ad_header style ;)
 

51463

Well-known member
#11
How can i wrap it into a JuicyAds Ad? I'm not sure where exactly to put it.

<xen:hook name="ad_header" />
<div style="display: block; float: right; line-height: {xen:calc '@headerLogoHeight - 4'}px; *line-height: @headerLogoHeight; height: @headerLogoHeight; vertical-align: middle">
<img style="vertical-align: middle" src="../path/to/image.png" />
</div>


into
<!--JuicyAds v2.0-->
<iframe border=0 frameborder=0 marginheight=0 marginwidth=0 width=476 height=68 scrolling=no allowtransparency=true src=http://adserver.juicyads.com/adshow.php?adzone=123456789></iframe>
<!--JuicyAds END-->
 
Last edited:
#12
This has been a HUGE help! Thank you!

What is the header color titled (see yellow arrow)? I have tried to change the color in the color palette and I can't find it. I have changed almost everyone....

Thank you!!
help.jpg
 
Last edited:
#13
Try this:

Code:
<xen:hook name="ad_header" />
<div style="display: block; float: right; line-height: {xen:calc '@headerLogoHeight - 4'}px; *line-height: @headerLogoHeight; height: @headerLogoHeight; vertical-align: middle">
<img style="vertical-align: middle" src="../path/to/image.png" />
</div>
I tried this and I got the result I was after EXCEPT when viewed on mobile devices it looks terrible. The main logo is pushed down over the forum and the ad I put in does not shrink so overruns the screen. Anyway to fix this thanks.
 

upnet

Active member
#14
I tried this and I got the result I was after EXCEPT when viewed on mobile devices it looks terrible. The main logo is pushed down over the forum and the ad I put in does not shrink so overruns the screen. Anyway to fix this thanks.
Same thing for me. I think it needs a conditional perhaps that changes the style based on javascript users screen width. I'm not sure how to do it either though.

I've attached two screenshots, One is the desktop version looking good. Second is mobile overlap that xeanyngoat describes.
 

Attachments

#20
hang on a minute, isn't this a 'stock standard' feature of XF, ie the ability to put an image in an inbuilt add location on the forum without it messing up the responsive nature of the forum? This is not styling or custom work, in my opinion this is a core feature and it is not responsive.