Logo

• 

  fabricaliteraria · Member · Oct 25, 2011 at 5:21 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  thesacredpath · Member · Oct 25, 2011 at 6:03 pm

  • Copy link

  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;
  }

• 

  fabricaliteraria · Member · Oct 25, 2011 at 6:43 pm

  • Copy link

  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?

• 

  thesacredpath · Member · Oct 25, 2011 at 7:42 pm

  • Copy link

  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;
  }

• 

  fabricaliteraria · Member · Oct 25, 2011 at 10:21 pm

  • Copy link

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

  Can you help me with that?

• 

  thesacredpath · Member · Oct 25, 2011 at 11:07 pm

  • Copy link

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

• 

  thesacredpath · Member · Oct 25, 2011 at 11:09 pm

  • Copy link

  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.

• 

  thesacredpath · Member · Oct 25, 2011 at 11:17 pm

  • Copy link

  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.

• 

  fabricaliteraria · Member · Oct 26, 2011 at 1:46 am

  • Copy link

  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.

• 

  fabricaliteraria · Member · Oct 26, 2011 at 2:07 am

  • Copy link

  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.

• 

  thesacredpath · Member · Oct 26, 2011 at 2:15 am

  • Copy link

  You took these out, put those back in.

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

• 

  fabricaliteraria · Member · Oct 26, 2011 at 9:58 pm

  • Copy link

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

• 

  thesacredpath · Member · Oct 27, 2011 at 6:56 am

  • Copy link

  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.

• 

  fabricaliteraria · Member · Oct 27, 2011 at 5:51 pm

  • Copy link

  Ok, no problem, I´ll do that.

  Thanks, sacred path.

• 

  thesacredpath · Member · Oct 27, 2011 at 5:58 pm

  • Copy link

  You are welcome.