new sliding door scheme in different theme?

[jack96]

I have used the sliding door theme as is for one site, and some time ago successfully added the sliding door theme to a different theme (atahualpa). I'd like to again enhance an existing theme (Weaver II Pro) with a sliding door menu. I thought there were once some hints and instructions on using the sliding door menus in another theme on this forum, but can't find them now -- the old link seems to refer to a page that has been removed.

Any suggestions for using the sliding door as implemented in the latest release in another theme? Thanks...

Jack

[wayne]

It would be quite difficult to do that now as the theme has become more complex in order for it to be easy to use for the beginner. (eg incorporating the WordPress menu system, featured images, theme options etc).

The easiest way would be to go back to the original phatfusion 'imagemneu' script and put it in your theme.

You can grab it from here:
http://www.phatfusion.net/projects.html

For how to add it manually to a wordpress theme, go back to one of the very old versions of my slidingdoor theme and see how I did it there. In the earliest versions it was just hard coded in straight from the imagemenu plugin and you had to manually change the URL's in the php files. This will be the easiest way to add it to an existing theme.

Wayne

[jack96]

Thanks Wayne,

That's what I'll do for now. What I'd really like to see is a WordPress plugin to generate a widget containing the sliding door menu... I like you theme, but would like to use the SD menu in some very different looking sites.

Do you have any interest in doing this or helping someone else do it?

Jack Armstrong

[wayne]

It would be quite a task, anyone could give it a go.

I've never written a plugin I'm afraid.

Wayne

[jack96]

OK, I'll tackle creating a sliding doors menu plugin to create a widget that can be used anywhere... I'm starting with the original sliding door code, and I've discovered I have no idea where the "open width" is set... I'm able to change the number of images, image size, and can regulate the closed width, but the open width seems to always be slightly wider than the image size -- a test page is at http://www.highsierradesign.com/WRC/.

Where is the open width set -- I'm only using the original imageMenu.js and imageMenu.css files in addition to the mootools library and an image folder. I just can't seem to set or control the open width -- everything else works fine. Help!

Jack

[wayne]

It's in the 6th line of code in image menu.js - a simple search in text editor will find it.

Code: Select all

var ImageMenu = new Class({
   
   getOptions: function(){
      return {
         onOpen: false,
         onClose: Class.empty,
         openWidth: 200,

[jack96]

I tried changing that and it didn't seem to have any effect -- using FireBug, I can see that the closed width is 120, which is what I specified as width in imageMenu.css, as:

#imageMenu ul li a {
text-indent: -1000px;
background:#FFFFFF none repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;
width:120px;
height: 90px;
margin: 0;
padding: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

I set openWidth in imageMenu.js to 100, as:

var ImageMenu = new Class({

getOptions: function(){
return {
onOpen: false,
onClose: Class.empty,
openWidth: 100,
transition: Fx.Transitions.quadOut,
duration: 400,
open: null,
border: 0
};
},

however, when I hover over an image, it opens 310px, no matter what I set openWidth to -- any ideas? I'm stumped.

Thanks, Jack