Changing Misty theme header H1 from text to image

• 

  ibbranco · Member · Jul 2, 2010 at 1:27 pm

  • Copy link
  • Add topic to favorites

  I’m trying to insert a Logo (jpg or png) on my blog (http://parisrivedroiterivegauche.com), made on the Misty Theme, in the place of the header H1 (which is a text form). Can I do it ? If so, which would be the code to change on the CSS ? Similar ti the one in #headerimage ???

  Tks in advance

  ISabel

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

• 

  timethief · Member · Jul 2, 2010 at 9:59 pm

  • Copy link

  I flag this so it gets moved to the CSS Forum where the Volunteers who help with CSS editing can see it and help you.

• 

  cvanhasselt · Member · Jul 7, 2010 at 2:28 pm

  • Copy link

  Isabel –
  I think I understand what you are trying to do. But, think about whether you want to do it or not – having the text there is handy for search engines to latch onto, whereas your logo is just a blob of pixels. Also, text readers work well with text, but not necessarily with images, so there might be some accessibility penalty for adding the logo.

  That being said, I think you could accomplish what you want. In WP.com, you can’t change the HTML, so you can’t insert an image tag. But you can add a background image via CSS. In MistyLook, the main header is contained in a DIV tag, on your site, like this:

  
<div id="header">
<h1>PARIS RD/RG</h1>
<h2>PARIS Rive Droite / Rive Gauche: Arte, Cultura, Art de Vivre, Moda, Gastronomia, Bem-Estar, Design …</h2>
</div><!-- end id:header -->

  You can add CSS code to style the div, putting a background image on the header DIV.

  
#header {
background-image: url(<URL_to_your_image>);
background-repeat: no-repeat;
background-position: top left;
padding-left: 100px;
}


  The padding-left should scoot the text header over far enough so the logo shows up next to the text. Try this for starters.

• 

  devblog · Member · Jul 7, 2010 at 5:00 pm

  • Copy link

  Just my 2 cents, shortcuts are sweeter:

  #header{
  background: transparent url(URL-TO-YOUR-IMAGE) 0 0 no-repeat;
  padding-left: 100px;
  }

• 

  ibbranco · Member · Jul 9, 2010 at 6:41 am

  • Copy link

  Thank you both so much. Ok I now understand that changing the mai header is not good for search reasons. So I will mix both. Thanks for the suggestions and help !

  :)

  ISabel