Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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
[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.

:-)
  #2  
Old Mar 24, 2016, 07:10 PM
juggledad's Avatar
juggledad
 
23,765 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,765 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,765 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

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 02:59 AM.


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