1. 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?

Discussion in 'Styling and Customization Questions' started by Richard Peters, Jan 20, 2012.

  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!
  2. Brogan

    Brogan XenForo Moderator Staff Member

    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
    <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
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Try this:

    <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" />
  5. Perfect, thank you. No way I'd have figured that out!!
  6. AudiNick

    AudiNick Member

    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.
  7. Brogan

    Brogan XenForo Moderator Staff Member

    Change the Height of Header Logo in Style Properties.
  8. AudiNick

    AudiNick Member

    That did the trick.

    Thank you very much Brogan!
  9. DetroitCrow

    DetroitCrow Member

    @Brogan Thanks m8, works great!
  10. Breixo

    Breixo Active Member

    Thanks! that worked for me. This should be included as ad_header style ;)
  11. 51463

    51463 Well-Known Member

    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" />

    <!--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: Oct 12, 2013
  12. SDB33

    SDB33 Member

    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!!
    Last edited: May 31, 2014
  13. xeanyngoat

    xeanyngoat Member

    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.
  14. upnet

    upnet Active Member

    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.

    Attached Files:

  15. xeanyngoat

    xeanyngoat Member

    Hi, any update on this?
  16. xeanyngoat

    xeanyngoat Member

    Hi again, my forum will be going live soon and I am wondering if there is any solution to this issue? Many thanks.
  17. xeanyngoat

    xeanyngoat Member

    Please I would like some assistance with this issue as it essentially makes the ad placement at the top unusable at the moment.
  18. xeanyngoat

    xeanyngoat Member

    3 weeks and no reply about this issue! PLEASE is there any light that can be shed on this?
  19. Brogan

    Brogan XenForo Moderator Staff Member

    You will need to use media queries or a custom .js solution.
  20. xeanyngoat

    xeanyngoat Member

    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.
    RoyalRumble likes this.

Share This Page