Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » FAQ - Atahualpa » Header »

[How To] Replacing the Atahualpa header image with a 'sliding door' image menu


 
Prev Previous Post   Next Post Next
  #1  
Old Aug 5, 2009, 05:07 PM
jack96161's Avatar
jack96161
 
66 posts · May 2009
Information [How To] Replacing the Atahualpa header image with a 'sliding door' image menu

I posted a site I'm doing with the default Atahualpa header image(s) replaced by a 'sliding image menu' and several people have asked how it was done. To see what I'm talking about see http://www.whiteravencenter.org

The 'sliding door image' effect is described at http://www.phatfusion.net/imagemenu/ along with the files my solution was originally developed from. Also, Wayne Connor used this technique in another Wordpress theme -http://mac-host.com/slidingdoor/ and I learned some more from his support forum, especially http://www.mac-host.com/support/view...php?f=10&t=124

How I used it in Atahualpa

First, you need to obtain the image menu HTML, CSS, and image directory, plus the mootools.js file and load them into your .../themes/atahualpa/ directory in a folder imagemenu/ You can get these from the sites mentioned above, or I have a zipped file that contains a complete imagemenu/ directory similar to what I'm using - you can download at http://highsierradesign.com/library/imagemenu.zip
It's password protected - use: username: monami and password: 4monami
Just unzip and install the folder under altahualpa/ - the imagemenu/images/ directory contains the initial images I used - which you will replace with your own...

Now for Atahualpa itself -

To establish links to the imagemenu specific CSS and mootools, use the Atahualpa administration, go to ATO->Add HTML/CSS Inserts->HTML Inserts: Header and add:

HTML Code:
<link rel="stylesheet" type="text/css" media="screen" href="http://www.yourdomain.com/wp-content/themes/atahualpa/imagemenu/imageMenu.css">
<script type="text/javascript" src="http://www.yourdomain.com/wp-content/themes/atahualpa/imagemenu//mootools.js"></script>
<script type="text/javascript" src="http://www.yourdomain.com//wp-content/themes/atahualpa/imagemenu/imageMenu.js"></script>
[be sure to replace 'yourdomain' with, well, your domain!]


Then, to de-activate the default %image and replace it with the imagemenu, go to ATO->Style & edit HEADER AREA->Configure Header Area and replace the current header specification with:

HTML 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.yourdomain.com/yourpage.html">Methods</a></li>
<li class="bk2"><a href="<?php bloginfo('url'); ?>/?cat=2">Services</a></li>
<li class="bk3"><a href="<?php bloginfo('url'); ?>/?cat=1">Workshops</a></li>
<li class="bk4"><a href="<?php bloginfo('url'); ?>/?cat=2">Testimonials</a></li>
<li class="bk5"><a href="<?php bloginfo('url'); ?>/?cat=2">Gallery</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>
This will place the %logo at the top of the page followed by the sliding door imagemenu, using the images named in each <li... statement and clicking on that image when it expands will take the user to the link specified. Notice you can hard-code the links, or align them with categories, etc. You can use more or less sliding panels as you wish. The CSS in ...atahualpa/imagemenu/imageMenu.css controls the formatting of the image menu - modify as appropriate.

Finally, to finish cleaning up the header, set:

Show Blog Title? No
-and-
Show Blog Tagline? No

That's it - easier to do than describe. It could be done differently, like integrating the imagemenu images in the Atahualpa img/ directory or integrating the imageMenu.css directly into Atahualpa so it could be edited with the Wordpress editor, etc., but for now, I like having all the imagemenu stuff separate and in one place, making it easier to upgrade. Note that none of the core Atahualpa files have been altered manually, so these changes should survive updates automatically.

Hope this makes sense - If anyone has trouble getting this to work - drop me an email.

Jack

Last edited by juggledad; Feb 27, 2013 at 08:50 AM. Reason: updated links
 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Replacing Category title with own image mcbanks Sidebars & Widgets 2 Aug 13, 2009 02:07 PM
No header image in Atahualpa 3.4.1 jamaas Header configuration & styling 2 Jul 31, 2009 12:59 PM
[SOLVED] Page Menu on Header image dougfoot Page & Category Menu Bars 3 May 30, 2009 04:37 PM
Replacing the image bar with something else. joe hark Header configuration & styling 2 Mar 17, 2009 04:40 PM
nextGen gallery with image rotator as header image shatchp Header configuration & styling 1 Feb 13, 2009 07:40 PM


All times are GMT -6. The time now is 06:16 AM.


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