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


  #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
  #2  
Old Aug 6, 2009, 05:25 PM
tiber
 
11 posts · Jun 2009
Hello there,

Just throwing a quick note in here to say THANK YOU for taking your time and sharing this. I'm sure you'll have a host of questions headed your way soon.

One initial question from a non-developer guy who's just done some reading - did you encounter any mootools/jquery issues in implementing this? I only ask this as I've noticed that can be an issue in some instances (apparently Featured Content Gallery).

Regards,

Eddie
  #3  
Old Aug 7, 2009, 01:15 AM
jack96161's Avatar
jack96161
 
66 posts · May 2009
Quote:
Originally Posted by tiber
Hello there,

Just throwing a quick note in here to say THANK YOU for taking your time and sharing this. I'm sure you'll have a host of questions headed your way soon.

One initial question from a non-developer guy who's just done some reading - did you encounter any mootools/jquery issues in implementing this? I only ask this as I've noticed that can be an issue in some instances (apparently Featured Content Gallery).

Regards,

Eddie
I haven't seen any problems using mootools/jquery, but I'm not using Featured Content Gallery. If I understand Flynn's 3.4.3 TO DO list (http://forum.bytesforall.com/showthr...light=mootools), there is an issue with the placement of jquery and initiation of mootools that he intends to address in the next release, but I haven't seen a problem with the placement I described in my earlier post. I hope this is not a serious problem, because there are some really interesting things that can be done with mootools.

Jack
  #4  
Old Aug 8, 2009, 09:56 PM
jack96161's Avatar
jack96161
 
66 posts · May 2009
Wow , does being promoted to 'sticky' mean I've arrived?

On the topic of jquery conflicts, I discovered a wonderful (and current) discourse on using jquery in Wordpress - http://digwp.com/2009/06/including-j...the-right-way/

The author makes some thoughtful and useful points, and some of the comments are useful as well. Now I have to go back and look at my work and see how many copies of jquery are getting loaded with my pages, and how to avoid conflicts. I think it was just dumb luck I avoided problems with the header modification described above.

Jack
  #5  
Old Aug 15, 2009, 02:44 AM
myat
 
2 posts · Apr 2009
Yangon, Myanmar
Thank you very much for a very useful post. I saw the sliding door header first on the "Sliding Door" wordpress theme, and was wondering how I could implement it on my blog. After reading your forum post yesterday, I tested it on the blog on my local machine. It was wonderful. Now, I have implemented it on my blog online. Please see the sliding door category header at Myanmar Today website.
  #6  
Old Aug 15, 2009, 08:54 PM
jack96161's Avatar
jack96161
 
66 posts · May 2009
Very nice implementation and a beautiful site! Glad it worked out for you.

Jack
  #7  
Old Aug 16, 2009, 05:10 PM
datatel360
 
6 posts · Aug 2009
Atlanta
Jack,

Very Kool! I am new and been working on this less than a week. Really need a killer header, any thoughts? What I do is very competitive here in Atlanta.

Thanks.

http://alliantdatatel.com

Michael
770.441.9999 x307
  #8  
Old Aug 17, 2009, 03:02 AM
jack96161's Avatar
jack96161
 
66 posts · May 2009
For anyone who tries this sliding menu trick, I have a warning - this feature uses the mootools library and if you later use another feature or plugin that also uses mootool, you may wind up with two copies and they seriously get in each other's hair. In the Plugins & Atahualpa part of this forum, I describe just such an experience - and a solution. See http://forum.bytesforall.com/showthr...2850#post12850.

In my original post above, I add some HTML to the Atahualpa header:
<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>
The second statement there loads the mootools library used by the sliding door menu. The new gallery WP plugin I added later also used mootools, but a newer version and an additional library as well, so I changed the lines above to:
<link rel="stylesheet" type="text/css" media="screen" href="http://www.highsierradesign.com/testsite/whiteravencenter/wp-content/themes/atahualpa342/imagemenu/imageMenu.css">
<script type='text/javascript' src='http://www.highsierradesign.com/testsite/whiteravencenter/wp-content/plugins/superslider-show/js/mootools-1.2.3-core-yc.js?ver=1.2.3'></script>
<script type='text/javascript' src='http://www.highsierradesign.com/testsite/whiteravencenter/wp-content/plugins/superslider-show/js/mootools-1.2.3.1-more.js?ver=1.2.3'></script>
<script type="text/javascript" src="http://www.highsierradesign.com/testsite/whiteravencenter/wp-content/themes/atahualpa342/imagemenu/imageMenu.js"></script>
This works for both the sliding menu and my new gallery plugin - which fortunately has an option to prevent it from loading the same libraries itself. Other mootool using plugins may have to be modified manually to disable loading another copy.

Jack
  #9  
Old Aug 23, 2009, 07:59 AM
elysium
 
3 posts · Aug 2009
Hi Jack

I have just tried to download this from you thread many times but it does not allow me !!??

"you can download at http://highsierradesign.com/library/imagemenu.zip
It's password protected - use: username: monami and password: 4monami "

