Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Logo

  1. fabricaliteraria
    Member

    Hi, my blog is http://fabricaliteraria.com/ and I´m using Twenty Eleven theme.

    I want to put a logo in the top of the blog, the URL is http://fabricaliteraria.files.wordpress.com/2011/10/logo_fl_1_.jpg and the size 350 x 56.

    Can you give me a hand?

    The blog I need help with is fabricaliteraria.com.

  2. thesacredpath
    Member

    This will do it. I've included an adjustment to decrease the white space below the logo since it was sitting too high.

    #site-title {
background: url("http://fabricaliteraria.files.wordpress.com/2011/10/logo_fl_1_.jpg") no-repeat scroll left bottom transparent;
}

#site-title a {
margin-left: -9999px;
}

#site-description {
margin-left: -9999px;
margin-bottom: 1.5em;
}

  3. fabricaliteraria
    Member

    Thanks, sacred path.

    In another blog I have you helped me with the linking of the logo to the home page, I already made the PNG transparent image and put it in a text widget in the top of the side bar.

    Can you help me moving it?

  4. thesacredpath
    Member

    Give this a try and make sure and check it while logged in and also while logged out to make sure things don't shift.

    #branding {
z-index: 999;
}

#text-3 {
height: 48px;
left: 185px;
position: absolute;
top: 75px;
width: 300px;
z-index: 1000;
}

  5. fabricaliteraria
    Member

    Thanks, sacred path, it worked. Only the PNG is a little moved to the left.

    Can you help me with that?

  6. thesacredpath
    Member

    Change the "left" value under #text-3 to 140px.

  7. thesacredpath
    Member

    Ah, wait. That won't work as the text-3 is moving when you narrow and widen the browser window.

    Give me a little time to sort that out.

  8. thesacredpath
    Member

    Add this.

    #page {
position: relative;
}

    Then change out #text-3 with this.

    #text-3 {
height: 48px;
left: 80px;
margin: 0;
position: absolute;
top: 45px;
width: 300px;
z-index: 1000;
}

    The above is not perfect as the text starts to move to the left out from under the widget when the browser window is narrowed to the point that the theme starts to narrow, but at the moment that is the best we can do.

    The other way to do this would be to replace your image in the text widget (linked to your main page) with the logo image URL and then remove this from your CSS.

    #site-title {
background: url("http://fabricaliteraria.files.wordpress.com/2011/10/logo_fl_1_.jpg") no-repeat scroll left bottom transparent;
}

    We would then be relying on the text widget alone and the movement would not be an issue.

  9. fabricaliteraria
    Member

    Ok, I did the last thing: replaced the image in the text widget, removed it from the CSS, and moved it to the top of the page.

    Can you help me erasing the original title and decreasing a little the white space below the logo?

    Thanks.

  10. fabricaliteraria
    Member

    In the custom header menu there is an option to not display the text (header), but it erases all the white space above the image.

  11. thesacredpath
    Member

    You took these out, put those back in.

    #site-title a {
margin-left: -9999px;
}

#site-description {
margin-left: -9999px;
margin-bottom: 1.5em;
}

  12. fabricaliteraria
    Member

    It worked fine in the home page, but when I select any other page it disappears.

  13. thesacredpath
    Member

    Ah, that is because you have the sidebar turned off on the pages which means that the text-3 widget is not there. to move up into the header area.

    You either have to turn the sidebar on for all the other pages (although that isn't the perfect solution since post related pages (blog) does not have a sidebar in this theme.

    I'm afraid that you will have to move the logo back into #site-title instead of in the text widget, and then basically abandon having the title clickable. The header is clickable and if you wish you can add a "home" button to the menu.

  14. fabricaliteraria
    Member

    Ok, no problem, I´ll do that.

    Thanks, sacred path.

  15. thesacredpath
    Member

    You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags