Need help? Check out our Support site, then


Logo

  1. 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. 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. 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. 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. Thanks, sacred path, it worked. Only the PNG is a little moved to the left.

    Can you help me with that?

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

  7. 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. 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. 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. 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. You took these out, put those back in.

    #site-title a {
    margin-left: -9999px;
    }
    
    #site-description {
    margin-left: -9999px;
    margin-bottom: 1.5em;
    }
  12. It worked fine in the home page, but when I select any other page it disappears.

  13. 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. Ok, no problem, I´ll do that.

    Thanks, sacred path.

  15. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic