Viewing 14 replies - 1 through 14 (of 14 total)
  • Thread Starter Tulimafat

    (@tulimafat)

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

    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.

    Thread Starter Tulimafat

    (@tulimafat)

    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?

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

    Thread Starter Tulimafat

    (@tulimafat)

    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?

    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.

    Thread Starter Tulimafat

    (@tulimafat)

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

    Thread Starter Tulimafat

    (@tulimafat)

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

    Thread Starter Tulimafat

    (@tulimafat)

    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.

    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("https://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.

    Thread Starter Tulimafat

    (@tulimafat)

    Thank you so much. It’s awesome ??

    Thread Starter Tulimafat

    (@tulimafat)

    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?

    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 :).

    Thread Starter Tulimafat

    (@tulimafat)

    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?

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘logo in header’ is closed to new replies.