Changing the blog title to an image/logo in Oulipo Theme WordPress
- SOLVED
Here is my URL:
http://melissa-mcmahon.com.
I managed a few days ago to replace the blog name header "swapmeat" with my logo using this code
<h1 class="masthead"><img src="<?php bloginfo('template_url'); ?>/images/piggy.jpg" alt="melissa-mcmahon Dot Com" />
piggy.jpg is the name of the logo file which is stored in the images folder in the Oulipo theme folder.
This is the ONLY change that I made to this theme.
Everything looked great on my Mac using firefox. I tested it on a PC using Internet Explorer and it looked fine yesterday. Today I looked a the site in internet explorer and the main text was spilling out into the side bars, causing the logo to cover text as you scroll down.
I have not changed anything since yesterday. I have no idea why it is all of a sudden not compatible with internet explorer.
Can someone tell me a better way to imput my logo as I assume this is what has caused the issue with markup?
Suggestions?
Thanks so much,
m
Answers (2)
Jermaine Oppong answers:
Try this code. I've changed the bloginfo parameter.
<h1 class="masthead">
<img src="<?php bloginfo('template_directory'); ?>/images/piggy.jpg" alt="melissa-mcmahon Dot Com" />
</h1>
You can also use CSS sprites. Check this video out:
[[LINK href="http://css-tricks.com/video-screencasts/43-how-to-use-css-sprites/"]]http://css-tricks.com/video-screencasts/43-how-to-use-css-sprites/[[/LINK]]
melissamcmahon comments:
sweet. I'll check this out when I get back to my desk.
idt answers:
piggy.jpg is not in your theme/images directory. Did you remove it?
If the image specified in img tag can't be found, the browser will display the text specified in the alt attribute, in your case "melissa-mcmahon Dot Com". So that could be the reason you're having that issue.
And you're missing the closing <h1> tag in your code above if you did not omit it on purpose. It should have been
<h1 class="masthead"><img src="<?php bloginfo('template_url'); ?>/images/piggy.jpg" alt="melissa-mcmahon Dot Com" /></h1>
melissamcmahon comments:
this is not why I am having the issue.
In order to have the page start viewing properly again, I deleted and re-loaded the theme. I had too many followers telling me it was all screwed up and it got a little annoying and I can't access my ftp from where I am right now. I won't be back at my desk until tonight. I will put the file back in images when I get back to my desk.
I've attached a picture of how screwed up the view of this is explorer - as you can see my logo is totally floating in the middle of nowhere....
idt comments:
Sorry, but I could not find the attached image of your site's screwed up view. Can you please attached it again?
idt comments:
Your theme actually has an area for a logo image(160pxX120px), just above your site's title text "SWAPMEAT".
To have your logo display in the area I mentioned, you could add this to you CSS:
span.header_image {
background-image: url("images/piggy.jpg")
}
Just make sure that the dimension of your logo is 160X120 pixels.
idt comments:
Also, your sidebar is just 160px wide. So it's either you make your logo 160px wide or you have to specify a width for your logo in your CSS with this:
h1.masthead a img{
width: 160px;
}
melissamcmahon comments:
I'm not sure this is the issue however since the text is also aout of whack! (sorry, I need to verify my permissions and I'm not able to get access to FTP right now, otherwise I would test the code...I will do so tonight). I think it's a greater issue than the picture size. It works fine on all browsers other than IE. The main body of text is spilling into my side bars. Trying to attach an screenshot:
melissamcmahon comments:
for some reason, screenshot will not upload.
melissamcmahon comments:
idt comments:
I went to check your site and it seems you have adjusted your logo to 160px wide and that's good because when a content is wider that it's container, it can cause an issue on the layout. It may look good in some browsers but a big chance it will break on other browsers.
melissamcmahon comments:
Yes, I changed it to 160px, but it's super small and hard to read. I've just adjusted it to be larger. On my screen it works (I'm on a mac using firefox). Unfortunately I don't have access to a PC again until monday in order to test explorer. At that time I'll know if the actual size of the image is what is causing the problem, however I'm not sure it is (or it would be messed up in any browser).
I'll get back to you monday with the result.