Use graphic logo in place of site title?
-
I’m using the Bueno theme and have been attempting to change my site title to match my logo on my website. My logo uses the Zapfino font, which isn’t available through Typekit. Most Mac users have Zapfino, but Windows users don’t seem to have it at all, so specifying the font through CSS isn’t a great solution. I’ve uploaded a PNG file and linked to it through CSS, but the bottom is cut off. This is the code I’ve come up with in order for my PNG to show and make the regular site title “disappear”:
.site-title {
background:url(‘http://karenjoslin.files.wordpress.com/2010/11/colorlogo2009.png’) repeat-y;
}.site-title a:link,.site-title a:visited {
color:transparent;
}I’ve tried changing the height to the exact height of my file in both of the .site-title fields, and I’ve also tried doing it in the logo div, which the site title is part of. I’ve also tried changing the size of my logo as a percentage, but nothing I’ve tried has worked. So right now, I’m stuck using a header graphic. It’s not an ideal solution, though, because it doesn’t link back to my page, it adds a lot of extra space at the top of the page, and the page navigation doesn’t look good way above the header (so I’ve made it transparent).
Anyone have any suggestions as to how to solve this? If I really have to, I can re-do my logo and make the height smaller, but I’d really like it to appear the same size as on my website, if possible. Thanks!
The blog I need help with is: (visible only to logged in users)
-
Since I cannot see your blog, I’m going to have to do this by braille.
You are going to have to set a height and width in .site-title to match the height and width of your header image. That will allow the whole header to show and force the navigation and other page elements below the new logo image down.
-
Thanks, that worked. I had to tweak the repeat code because my logo was repeating over and over again across and down the entire header. For anyone else who’s having this problem, the code I ended up with was:
.site-title {
background:url(‘http://karenjoslin.files.wordpress.com/2010/11/colorlogo2009.png’) repeat-x;
width:300px;
height:198px;
}If you’re using a different theme than Bueno, make sure to check your header dimensions first.
-
Also, CSS is theme dependent which means the selectors are most likely different like .masthead , .title h1 a, or something like that.
-
Good point. Also, I added another bit of code to reduce the amount of space between my site title and content. To do that, I set the height of the logo div to 86 px, which is the height of my actual file size. Perfect!
- The topic ‘Use graphic logo in place of site title?’ is closed to new replies.
WordPress.com Forums 