[SOLVED] Header Overlay
 

Hi.

Am trying to put an animated gif in the bottom right hand corner of my header as an overlaid image. It is in the form of text that 'writes itself'. I looked in the ata-header section for guidance and can see that I can overlay the header by uploading an image (in this case "Signature 1") into wp-content/images (though my header images are stored in wp-content/ata-images) and tried this code to replace your example which is about Facebook/Twitter items.

<div id="Signature 1">
<ul>
<img src="/wp-content/ata-images/signature 1">
</ul>
</div>
#header_image_signature 1 {position: absolute; right:40px; top: 20px;}

Well it didn't work. Not only this but I have had to delete the sig1 gif from my content files as it gave me a nasty little thumbnail top left.

As you can prolly see I am not a coder but a tryer.

Can you help me with the code?

My url is: www.radishweb.co.uk

Thanks in advance.

:-)

Make sure your file name has no spaces so 'signature 1' should be 'signature-1' or 'signature_1' or 'signature1' and that it has an extension (jpg, gif, etc)

Also, your header image(s) should be in the wp-content/ata-images/header folder, so I would put your signature1 image in the wp-content/ata-images folder

Remember, the folder you put the image in, is the folder you have to name in the <img src= and you might want to fully qualify the path to the file, so it would be
or what ever you are naming it.

Thanks. Have done all that. New code is:

<div id="header_image_signature1">
<ul>
<img src="www.radishweb.co.uk/wp-content/ata-images/signature1.gif">
</ul>
</div>
#header_image_signature 1 {position: absolute; right:40px; top: 20px;}

Also changed the file name to delete the space and made sure it was in ata-header images folder.

No go. Also added 'header' here in case it was an important omission so tried "www.radishweb.co.uk/wp-content/ata-images/header/signature1.gif"> No go with this either.

Still got the nasty thumbnail which I've left for now so you can see (it also displays its code when it's loading for some reason). No pic bottom right.

Wonder if it's the picture? Got it from FlamingText.com but a gif's a gif so maybe not.

if I enter 'www.radishweb.co.uk/wp-content/ata-images/signature1.gif' into my browser, it gets a not found.

at ATO->Image Location what do you have entered for:
1) Relative location of images?

2) Images Directory

OK. I had put the gif into the ata-images folder and not the ata-images/header folder which is why we got the 'not found'. Another silly mistake. So we now have signature!!

However, almost there but without the cigar as I've also not been able to get rid of the nasty thumbnail which seems to be something to do with the div container - if you click it it just links back to the site. I've double checked the ata-images folder and got rid of the duplicate gif just in case it was that.

Also now need to locate the signature bottom right as the 'absolute right' part of the code just appears as text (you can just see it in the image). If you could maybe help with this - (learning heaps just doing this!) - would appreciate.

I'm extremely conscious of the time I've been taking so just to let you know I've made a donation.

:-)

Have you set the header image as being clickable? (ATO->Header Image->Make header image clickable?)

It looks like you put some CSS in the header?? I see this
under teh header

Yes, wanted to make it clickable but NOT the nasty thumbnail. Have taken the placement code out of the header now so that's gone. Still need the thumbnail to go and the signature to be placed absolute right.

I may just abandon the sig.gif and do a paint job on the header image and go for static text instead. So conscious of your time...

The thumbnail is there because you wanted a header image and haven't provided one.
If you ise teh %image option, you need to have an image in the ata-images/header folder.
You could create a 1x1 pill transparent png and put it in there and that would remove the thumbnail

Thanks Juggledad for all your help. On reflection am going to go for the paintjob. Now I've seen the signature in context it looks a bit naff.

This hasn't been a total waste of time as I've learned a lot. Many thanks for your patience.

:-)