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] Uploading an image map to header area


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 Apr 19, 2012, 03:54 AM
prooffairy
 
72 posts · Oct 2010
I have created an image map for the banner for a site but don't know how to get the bits of the image etc to upload to the theme.

OK I don't know what I'm doing ... I need to make the email part of the banner on smcsolar.co.uk open up an email programme ... I tried creating an image map but now have 6 bits of image and a HTML page and no idea what to do with them!

I tried adding the following to the Overlay Header Image box in the hope I could maybe make it transparent but still clickable but it doesn't show at all:

<div id="email_link">
<a href="mailto:info@smcsolar.co.uk">Email us now</a>
</div>

Could someone please help me work out how to add a link to the far right of the banner so when people click on the email address they can send an email?

Thanks

Last edited by prooffairy; Apr 19, 2012 at 03:57 AM.
  #2  
Old Apr 19, 2012, 04:12 AM
juggledad's Avatar
juggledad
 
21,945 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
I would NOT use the built in image, I would add a new widget area to the 'Configure Header Area' then add a text widget to the new widget area and put your code in it.
__________________
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

Last edited by juggledad; Apr 19, 2012 at 04:15 AM.
  #3  
Old Apr 19, 2012, 04:27 AM
prooffairy
 
72 posts · Oct 2010
Ah thats a good idea ... how can I position the widget so it's roughly where the email bit on the banner is though?
  #4  
Old Apr 19, 2012, 07:32 AM
lmilesw's Avatar
lmilesw
 
10,047 posts · Jul 2009
Central New York State USA
Just use separate hyperlinked images and position with 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.
  #5  
Old Apr 19, 2012, 08:24 AM
juggledad's Avatar
juggledad
 
21,945 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
or, edit your image and cut out the email portion. Put just the your image in the 'atahualpa/images/header' folder. Now add your code to the "Image overlay' option
HTML Code:
<div id="email_link">
<a href="mailto:info@smcsolar.co.uk">Email us now</a>
</div>
but change the 'v' to an <img...> that points to the little email section you cut out of the image and then position it with CSS
__________________
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
  #6  
Old Apr 30, 2012, 09:12 AM
prooffairy
 
72 posts · Oct 2010
Really struggling to get this to work. The original banner is there but I've done a second version where I've cut out the area with the email and phone number, uploaded that graphic (email.png) to wp-content/my-images and then put the following code in the Overlay Header area (I kept the format exactly as the example on there, just changed the details)

<div id="header_image_sociable">
<ul>
<li><a href="mailto:theemailaddress@iwanttouse.co.uk">
<img src="/wp-content/my-images/email.png" alt="Email" /></a></li>
</ul>
</div>

And in CSS Inserts I added the following (as in the sample, so I could see where the image appeared and play around with it to get the image position right)

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

But the image doesn't appear at all. (Please note that the banner on display now has the email/phone bit on there - because I can' leave it on display without - but the code above should ahve added a second identical graphic somewhere!)
  #7  
Old Apr 30, 2012, 12:55 PM
juggledad's Avatar
juggledad
 
21,945 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
so. teh 'Overlay Header Image' code will over lay the Atahualpa Header Image - the image that gets put there when you use the '%image' in the 'Configure Header Area' option.

So...what do you have in that option?
__________________
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
  #8  
Old May 1, 2012, 03:35 AM
prooffairy
 
72 posts · Oct 2010
I have:

<img src="http://www.smconsult.co.uk/wp-content/themes/atahualpa/images/header/header.png" width="100%" /> <div id="mycatmenu">%cat-center</div> %bar1 <div id="mypagemenu">%page-center</div>
  #9  
Old May 1, 2012, 04:11 AM
juggledad's Avatar
juggledad
 
21,945 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Why aren't you using the %image? And why are you wrapping the %cat and %pages in div's? They will be automatIcally wrapped in div's
__________________
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

Last edited by juggledad; May 1, 2012 at 04:14 AM.
  #10  
Old May 1, 2012, 04:33 AM
prooffairy
 
72 posts · Oct 2010
Image is in <> because I needed it to resize with the page - and this very forum told me to do that! [Note: the resizing is when you make the browser window smaller - changing screen resolution is another thing entirely. JD]

Using divs for menu to make sure the bar stretches across the entire page - again something i read to do on this forum! - but actually the menu now has more items on it so I've deleted the <div>

However, I've just deleted the code round the image and magically the banner seems to be staying the right size now on whatever resolution, so I'm not sure what was going on there - and the overlay is working. Thanks!

Last edited by juggledad; May 1, 2012 at 05:16 AM.

Bookmarks

Tags
header image, image map, link

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Can't get rid of text in logo image area in header area unadoyle Header configuration & styling 2 Sep 2, 2010 04:43 AM
header image as background image for logo area soni Atahualpa 3 Wordpress theme 8 Apr 2, 2010 03:05 AM
Header image area dropping down over the first post area bushtool Header configuration & styling 2 Sep 16, 2009 12:17 PM
Trouble uploading image in a correct format nrc New Versions, & Updating 1 May 5, 2009 10:43 PM


All times are GMT -6. The time now is 01:18 PM.


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