WordPress.com

1. spaulger2013
   Member
   Feb 12, 2013, 7:32 PM

   Hi,

   I am trying to replace the title on my site with our logo. I have found this bit of code and replaced the image url with the url for an image in my media library

   #logo h1 a {<br /> display: block;<br /> width: 960px;<br /> height: 184px;<br /> background: url(http://2.bp.blogspot.com/-kW2FgrXslxk/Tzl73SZFzcI/AAAAAAAAALQ/8Jj66Wh2MLA/s1600/Header5.png) no-repeat -20px;<br /> text-indent: -9999px;<br /> }<br /> #header {<br /> padding-bottom: 0;<br /> }

   but it doesn't seem to work! It removes the title and creates the right space for the logo - but no logo appears. The template I am using is misty lake.

   Thanks!

   The blog I need help with is mka4h2013.wordpress.com.

2. designsimply
   Staff
   Feb 18, 2013, 10:09 PM

   CSS is theme specific, and I'm not sure where you got that example or what theme it was designed for.

   Instead, we should look at your blog specifically. I see that you are currently using the Misty Lake theme at the http://mka4h2013.wordpress.com/ blog. Is your goal to replace the "MK Arts for Health" text with a logo?

   Can you upload the logo you'd like to use into your media library and include the URL for the image in your reply?

3. spaulger2013
   Member
   Feb 19, 2013, 7:56 PM

   Hi,

   Thanks for your response. I am very new to all this! Yes, my goal is to replace the MK Arts for Health text with the logo

   Here is the URL

   http://mka4h2013.files.wordpress.com/2013/02/bright-logobground-copy.jpg

4. designsimply
   Staff
   Feb 24, 2013, 3:24 AM

   The custom CSS you have currently is pretty close:

   h1 a {
   	display: block;
   	width:250px;
   	height:102px;
   	background-image:url('http://mka4h2013.files.wordpress.com/2013/02/bright-logobground-copy.jpg') no-repeat -20px;
   	text-indent:-9999px
   }

   Try replacing it with this instead:

   .site-title a {
   	display: block;
   	width: 500px;
   	height: 205px;
   	background: url('http://mka4h2013.files.wordpress.com/2013/02/bright-logobground-copy.jpg') no-repeat;
   	text-align: left;
   	text-indent: -9999px
   }

   Use ".site-title" instead of "h1" because it's more specific. With your first rule, any time an h1 element was used as a link, it would get replaced. Also, you were using "background-image" but if you have more than one thing listed (such as "no-repeat") in that line, you should use "background" instead. I also adjust the the width and height values to match the width and height of the image you provided.

   It looks like the image has some extra spacing around it you might not want. If so, you should remove the extra spacing saved inside the image and re-upload it. Then adjust the width, height, and url() values in the CSS example above to match the new image.

5. spaulger2013
   Member
   Feb 24, 2013, 8:53 PM

   That worked brilliantly. Thank you very much.

   Sharon

Topic Closed

This topic has been closed to new replies.