Need help? Check out our Support site, then


How can I change replace the title for a logo

  1. 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. 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. 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. 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. That worked brilliantly. Thank you very much.

    Sharon

Topic Closed

This topic has been closed to new replies.

About this Topic