changing logo

• 

  escritosemanal · Member · Sep 10, 2011 at 6:21 pm

  • Copy link
  • Add topic to favorites

  Hi, my blog is escritosemanal.com

  I´m using the Neutra theme, and recently uploaded a new logo to the header.

  I want to use another image (its the same, only with different color) to display when the arrow is on top of it, and also when I click it.

  The URL of the image is http://escritosemanal.files.wordpress.com/2011/09/encabezado-7_naranja.jpg and the size 926 × 100 pixels.

  Thanks.

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

• 

  timethief · Member · Sep 10, 2011 at 6:30 pm

  • Copy link

  You simply edit the image URL for the header (logo) you have in your CSS now, remove it and replace it with the image URL for the new one. http://en.support.wordpress.com/editing-css/#maintaining-your-custom-header

• 

  escritosemanal · Member · Sep 10, 2011 at 6:32 pm

  • Copy link

  no no, but i want to keep the actual one, and that it changes only when the arrow is on top of it

• 

  timethief · Member · Sep 10, 2011 at 6:47 pm

  • Copy link

  Then you will have to wait for Staff support.

• 

  timethief · Member · Sep 10, 2011 at 6:49 pm

  • Copy link

  Cross referwnce to > https://en.forums.wordpress.com/topic/header-logo-1?replies=13

• 

  thesacredpath · Member · Sep 10, 2011 at 11:40 pm

  • Copy link

  Take your existing background image declaration you have in #container h1 and move it to #container h1 a and then create the #container h1 a hover selector as shown at the bottom of the CSS below.

  #container h1 {
  background: none;
  }
  
  #container h1 a {
  background: url("http://escritosemanal.files.wordpress.com/2011/09/encabezado-7_gris-119.jpg") no-repeat scroll 0 0 #FFFFFF;
  }
  
  #container h1 a:hover {
  background: url("http://escritosemanal.files.wordpress.com/2011/09/encabezado-7_naranja.jpg") no-repeat scroll 0 0 #FFFFFF;
  }

• 

  escritosemanal · Member · Sep 11, 2011 at 2:00 am

  • Copy link

  Thank you so much sacred path, you`re the man.

  I changed the code a little to this:

  #container h1 a {
  display:block;
  text-indent:-9999px;
  background:#fff url(‘http://escritosemanal.files.wordpress.com/2011/09/encabezado-7_gris-119.jpg’) 0 0 no-repeat;
  height:100px;
  overflow:hidden;
  width:100%;
  }

  #container h1 a:hover {
  background:url(‘http://escritosemanal.files.wordpress.com/2011/09/encabezado-7_naranja.jpg’) no-repeat scroll 0 0 #FFFFFF;
  }

• 

  thesacredpath · Member · Sep 11, 2011 at 2:29 am

  • Copy link

  You are welcome and the additions are fine. You just picked up what was already in the #container h1 a selector, which I did not list out.