WordPress.org

Ready to get started?Download WordPress

Forums

logo in header (15 posts)

  1. Tulimafat
    Member
    Posted 1 year ago #

    Hello again.
    I need some help getting a logo next to some text in the header.

    Similar to what I have done here: http://www.sabaki.dk/VKS/
    This is what I inserted last time in with "Clean Simple White" Theme in the style.css-file:
    #header h1 a {
    padding: 15px 0px 30px 120px;
    background: url(http://www.sabaki.dk/VKS/wp-content/themes/clean-simple-white/vks-logo.png) no-repeat;
    }
    #head-desc {
    padding-left: 120px;
    }

    So I thought I should just write something similar for the new website and new logo:
    #header h1 a {
    padding: 15px 0px 30px 120px;
    background: url(http://viborghallen.dk/wp-content/themes/twentyeleven/vhm-logo.png) no-repeat;
    }
    #head-desc {
    padding-left: 120px;
    }

    But it does not work. Any suggestions?

  2. Tulimafat
    Member
    Posted 1 year ago #

    btw I just upgraded to wordpress version 3.5 and the updated theme twenty eleven, but it still did not help.

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    CSS is very theme/site specific, so you can't copy it from one to another.

    But before you do anything, do you have a child theme or custom CSS set up? Making changes to theme files is a very bad idea -- particularly with a default WP theme.

  4. Tulimafat
    Member
    Posted 1 year ago #

    ahh yes. I forgot that.
    I have now applied a child theme to my website.

    The child theme has two specific files.
    style.css and rtl.css

    can I write anything in these to add a logo to the header?

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yep, do you want the same basic layout as the other site?

  6. Tulimafat
    Member
    Posted 1 year ago #

    Yes please.
    The logos are also very similar. The one on the new site just has a green background to it.

    Will I be able to change the position of the logo from the left side to the right side of the title text, if I wish to change it?

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Try this in the new stylesheet:

    #branding hgroup {
        background: url("") no-repeat;
    }

    Put the URL to the image in the space above -- once it's showing on the page, we can fix the positioning.

  8. Tulimafat
    Member
    Posted 1 year ago #

    ok I have placed it in the file, but as you can see, it's too big etc... what do I type now?

  9. Tulimafat
    Member
    Posted 1 year ago #

    ahh... I'm making the logo smaller on my desktop and upload it to the ftp-server.

  10. Tulimafat
    Member
    Posted 1 year ago #

    and I could use some of the old code too: padding: 15px 0px 30px 120px;

    Now I just need to position it better, but I'm out of ideas now.

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Okay, looks go, but we need to do some more CSS - you should actually remove the padding that you added to the above CSS. So in your child, try this:

    #branding hgroup {
        background: url("http://viborghallen.dk/wp-content/themes/twentyeleven/vhm-logo.png") no-repeat scroll 0 0 transparent;
        margin: 20px 0 0 10px;
    }
    
    #site-title, #site-description {
        margin-left: 150px;
    }

    See what that looks like.

  12. Tulimafat
    Member
    Posted 1 year ago #

    Thank you so much. It's awesome :D

  13. Tulimafat
    Member
    Posted 1 year ago #

    Though I noticed a small thing. The title is moved down, when the logo is moved too. So the title and the search box don't line up.
    How do I avoid moving the title down?

  14. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Try adding this:

    #site-title {
        padding: 2.65625em 0 0;
    }

    Adjust the padding number in the above - so it aligns how you want it.

    It does look nice -- I like your logo a lot :).

  15. Tulimafat
    Member
    Posted 1 year ago #

    Well thank you :)

    I have tried to insert the last part, but when I do so, the logo gets "cut off". It looks like there is a white margin above the banner.

    Is there a way to let the logo get on top of that, or can the margin or padding from the banner be decreased in some way?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags