logo header

• 

  olalaboutique · Member · Oct 6, 2011 at 9:20 pm

  • Copy link
  • Add topic to favorites

  Hi. My blog is http://olalaboutique.com/ and I´m using “bueno” theme.

  I want to change the header to a logo I have. The URL of the image is http://olalaboutique.files.wordpress.com/2011/10/olala-tarjeta-01.jpg and the size 653 x 314 pixels.

  Can you help me with this?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Oct 6, 2011 at 11:15 pm

  • Copy link

  Your logo is way too large in my opinion, but here it is. I added a black background so that there isn’t a bunch of blank space on each side of it.

  #logo {
  background: url("http://olalaboutique.files.wordpress.com/2011/10/olala-tarjeta-01.jpg") no-repeat scroll center top #000000;
  height: 314px;
  width: 940px;
  }
  
  .site-title a:link, .site-title a:visited {
  display: none;
  }

• 

  thesacredpath · Member · Oct 6, 2011 at 11:16 pm

  • Copy link

  The above of course assumes you are wanting to replace the site title with the logo, not the header image you already have.

• 

  olalaboutique · Member · Oct 6, 2011 at 11:54 pm

  • Copy link

  Thanks, sacred path, it worked great. I already reduced the size of it.

  There is a way to link that image to “home”?

• 

  thesacredpath · Member · Oct 7, 2011 at 12:14 am

  • Copy link

  That is a little bit of a chore. You have to create a blank transparent PNG image the exact size of the header image and then put it into a text widget and link it to your home page and then use CSS positioning to move it up and over the top of the logo image.

  If you want to do that we can help with the positioning. Just get the blank image into a text widget and linked and let us know.

• 

  olalaboutique · Member · Oct 19, 2011 at 6:24 pm

  • Copy link

  I changed the theme to Coraline, can you help me with the logo again?

  The URL of the file is: http://olalaboutique.files.wordpress.com/2011/10/olala-tarjeta-03-blanco.jpg

  And the size: 225 × 106

  Thanks.

• 

  thesacredpath · Member · Oct 19, 2011 at 6:38 pm

  • Copy link

  This will do it for you.

  #site-title a {
  margin-left: -9999px;
  }
  
  #site-title {
  background: url("http://olalaboutique.files.wordpress.com/2011/10/olala-tarjeta-03-blanco.jpg") no-repeat scroll center top transparent;
  height: 106px;
  }

• 

  olalaboutique · Member · Oct 19, 2011 at 10:10 pm

  • Copy link

  Thanks, sacred path. It worked, again.

  I want to do the home page linking in the logo.

  The PNG image is http://olalaboutique.files.wordpress.com/2011/10/logo_home.png

  How do I put it into a text widget? I put one in the side bar, but I dont think thats what you talked about.

• 

  thesacredpath · Member · Oct 19, 2011 at 11:18 pm

  • Copy link

  You have to insert the image into a text widget and link it to your site home page and then we can move it up and over your logo. Here is the code to put into the text widget. Put the text widget at the top of the sidebar so it is easy for me to find.

  <img alt=”” src=”http://olalaboutique.files.wordpress.com/2011/10/logo_home.png” />

• 

  thesacredpath · Member · Oct 19, 2011 at 11:19 pm

  • Copy link

  Forgot my code tags, use the following in the text widget.

  <a href="http://olalaboutique.com/"><img alt="" src="http://olalaboutique.files.wordpress.com/2011/10/logo_home.png" /></a>

• 

  thesacredpath · Member · Oct 19, 2011 at 11:21 pm

  • Copy link

  Oh yeah, and don’t put a title on the text widget.

• 

  olalaboutique · Member · Oct 20, 2011 at 10:07 pm

  • Copy link

  Ok, I done it.

• 

  thesacredpath · Member · Oct 20, 2011 at 10:28 pm

  • Copy link

  Add this to the bottom of your custom CSS.

  #container {
  position: relative;
  }
  
  #text-5 {
  left: 285px;
  position: absolute;
  top: 15px;
  }

• 

  olalaboutique · Member · Oct 20, 2011 at 10:42 pm

  • Copy link

  It worked, as always.

  You´re the absolute man in here.

• 

  thesacredpath · Member · Oct 21, 2011 at 1:53 am

  • Copy link

  Thanks and you are welcome.

• 

  olalaboutique · Member · Oct 27, 2011 at 12:00 am

  • Copy link

  I want the logo to change to another color, when the mouse is over it. I think its called hover. I already upload the image, its URL is http://olalaboutique.files.wordpress.com/2011/10/olala-tarjeta_10_color.jpg

  Can you help me?

• 

  thesacredpath · Member · Oct 27, 2011 at 3:04 am

  • Copy link

  Ummm, this is much more involved and I’m going to have to think about it a bit.

• 

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

  • Copy link

  Without completely redoing everything this is about the best I can do. Add this to your CSS. Also, it would be much better if you saved the original for the hover as a PNG. JPG on this type of image will make them fuzzy on the edges.

  #text-5 img:hover {
  background: url("http://olalaboutique.files.wordpress.com/2011/10/olala-tarjeta_10_color.jpg") no-repeat scroll center 13px white;
  }

• 

  olalaboutique · Member · Oct 27, 2011 at 10:03 pm

  • Copy link

  It does get fuzzy in the edges, even with the PNG image. It doesn´t matter, it isn´t that important.

  I will like to add a grey background only in the top of the blog, that starts in the top and ends in the grey line below the logo. Can you help me with that?

• 

  thesacredpath · Member · Oct 27, 2011 at 10:19 pm

  • Copy link

  The problem is your logo has a white background. You will have to redo it with a transparent background and save it as a PNG, upload that one and then replace the URL in #site-title.

  Add the following for the grey background to the header area. Edit the “grey” color as desired

  #masthead {
  background-color: grey;
  }
  
  #site-description {
  display: none;
  }