Did you change the password and username?

Regards
Ray
  #10  
Old Dec 29, 2009, 09:02 AM
MrStark
 
27 posts · Dec 2009
Wow that look great!

BUT, I cant get it right... on my site it looks like this.. http://wptest.frodem.no/ all the shortcuts / links are on the left side and no img's.. what have I done wrong?

mrStark

Problem solved

My atahualpa folder had the name : atahualpa344 (<-- the files did NOT have 344) Added 344 to all the files in the Add HTML/CSS Inserts->HTML Inserts: Header and add

Its ok now, just changing img's and urls now

Last edited by MrStark; Dec 29, 2009 at 10:31 AM.
  #11  
Old Dec 29, 2009, 10:51 AM
jack96161's Avatar
jack96161
 
66 posts · May 2009
Glad to hear that's all it was -- I'm very busy today but will take a closer look this evening (US West coast time). I may have a few improvements in the technique to suggest.

Jack
  #12  
Old Dec 29, 2009, 11:02 AM
MrStark
 
27 posts · Dec 2009
This was my bad

I working on this now, finding me new imgs and fixing the urls. Thanks for great tool.

Here in cold Norway, its 19.05 at night

FM
  #13  
Old Dec 29, 2009, 08:01 PM
jack96161's Avatar
jack96161
 
66 posts · May 2009
Well, here in cold California (-6C at the moment)* it is 1900 on 29 December, which I believe is 0400 30 December in Norway -- I have another new site that uses this technique you might want to check out:
http://www.raceskitrader.com/

Jack
[*Not all of California, just at 3,000m in the Sierra mountains where I am now. Going skiing tomorrow!!]
  #14  
Old Dec 30, 2009, 08:04 AM
MrStark
 
27 posts · Dec 2009
Hi

My page, wptest.frodem.no is just as you can see of url, a test page But, how to move the header a little more to the right? picture size I guess is just to resize them a little?

MrStark

I want it too look like this, only a little bigger, look attachment. How to do this? So that the sliding images and the rest of the blog.
Attached Thumbnails
Click image for larger version

Name:	wp-atahualpa.jpg
Views:	1457
Size:	112.7 KB
ID:	339  

Last edited by MrStark; Dec 30, 2009 at 11:29 AM.
  #15  
Old Jan 9, 2010, 04:54 AM
keiko
 
5 posts · Dec 2009
In France.
Hello

Thank you for your code !

And sorry for my bad english...

I'd like this menu (for my 3 categories) in my sidebar. I use a widget that permit to insert php code in my sidebar and your code takes well effect. The problem is the little grey line due to the balise <ul>. But if i delete this balise, there are no image.

Should you help me ?

Thank you in advance !
  #16  
Old Jan 9, 2010, 11:04 AM
jack96161's Avatar
jack96161
 
66 posts · May 2009
Your English is fine but my French is terrible - I think 'balise' is 'tag' in English, right?

I'm not sure what grey line you mean, could you give me a link to the page or describe what you have in your <ul> .... </ul> tags>?

I'm interested in how you did this in a sidebar!

Jack
  #17  
Old Feb 18, 2010, 11:09 AM
krystyna
 
121 posts · Apr 2009
This was a useful thread, and I made a fabulous header using the instructions. Thanks!

What I'd like to know is how to leave the active page image open in the slider. For example, if you're on the "Services" page, how can I change the script or CSS to keep that slider image open when visitors are on that page?
  #18  
Old Jan 14, 2011, 12:18 PM
ortixia
 
48 posts · Nov 2009
Salt Spring Island, BC, Canada
I have just upgraded to Atahualpa 3.6.1 and my 'sliding door images have stopped sliding. I am in the midst of troubleshooting this right now. (i have the latest wordpress install)

If anyone is having the same problem and can offer some guidance, it would be sincerely appreciated. It is pretty urgent that i fix this. As our organization site is down on maintenance mode until I fix it. Will update info here as i get it.

took maintenance mode off.. website address is www.terralingua.org/bcdconservation

Last edited by ortixia; Jan 14, 2011 at 12:30 PM.
  #19  
Old May 6, 2011, 06:51 AM
simseuss
 
13 posts · Jun 2010
Just wondering if you can place the sliding menu on the same line as the logo as you suggested you may try.
  #20  
Old May 16, 2012, 09:08 AM
arie_ds
 
6 posts · Jan 2011
I cant really find the image menu HTML, CSS, and image directory, plus the mootools.js file. Anyone can help me?

Thanks
Arie
  #21  
Old May 16, 2012, 09:14 AM
juggledad's Avatar
juggledad
 
23,536 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
go to http://www.phatfusion.net/ and follow the link there
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #22  
Old May 17, 2012, 07:41 AM
arie_ds
 
6 posts · Jan 2011
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
Attached Thumbnails
Click image for larger version

Name:	1.gif
Views:	725
Size:	55.3 KB
ID:	1875  

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 09:38 PM.


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