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] Overlay Header Image Issue - FB Icon


  #1  
Old Jun 24, 2011, 11:34 AM
allyevans
 
35 posts · Aug 2010
Hi - I'm trying to add a facebook icon in my header area. I followed the instructions in Overlay Header Image but haven't been able to get it to work. I have tried many different variations of the code. I currently have the following:

In ATO > Header Image > Overlay Header Image:

<div id="header_image_sociable">
<a href="http://www.facebook.com/pages/Alexis-Coram/170999039623087?sk=wall">
<img src="http//www.alexiscoram.com/wp-content/themes/atahualpa/images/fb.gif" alt="Facebook" /></a>
</div>

(Note: I tried this with the >ul> and <li> tags and it didn't work then either.)

In ATO > Add HTMP / CSS Inserts:

#header_image_sociable {position: absolute; right:40px; top: 20px;}
#header_image_sociable ul {list-style-type: none;}

My site is www.alexiscoram.com. I am using the most updated versions of Atahualpa and WP.

Thanks,

Ally
  #2  
Old Jun 24, 2011, 03:29 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
When I try to view the FB image at the following URL I get nothing
http//www.alexiscoram.com/wp-content/themes/atahualpa/images/fb.gif
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Jun 24, 2011, 04:01 PM
allyevans
 
35 posts · Aug 2010
oops. I corrected it to: /home/photog30/public_html/alexiscoram.com/wp-content/themes/atahualpa/images/fb.gif ... but it's still not showing up.

Ally
  #4  
Old Jun 25, 2011, 12:42 PM
hnbrace
 
7 posts · Aug 2010
I am having the same problems. My website is expealidocious.com

I have this

In ATO > Header Image > Overlay Header Image:

<div id="header_image_sociable">
<ul>
<li><a href="http://www.facebook.com/expealidocious">
<img src="http://expealidocious.com/wp-content/image/fb50.png" alt="Facebook" /></a></li>
</ul>
</div>

In ATO > Add HTML / CSS Inserts > CSS Insert:
#header_image_sociable {position: absolute; right:150px; top: 175px;}
#header_image_sociable ul {list-style-type: none;}

When I click on the icon, nothing happens. Not sure what I am doing. Thank you for your help.
  #5  
Old Jun 25, 2011, 12:51 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
Add a high z-index to the icon. It is "hidden" under the banner image. For example
HTML Code:
#header_image_sociable {position: absolute; right:150px; top: 175px; z-index:99;}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #6  
Old Jun 25, 2011, 01:08 PM
hnbrace
 
7 posts · Aug 2010
Great that worked for me! Thanks so much for your help.
  #7  
Old Jun 25, 2011, 02:44 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
Quote:
Originally Posted by allyevans
oops. I corrected it to: /home/photog30/public_html/alexiscoram.com/wp-content/themes/atahualpa/images/fb.gif ... but it's still not showing up.

Ally
What happens if you use
HTML Code:
http://alexiscoram.com/wp-content/themes/atahualpa/images/fb.gif
and a high z-index?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #8  
Old Jun 27, 2011, 10:09 AM
allyevans
 
35 posts · Aug 2010
I tried that link and nothing changed. I also added a z-index but it still isn't showing up. I feel like I'm missing something really obvious.
  #9  
Old Jun 27, 2011, 10:21 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
One thing I forgot to ask is what version of Atahualpa you are using? If it is 3.6.7 have you applied all the bug fixes per New Versions and Updating?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #10  
Old Jun 27, 2011, 10:28 AM
allyevans
 
35 posts · Aug 2010
Ah...yes I am using the latest and haven't done the bug fixes. Is there a particular bug fix that will impact this specific thing?
  #11  
Old Jun 27, 2011, 11:36 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
I would just apply them all. It's just a matter of replacing three files. We have seen the fixes impact areas other than what they were targeted for.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #12  
Old Jun 27, 2011, 06:42 PM
allyevans
 
35 posts · Aug 2010
I applied all bug fixes but still no joy with this one.

As an alternative, I have added the Facebook link directly into my menu bar. It is working fine but the menu item is positioned below all other menu items...any idea how I would fix this? www.alexiscoram.com

Thanks again for all of you suggestions!
  #13  
Old Jun 27, 2011, 07:07 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Do you actually have the '%image' in your header configuration option?

and it looks like you have two <a...> with the facebook in it

HTML Code:
</table>
<div id="menu1" class="menu-general-container">
<ul id="rmenu2" class="clearfix rMenu-hor rMenu rMenu-hRight">
<li id="menu-item-234" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-234">
<a href="http://www.facebook.com/pages/Alexis-Coram/170999039623087">
<span></span>
</a>
<a href="http://www.facebook.com/pages/Alexis-Coram/170999039623087">Facebook </a>
</l
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #14  
Old Jun 27, 2011, 07:11 PM
allyevans
 
35 posts · Aug 2010
Ha...no I didn't have %image in the configuration. I knew I was missing something simple. Anyhow, I have decided on just including it in the menu bar...I just added a plugin 'page links to' which allows you to add external links in the menu bar. Looks good now.

Thanks for the help guys!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Overlay text on Header Image Marvin Brown Header configuration & styling 4 Mar 26, 2012 08:48 AM
Can not get Overlay Header Image to work robtuk Header configuration & styling 1 Apr 12, 2011 02:07 PM
If I Leave The Logo Image Field Blank, It Displays Broken Image Icon in Header psaltriparus Header configuration & styling 1 Oct 20, 2009 09:30 AM


All times are GMT -6. The time now is 05:02 AM.


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