adding a jpeg in the place of the site title

• 

  f16exhibition · Member · Feb 3, 2012 at 5:59 am

  • Copy link
  • Add topic to favorites

  I have the css upgrade.
  I want to replace the site title with a graphic I created. I found some code posted but it does not seem to work for Oulipo.
  Please Help!

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

• 

  thesacredpath · Member · Feb 3, 2012 at 6:08 am

  • Copy link

  Since CSS is theme specific, unless the code was specifically for your theme, changes are high it would not.

  First thing to do is go back to settings > general and add a site title back in and then we will deal with hiding it from view in the CSS. That way the search engines will still be able to see it. They can’t read titles in an image.

  Secondly, you need to post the URL of the image here in the forums so that we can work with it.

• 

  f16exhibition · Member · Feb 3, 2012 at 6:18 am

  • Copy link

  wow you are fast!
  here is the url:
  http://f16exhibition.files.wordpress.com/2012/02/cropped-40logo1.jpg
  I put the code back in its place.

• 

  thesacredpath · Member · Feb 3, 2012 at 6:37 am

  • Copy link

  If you want the image in the place of the title, it can be no wider than 160px. That is the width of that div (element). You could maybe go 200px, but that will require reworking a few other things to cleanly accommodate the increased width.

  Also when you rework the original image, save it as a PNG image. That will maintain cleaner and shaper lines. JPG is meant for photographic images and images with gradated content.

• 

  thesacredpath · Member · Feb 3, 2012 at 6:38 am

  • Copy link

  Oh wait, do you want this as a “header” above the content?

• 

  f16exhibition · Member · Feb 3, 2012 at 6:53 am

  • Copy link

  No, I think it will look nice in the space where the title is currently. Okay I will rework the image and then send you the url. Thanks for your help!

• 

  thesacredpath · Member · Feb 3, 2012 at 7:02 am

  • Copy link

  Just crop it really tight and the resize it to about 200px in width and we can do that for you.

• 

  f16exhibition · Member · Feb 3, 2012 at 7:07 am

  • Copy link

  here is the url: http://f16exhibition.files.wordpress.com/2012/02/160px.png

  I wish I had asked you 5 hours ago, instead of messing around trying to figure it out.

• 

  f16exhibition · Member · Feb 3, 2012 at 7:08 am

  • Copy link

  disregard, I will crop it a little tighter

• 

  f16exhibition · Member · Feb 3, 2012 at 7:11 am

  • Copy link

  here is the cropped version at 200pixels http://f16exhibition.files.wordpress.com/2012/02/200pxlogo.png

• 

  thesacredpath · Member · Feb 3, 2012 at 7:27 am

  • Copy link

  Give this a try and see what you think.

  .masthead {
  background: url("http://f16exhibition.files.wordpress.com/2012/02/200pxlogo.png") no-repeat scroll 0 0 transparent;
  height: 97px;
  }
  
  #main-nav {
  margin-top: 8em !important;
  width: 200px !important;
  }
  
  #main-nav h1.masthead a {
  display: block;
  text-indent: -9999px;
  }

• 

  f16exhibition · Member · Feb 3, 2012 at 7:34 am

  • Copy link

  perfect! Thank you so much!!!!

• 

  thesacredpath · Member · Feb 3, 2012 at 7:58 am

  • Copy link

  You are welcome. I’m on the phone for a few more minutes and will help with the other thread shortly.