Hello friends,

I have a site that is currently in development here:
http://www.betasab.host56.com

What I would like to do, is replace the text "BETASAB" with a placeholder logo that I have developed here:
http://betasab.host56.com/wp-content..._version_3.jpg

I've tried several different things, and it shoud be pretty easily done, but I can't quite figure it out. Can anyone give me a little guidance?

Much appreciated.
-Patric

Add this to your CSS

#header h1 {
display:block;
width: 251px;
height: 104px;
background:url(/wp-content/themes/shades-of-blue/images/logo_version_3.jpg);
margin:0;padding:0;
text-indent:-4999px;
}

just before the navigation css section

Nice, thanks.

http://betasab.host56.com/

Now, that added css works on my home page, but for some reason it doesn't appear the same way on the other pages of the site.
http://betasab.host56.com/?page_id=2

EDIT: I've figured it out. One thing though, I would like it so that the logo is a link to the home page again, since it's now a background image to H1 and H4 I am not sure how this can be done.... Any ideas please? I would greatly appreciate it.

Thanks,
Patric

Originally Posted by Reckoner

Nice, thanks.

http://betasab.host56.com/

Now, that added css works on my home page, but for some reason it doesn't appear the same way on the other pages of the site.
http://betasab.host56.com/?page_id=2

EDIT: I've figured it out. One thing though, I would like it so that the logo is a link to the home page again, since it's now a background image to H1 and H4 I am not sure how this can be done.... Any ideas please? I would greatly appreciate it.

Thanks,
Patric

The only way to link an image is to add the image directly in the html so you could add this code

<a href="/index.php"><img src="/wp-content/themes/shades-of-blue/images/logo_version_3.jpg" width="" height="" alt="logo" /></a>

Don't forget to add the images width and height inside the ""

Instead of

<h1><a href="http://betasab.host56.com/">BETASAB</a></h1>

Certainly save a current copy of your theme including the style.css file before you try it. It worked well for me

By the way nice layout

You can have an image be a link without putting it in an image tag:
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>

Keep the css above and add:
h1 a { width:251px; height:104px; display:block; }

This should make that h1 clickable.

Also, you should make it practice to either put the full URL of an image in the html or the image path relative to the css file.

Originally Posted by sequencehosting

The only way to link an image is to add the image directly in the html so you could add this code

<a href="/index.php"><img src="/wp-content/themes/shades-of-blue/images/logo_version_3.jpg" width="251" height="104" alt="logo" /></a>

Don't forget to add the images width and height inside the ""

Instead of

<h1><a href="http://betasab.host56.com/">BETASAB</a></h1>

Certainly save a current copy of your theme including the style.css file before you try it. It worked well for me

By the way nice layout

Wow, that post was right on the money. Thanks so much for your reply, that was very helpful, I was able to make the logo link to the home page.

Also, thanks again Racer x for your help / tips.

Followup:

So, I've made a dropshadow as the background, but for some reason, it doesn't seem to be viewed correctly in IE, even though I've set the margin right and left to auto...

Anyone have any ideas?? Sorry for keep bothering everyone but if I could get this issue wrapped up, I would be very close to completion, and I've completely run out of ideas why this is causing issues in IE.