Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

[SOLVED] Header Overlay


  #1  
Old Mar 24, 2016, 05:40 PM
MegRadish
 
8 posts · Mar 2016
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.

:-)
  #2  
Old Mar 24, 2016, 07:10 PM
juggledad's Avatar
juggledad
 
23,465 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
HTML Code:
www.radishweb.co.uk/wp-content/ata-images/signature1.gif
or what ever you are naming it.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Mar 24, 2016 at 07:21 PM.
  #3  
Old Mar 27, 2016, 08:09 AM
MegRadish
 
8 posts · Mar 2016
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.
  #4  
Old Mar 27, 2016, 07:07 PM
juggledad's Avatar
juggledad
 
23,465 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Mar 27, 2016 at 07:10 PM.
  #5  
Old Mar 28, 2016, 07:39 AM
MegRadish
 
8 posts · Mar 2016
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.

:-)
  #6  
Old Mar 28, 2016, 07:57 AM
juggledad's Avatar
juggledad
 
23,465 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
HTML Code:
#header_image_signature1 {position: absolute; right:40px; top: 20px;}
under teh header
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Mar 28, 2016, 09:32 AM
MegRadish
 
8 posts · Mar 2016
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...
  #8  
Old Mar 28, 2016, 10:03 AM
juggledad's Avatar
juggledad
 
23,465 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Mar 28, 2016, 10:22 AM
MegRadish
 
8 posts · Mar 2016
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.

:-)

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
linked images in header overlay kdd Atahualpa 3 Wordpress theme 1 Oct 13, 2013 01:25 PM
Problem rotating & fading header images and overlay header image SiaRa Header configuration & styling 9 Aug 7, 2012 01:37 PM
Rotating Header text overlay possible? TotalBalance Header configuration & styling 6 Mar 29, 2012 04:35 AM
Can not get Overlay Header Image to work robtuk Header configuration & styling 1 Apr 12, 2011 03:07 PM
[SOLVED] Header Overlay in MSIE JP556 Header configuration & styling 2 Sep 20, 2010 04:34 PM


All times are GMT -6. The time now is 12:11 PM.


Powered by vBulletin® Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.