Adding a link back to the home page in header

Hello bonikowsky,

To accomplish what you want, you will need to modify the header.php file a bit in your theme directory. Go ahead and get in there and open up the file.

You should see something like <div id="title-container">...some stuff about a site-title or site-tagline...</div>. Go ahead and wipe that out, and replace it with the following:
<a id="title-image "href="https://bonikowsky.org/"><img src="wp-content/uploads/headerimage.jpg" /></a>

Then, in the inline styling you have in header.php, change div#title-container to #title-imageand also remove the background-image and background-repeat styling you have for that.

That should do the trick!

Best,
Connor

thanks for the response… I haven’t been able to get back to the website for quite a while. I tried to do what you said, but I’m coming up with something that has me stumped.
The image and link show up like they should, but don’t display correctly in either Firefox or IE (IE8) They have this colored box around the edges.
Chrome and Safari both display it without a problem.

thanks,
bonikowsky

if you followed the suggestions of @connor Montgomery, try to add

a#title-image img { border: none; }

to style.css of your theme.

I tried that and still haven’t got it to work. Checking it with Firebug, I can get it so it links up with my style sheet, but it still uses a computed value of 2px for the border all around…
Where could it be getting the 2px from?

could be ‘padding’ on the image or link style (?); or some inherited border.

without seeing your site, this is just guessing.

Use Firebug’s Select Element (blue box w/arrow in upper left corner) and select the image. In the right hand pane you should see all of the CSS rules applied for that element *including* file/linenumber of where they come from and all of the rules that were overridden. You can click just to the left of any style info to disable it and verify that it’s the culprit. Very useful.

This process almost always shows that I was an idiot and either got my general style rules out of order or that I should have used higher-specificity rules (e.g. with class or id, or specifying the parent element more precisely) to force a particular element to have certain rules.

And alchymth is right: a link to the offending page/site makes it much easier for us to give more specific help.

sorry. the link is up in the first post.
bonikowsky.org

Right. The problem is that the default stylesheet for the browser is supplying a 1px border for the img tag and it is never explicitly turned off. This default behavior goes back into the Mists of Time and is generally considered to have been a Bad Decision.

At the top of your style.css file there are a number of rules to set default styles but none, surprisingly, for the img tag. I normally put the following at the top to remove all borders on images and then add it back in only it if makes sense (which it rarely does). I did this in Firebug and it worked fine.

img {border: 0;}

For more a more comprehensive CSS reset look at https://meyerweb.com/eric/tools/css/reset/, amongst others.

hey thanks a bunch. that worked perfectly…

Thanx a lot, Lads! That’s realy useful!