Wordpress Themes - WP Forum at BFA - [How To] Replacing the Atahualpa header image with a 'sliding door' image menu

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Header (http://forum.bytesforall.com/forumdisplay.php?f=43)

- - [How To] Replacing the Atahualpa header image with a 'sliding door' image menu (http://forum.bytesforall.com/showthread.php?t=2837)

And thank you for taking the time to test some other possibilities ortixia. Glad you are working.

hello

From doing all what's in this post, I thought I could do it. But I'm stuck at some point.

From Firebug, I can tell the divs are here, but the pics don't appear.

Here's the website url : www.chantez-marmites.com

Seems to me I couldn't find how to properly link my images to the function.

Here's my code in Configure Header Area :

PHP Code:


		
			
%logo <div id="imageMenu">

<ul>

<!-- THESE ARE THE LINKS YOU GO TO WHEN YOU CLICK ON A SLIDING DOOR IMAGE-->

<!-- change the href to look like this: <a href="yourlink.com"> -->

<li class="bk1"><a href="http://www.chantez-marmites.com/presentation">Presentation.jpg</a></li>

<li class="bk2"><a href="http://www.chantez-marmites.com/cours-de-cuisine">Cours-de-cuisine.jpg</a></li>

<li class="bk3"><a href="http://www.chantez-marmites.com/qui-etes-vous">Qui-etes-vous.jpg</a></li>

<li class="bk4"><a href="http://www.chantez-marmites.com/temoignages">Temoignages.jpg</a></li>

<li class="bk5"><a href="http://www.chantez-marmites.com/tarifs">Tarifs.jpg</a></li>

<li class="bk6"><a href="http://www.chantez-marmites.com/contact">Contact.jpg</a></li>



</ul>

</div>



<script type="text/javascript">

window.addEvent('domready', function(){

var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:275, border:2, onOpen:function(e,i){location=(e);}});

});

</script>

And here's my HTML insert / Header

HTML Code:

<link rel="stylesheet" type="text/css" media="screen" href="http://www.chantez-marmites.com/

wp-content/themes/atahualpa/imagemenu/imageMenu.css">

<script type="text/javascript" src="http://www.chantez-marmites.com/

wp-content/themes/atahualpa/imagemenu//mootools.js"></script>

<script type="text/javascript" src="http://www.chantez-marmites.com//

wp-content/themes/atahualpa/imagemenu/imageMenu.js"></script>

Could you pls give me a hint ?

Thanks

Pierre

did you edit the css file to include the file paths of your new images?

I've just found out, my bad, but this is key :

Edit imagemenu.css and replace image names by your own image names.

Thanks a lot Firebug ;o)

thanks a lot ortixia, I just did.

And it now works fine.

Have a nice day (here it's 7 PM, I'm about to call it a day, a nice and sunny one, in my office)

Pierre

Would you have any idea on how to have my logo (the marmite) aligned horizontally with the sliding doors please ?

Would make me a nice day ending on that one !

Thanks

my apologies... where do you want the logo? beside the sliding doors? i have your site up.. if its beside i would be tempted to sneak it into the div, in my site that runs the sliding door www.terralingua.org/bcdconservation, i put the logo in bar1

hello Ortixia

Great website that you have, plus I'm really keen on the subject, as I'm also working for an fundation that tries to help farmers protect the earth micro-biology (ie all the life that's inside the ground) and promote local food.

What I meant was (sorry about my English), I'd like to have my site logo and the sliding-doors beside each other (logo left and sliding doors centered on the right hand side of the logo).

I couldn't make it happen in Firebug, using margins or paddings...

I'll try again this morning.

Thanks again (if you can think of something to help me out, even better)

Play around with these settings. You may also have to do something about the search and RSS stuff

HTML Code:

#imageMenu {

    position: relative;

    left: 200px;



#logoarea .logo {

    position: relative;

    top: 200px;

}

Hi Larry

You're making me get better at Atahualpa every day (starting from scratch) ; thanks to all of you guys on the forum.

thanks a lot.

Good looking site Pierre!

Thanks Runnerb0y, still a lot to be done...

I will pick colors from Kuler (adobe) and get rid of the second search box, then add a horizontal banner next to the marmite, and add social / newsletter / etc stuffings. Then pages and posts contents to be SEO rewritten...

It's never "quite" finished it is? Best of luck with your ongoing changes. You're certainly off to a great start!

Oh man, how cool is this then! Thank you, thank you, thank you!

I adapted the css and images for my site http://www.3gz.com/. Desgin wise it does not go well with the header. I will change that later on, but for now ... keep on slidin'!

Just wondering if you can place the sliding menu on the same line as the logo as you suggested you may try.

I cant really find the image menu HTML, CSS, and image directory, plus the mootools.js file. Anyone can help me?

Thanks
Arie

go to http://www.phatfusion.net/ and follow the link there

Thank you for the reply, I have followed the link but I cant find a mootool.js. Should I download it in here?

http://mootools.net/

Also, my result is look like this (attached). I dont know what's wrong. Please advise, I am sorry, completely noob.

Thank you
Arie