Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   [SOLVED] Uploading an image map to header area (http://forum.bytesforall.com/showthread.php?t=17353)

prooffairy Apr 19, 2012 03:54 AM

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

juggledad Apr 19, 2012 04:12 AM

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.

prooffairy Apr 19, 2012 04:27 AM

Ah thats a good idea ... how can I position the widget so it's roughly where the email bit on the banner is though?

lmilesw Apr 19, 2012 07:32 AM

Just use separate hyperlinked images and position with CSS.

juggledad Apr 19, 2012 08:24 AM

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

prooffairy Apr 30, 2012 09:12 AM

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!)

juggledad Apr 30, 2012 12:55 PM

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?

prooffairy May 1, 2012 03:35 AM

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>

juggledad May 1, 2012 04:11 AM

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

prooffairy May 1, 2012 04:33 AM

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!


All times are GMT -6. The time now is 06:13 PM.

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