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

How can I create space above the logo?

Discussion in 'Styling and Customization Questions' started by Diana, Aug 6, 2012.

  1. Diana

    Diana Active Member

    The logo is too near the top. I want to create some space above the logo.

    I tried "Height of Header Logo" but that affects the navbar.
     
  2. melbo

    melbo Well-Known Member

    I played with this for awhile and finally just added some space (transparent) to the top of my logo. I'm sure there's a much better way but this was the easiest.
     
  3. Steve F

    Steve F Well-Known Member

    Code:
    #logo img {
    margin-top: 10px;
    }
    You may need to add !important to the css rule.
     
  4. Cryptaline

    Cryptaline Active Member

    Search your templates for smth like this:

    #logo
    {
    line-height: {xen:calc '@headerLogoHeight + 0'}px;
    *line-height: {xen:calc '@headerLogoHeight + 0 '};
    height: {xen:calc '@headerLogoHeight + 0 '}px;
    }
     
  5. Cryptaline

    Cryptaline Active Member

    and change the values + add a margin property, e.g:

    #logo
    {
    line-height: {xen:calc '@headerLogoHeight + 0'}px;
    *line-height: {xen:calc '@headerLogoHeight + 0 '};
    height: {xen:calc '@headerLogoHeight + 0 '}px;
    margin-top: -15px;
    }
     
  6. Diana

    Diana Active Member

    Thanks everyone.

    justadam, I tried what you said. It had the opposite effect. It gave me less space at the top and moved the navbar up with it, like so.

    header.png

    I tried that in the header.css, didn't change anything.

    Where would I add "important?"
     
  7. Steve F

    Steve F Well-Known Member

    Add that to the EXTRA.css, it works on my install. You may have something else conflicting with it.

    Code:
    #logo img {
    margin-top: 10px !important;
    }
     
  8. Cryptaline

    Cryptaline Active Member

    Yup, i ve put minus in to margin-top: -15px; ( a lil mistake) :) If you will change it to margin-top: 50px; (or more) this will give you what you want. Nad yes, as Qwk86gn said, use extra.css to add this value, eg:

    #logo img {
    margin-top: 50px !important;
    }
     
  9. Diana

    Diana Active Member

    Nope, tried it both ways, neither of them makes the change.

    I should probably tell you that this is on a landing page, with a page node, created in a child style. So maybe I need to put an id number somewhere?
     
  10. Steve F

    Steve F Well-Known Member

    You need to put the in the extra.css in the child style possibly both child and parent.
     
  11. Diana

    Diana Active Member

    I did in the child style, wouldn't want to change it in the parent because I don't want to change the forum structure.
     
  12. Steve F

    Steve F Well-Known Member

    If you can send me a link I can most likely figure it out for you.
     
  13. Diana

    Diana Active Member

    Ok, thanks.
     

Share This Page