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

Align in ad_header

Discussion in 'Styling and Customization Questions' started by lazer, Dec 15, 2012.

  1. lazer

    lazer Well-Known Member

    What's the easiest way to get this banner....


    ...to align correctly, with the right amount of space at the top and bottom?

  2. ShadyX

    ShadyX Well-Known Member

    Either margins or a div with padding. :)
    Jake Bunce likes this.
  3. lazer

    lazer Well-Known Member

    Care to step a coding noob thru that?
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Admin CP -> Appearance -> Templates -> ad_header

    Add this code:

    <div style="float: right; background-color: red; width: 400px; height: 60px; margin-top: 20px; margin-bottom: 40px;">
    Here is the result:

    Screen shot 2012-12-15 at 5.29.35 PM.png

    You can change the dimensions and margins as needed.

    You may need to increase this setting to accommodate more vertical space in the header, otherwise you may notice that elements below the header are out of position:

    Admin CP -> Appearance -> Style Properties -> Header and Navigation -> Height of Header Logo
    lazer likes this.
  5. lazer

    lazer Well-Known Member

    Thank you Jake, I'll give that a go!

  6. lazer

    lazer Well-Known Member

    Ok, added this to ad_header:
    <div style="float: right; background-color: blue; width: 400px; height: 60px; margin-top: 20px; margin-bottom: 40px;">
        <img src="http://dummyimage.com/468x60/000/fff" alt="Test Image" height="60" width="468">
    but the banner sticks out to the right, widening the page:


    Is there a way to bring it more over to the left?
  7. Bram

    Bram Well-Known Member

    You can ad a margin-right to the code
    Jake Bunce likes this.
  8. lazer

    lazer Well-Known Member


    Thanks Bram and Jake :)
    Bram likes this.

Share This Page