Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

[SOLVED] Header Image Overlay not displaying


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Nov 8, 2011, 11:26 AM
jms5017's Avatar
jms5017
 
51 posts · Jul 2010
NY/NJ Metro area
[SOLVED] Header Image Overlay not displaying

I am trying to use the header image overlay to place the company logo in the upper right corner of each page. (Because I wasn't able to find the right combination of CSS to keep the page menu in the upper left section of the page and the logo in the upper right )
The code I inserted in the Header image overlay is:
<div id="logo_overlay">

<li><a href="http://www.jkstest.info">
<img src="/wp-content/themes/atahualpa/images/logo.png" alt="Home Page" /></a></li>

</div>
#logo_overlay { position: absolute; right: 810px; top: 5px; }

The logo is in the images folder, I checked the path name, but the logo doesn;t appear. Even more confusing is that when I test the page and do a "find" for "logo_overlay" I get no match
site is
jkstest.info.
Logo should be on top of the radial light and shadow in upper right corner. The page menu is
(more or less) where it should be.
What did I do wrong? Thanks!
  #2  
Old Nov 8, 2011, 11:50 AM
juggledad's Avatar
juggledad
 
21,935 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
The header image overlay will only work if you are using the %image in the header configuration area.
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #3  
Old Nov 8, 2011, 12:00 PM
lmilesw's Avatar
lmilesw
 
10,046 posts · Jul 2009
Central New York State USA
Two things... Since this is an image and not a list item you could use this code.
HTML Code:
<div id="logo_overlay">
<a href="http://www.jkstest.info">
<img src="/wp-content/themes/atahualpa/images/logo.png" alt="Home Page" /></a>
</div>
And more importantly the following should go in the CSS Inserts box.
HTML Code:
#logo_overlay { position: absolute; right: 810px; top: 5px; }
__________________
~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.
  #4  
Old Nov 8, 2011, 02:54 PM
jms5017's Avatar
jms5017
 
51 posts · Jul 2010
NY/NJ Metro area
Thanks, Miles,
I've been unsuccessfully trying different options using the logo area, header, etc, so I am grateful for your suggestion. What is the "absolute" in the CSS override relative to? In the comp layout, the left edge of the logo is 824 px from the left edge of the page....but specifying 824 px puts the logo closer
to the center of the page. See jkstest.info
I set the max width of the page menu bar to 700 px...is that causing a problem?
  #5  
Old Nov 8, 2011, 03:44 PM
lmilesw's Avatar
lmilesw
 
10,046 posts · Jul 2009
Central New York State USA
I am really not clear on what you are trying to do. Absolute is relative to a relatively positioned containing div. All this absolute and relative stuff can get a bit convoluted which makes Firebug in invaluable asset. I usually use that for virtually testing CSS.
__________________
~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 Nov 10, 2011, 12:00 PM
jms5017's Avatar
jms5017
 
51 posts · Jul 2010
NY/NJ Metro area
I'm trying to get the logo that you see in the upper right side of the home page to render as it is shown now at jkstest.info Its rendering properly now because its in the bg image for the entire top half of the page that is loaded via ATA> Style & Configure layout> Layout container style where I added the code:
padding: 0;
background: url(/wp-content/themes/atahualpa/images/neturalbg.jpg) no-repeat center top;

So it looks right, but I now I'm trying to figure out how to make the blue logo in the upper right corner clickable to the home page. I've been reading about "hotspots" wondering if I can define a hotspot for the upper right corner, and somehow set the image visibility in the hotspot to "hidden".

The alternative is to take the blue logo off of the top half of the background image and attempt once again to position it properly using a the #logo_overlay with an absolute position....what do you think?
  #7  
Old Nov 10, 2011, 02:32 PM
jms5017's Avatar
jms5017
 
51 posts · Jul 2010
NY/NJ Metro area
The header image has to be uploaded to the /wp-content/themes/atahualpa/images/header folder.
You include the image by going to Atahualpa theme options -> Style and edit header area -> and then make sure that %image is included in the list of elements that you selected.
Good luck, I know what you are going through. I'm far from an expert, but little by little, I have come to appreciate how powerful and flexible this theme is.....Now if I could only figure out my own problems!
  #8  
Old Nov 10, 2011, 02:42 PM
lmilesw's Avatar
lmilesw
 
10,046 posts · Jul 2009
Central New York State USA
Quote:
Originally Posted by jms5017
I'm trying to get the logo that you see in the upper right side of the home page to render as it is shown now at jkstest.info
The way I do this is to put the code for a hyperlinked image in the Configure Header Area box. The code would be
HTML Code:
<div id="logo_overlay"><a href="http://www.jkstest.info"><img src="/wp-content/themes/atahualpa/images/logo.png" alt="Home Page" /></a></div>
Then I would use CSS in the CSS Inserts box SOMETHING like the following
HTML Code:
#logo_overlay {
position: relative;
height: 0;
top: 30px;
left: 600px;
}
All those pixel dimensions would be dependent on your particular situation.
__________________
~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.

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
[SOLVED] Header image overlay color not displaying xtremetoonz New Versions, & Updating 5 May 22, 2011 02:39 PM
Can not get Overlay Header Image to work robtuk Header configuration & styling 1 Apr 12, 2011 02:07 PM
How to get logo image overlay with header image debeerj Header configuration & styling 1 Feb 2, 2010 06:23 AM


All times are GMT -6. The time now is 03:19 AM.


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