Adding UDM4 to EE2

[Pekka]

UDM is very good UL nested dropdown menu system. EE supports any UL menu for UDM there is also a default style and header file. UDM is commercial software and so cannot be included with EE, you will have to install it separately. All you need to do is:

1. Download UDM 4.5 from http://www.udm4.com/licensing/download/
-----------------
2. extract the downloaded UDM 4.5 package to a temporary folder
-----------------
3. make a new folder "udm" (without quotes) under EE root folder
-----------------
4. copy from extracted UDM 4.5 package: "/udm4-php/udm-resources/udm-custom.ini" to "udm" folder
-----------------
5. copy from extracted UDM 4.5 package: "/udm4-php/udm-resources/udm-style.php" to "udm" folder
-----------------
6. copy from extracted UDM 4.5 package: "/udm4-php/udm-resources/udm-dom.php" to "udm" folder
-----------------
7. Open udm/udm-dom.php to text editor and change lines

//set a path to the configuration file
$config = $_SERVER['DOCUMENT_ROOT'] . '/udm4-php/udm-resources/udm-custom.ini';

to

//set a path to the configuration file
$config = 'udm-custom.ini';
-----------------
8. Open udm/udm-style.php to text editor and change lines

//set a path to the configuration file
$config = $_SERVER['DOCUMENT_ROOT'] . '/udm4-php/udm-resources/udm-custom.ini';

to

//set a path to the configuration file
$config = 'udm-custom.ini';
-----------------

9. To set fonts, colors and behaviours of the menu you need to edit "udm/udm-custom.ini". See below.

PLEASE NOTE: Remember to honor UDM/Brothercake licence that applies to your UDM installation.
UDM or any other dropdown menu display systems are not under EE licence!

-----------------

10. in EE 2 select style "Gray XHTML with UDM4" for every exhibition and also as global style. Then replace current header file with "header_UDM4.php".

Now your EE should have top menu something like you see in http://photography-on-the.net/gallery/index.php


Menu configuration used on EE demo site

Open udm/udm-custom.ini to text editor and change the main sections

CORE CONFIGURATION
NAVBAR DEFAULT STYLES
MENU DEFAULT STYLES

to

/************************************************** *************\
* CORE CONFIGURATION
\************************************************* **************/


//http path to images folder (from the web root, not the server root)
$um['baseSRC'] = 'udm/';


//initialization trigger element ["id"]
$um['trigger'] = 'exhibit_engine';


//navbar orientation
$um['orientation'] = array(
'vertical', // alignment ["vertical"|"horizontal"|"popup"|"expanding"]
'left', // h align ["left"|"right"]
'top', // v align ["top"|"bottom"]
'absolute', // positioning ["relative"|"absolute"|"fixed"|"allfixed"]
'27px', // x position ["em"|"ex"|"px"|"0"]
'0', // y position ["em"|"ex"|"px"|"0"]
'1000' // z order ["0" to "10000"] (menu takes 20000 headroom)
);


//navbar list output
$um['list'] = array(
'rigid', // horizontal overflow ["rigid"|"flexible"]
'yes', // -SPARE-
'no' // -SPARE-
);


//menu behaviors
$um['behaviors'] = array(
'300', // open timer ["milliseconds"|"0"]
'400', // close timer ["milliseconds"|"never"|"0"]
'yes', // reposition menus to stay inside the viewport ["yes"|"no"]
'default' // manage windowed controls for win/ie ["default","hide","iframe","none"]
);


//reset behaviors
$um['reset'] = array(
'yes', // reset from document mouse click ["yes"|"no"]
'yes', // reset from window resize ["yes"|"no"]
'yes', // reset from text resize ["yes"|"no"]
'no' // reset after following link ["yes"|"no"]
);


//horizontal continuation strip
$um['hstrip'] = array(
'none', // background ["color"|"#hex"|"rgb()"|"image.gif"|"none"]
'yes' // copy item margin-right to margin-bottom ["yes"|"no"]
);






/************************************************** *************\
* NAVBAR DEFAULT STYLES
\************************************************* **************/


//styles which apply to the navbar
$um['navbar'] = array(
'-6', // nav -> menu x-offset (+-)["n" pixels]
'12', // nav -> menu y-offset (+-)["n" pixels]
'7.5em' // width ["em"|"ex"|"px"] (vertical navbar only - horizontal navbar items have "auto" width) ("%" doesnt work right)
);


//styles which apply to each navbar item
$um['items'] = array(
'0', // margin between items ["n" pixels]
'0', // border size ["n" pixels] (single value only)
'separate', // border collapse ["collapse"|"separate"] (only applies when margin = "0")
'#999999 #999999 #666666 #666666', // border colors ["color"|"#hex"|"rgb()"] (single, double or four values)
'solid', // border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"] (single, double or four values; be careful with using "none")
'#999999 #999999 #666666 #666666', // hover/focus border colors ["color"|"#hex"|"rgb()"] (single, double or four values)
'solid', // hover/focus border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"] (single, double or four values; be careful with using "none")
'#999999 #999999 #666666 #666666', // visited border colors ["color"|"#hex"|"rgb()"] (single, double or four values)
'solid', // visited border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"] (single, double or four values; be careful with using "none")
'9', // left/right padding ["n" pixels] (single value only)
'4', // top/bottom padding ["n" pixels] (single value only)
'#000000', // background ["color"|"#hex"|"rgb()"|"image.gif"]
'#25323f', // hover/focus background ["color"|"#hex"|"rgb()"|"image.gif"]
'#000000', // visited background ["color"|"#hex"|"rgb()"|"image.gif"]
'12px', // font size ["em"|"ex"|"%"|"px"|"pt"|"absolute-size"|"relative-size"]
'Trebuchet MS,tahoma,sans-serif', // font family ["font1,font2,font3"] (always end with a generic family name)
'bold', // font weight ["normal"|"bold"|"bolder"|"lighter|"100" to "900"]
'none', // text decoration ["none"|"underline"|"overline"|"line-through"]
'left', // text-align ["left"|"right"|"center"]
'#ffffff', // color ["color"|"#hex"|"rgb()"]
'#eeffcc', // hover/focus color ["color"|"#hex"|"rgb()"]
'#ffffff', // visited color ["color"|"#hex"|"rgb()"]
'normal', // font-style ["normal"|"italic"|"oblique"]
'normal', // hover/focus font-style ["normal"|"italic"|"oblique"]
'normal', // visited font-style ["normal"|"italic"|"oblique"]
'letter-spacing:1px !important;', // additional link CSS (careful!)
'', // additional hover/focus CSS (careful!)
'', // additional visited CSS (careful!)
'', // menu indicator character/image ["text"|"image.gif"|"none"]
'', // menu indicator rollover character/image ["text"|"image.gif"|"none"] (must be same type)
'7', // clipping width of indicator image ["n" pixels] (only when using image arrows)
'..' // alt text of indicator image ["text"] (only when using image arrows)
);




/************************************************** *************\
* MENU DEFAULT STYLES
\************************************************* **************/


//styles which apply to each menu
$um['menus'] = array(
'-7', // menu -> menu x-offset (+-)["n" pixels]
'-15', // menu -> menu y-offset (+-)["n" pixels]
'2', // border size ["n" pixels] (single value only)
'#999 #999 #666 #666', // border colors ["color"|"#hex"|"rgb()"] (single, double or four values)
'solid', // border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"] (single, double or four values; be careful with using "none")
'180px', // width ["em"|"ex"|"px"]
'2', // padding ["n" pixels] (single value only)
'#45627f', // background ["color"|"#hex"|"rgb()"|"image.gif"]
'', // additional menu CSS (careful!) (you can use a transition here but *not* a static filter)
'#000000', // shadow background ["color"|"#hex"|"rgb()"|"image.gif"|"none"]
'3px', // shadow offset (+-)["em"|"ex"|"px"|"%"|"0"]
'filter:alpha(opacity=50);' // additional shadow layer CSS (if you use a Microsoft.Shadow filter here then Win/IE5.5+ will do that *instead* of default shadow)
);


//styles which apply to each menu item
$um['menuItems'] = array(
'0', // margin around items ["n" pixels] (single value only; margins are like table cellspacing)
'0', // border size ["n" pixels] (single value only)
'separate', // border collapse ["collapse"|"separate"] (only applies when margin = "0")
'#333333', // border colors ["color"|"#hex"|"rgb()"] (single, double or four values)
'solid', // border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"] (single, double or four values; be careful with using "none")
'#aca', // hover/focus border colors ["color"|"#hex"|"rgb()"] (single, double or four values)
'solid', // hover/focus border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"] (single, double or four values; be careful with using "none")
'#333333', // visited border colors ["color"|"#hex"|"rgb()"] (single, double or four values)
'solid', // visited border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"] (single, double or four values; be careful with using "none")
'5', // left/right padding ["n" pixels] (single value only)
'0', // top/bottom padding ["n" pixels] (single value only)
'transparent',// background ["color"|"#hex"|"rgb()"|"image.gif"]
'#25323f', // hover/focus background ["color"|"#hex"|"rgb()"|"image.gif"]
'transparent', // visited background ["color"|"#hex"|"rgb()"|"image.gif"]
'10px', // font size ["em"|"ex"|"%"|"px"|"pt"|"absolute-size"|"relative-size"]
'Trebuchet MS,tahoma,sans-serif', // font family ["font1,font2,font3"] (always end with a generic family name)
'normal', // font weight ["normal"|"bold"|"bolder"|"lighter|"100" to "900"]
'none', // text decoration ["none"|"underline"|"overline"|"line-through"]
'left', // text-align ["left"|"right"|"center"]
'#fff', // color ["color"|"#hex"|"rgb()"]
'#ffffee', // hover/focus color ["color"|"#hex"|"rgb()"]
'#fff', // visited color ["color"|"#hex"|"rgb()"]
'normal', // font-style ["normal"|"italic"|"oblique"]
'normal', // hover/focus font-style ["normal"|"italic"|"oblique"]
'normal', // visited font-style ["normal"|"italic"|"oblique"]
'', // additional link CSS (careful!)
'', // additional hover/focus CSS (careful!)
'', // additional visited CSS (careful!)
'>', // submenu indicator character/image ["text"|"image.gif"|"none"]
'>', // submenu indicator rollover character/image ["text"|"image.gif"|"none"] (must be the same type)
'3', // clipping width of indicator image ["n" pixels] (only when using image arrows)
'..' // alt text of indicator image ["text"] (only when using image arrows)
);

[GvdM]

Hi Pekka,

I followed these directions exactly. Could you look at my site and see what I did wrong?

http://exhibit.phototroph.net

thanks
George

[Pekka]

Your UDM files are not in the right folder:

http://exhibit.phototroph.net/udm/udm-custom.ini
http://exhibit.phototroph.net/udm/udm-style.php
http://exhibit.phototroph.net/udm/udm-dom.php

give all 404 NOT FOUND error.

[GvdM]

yup, I fat fingered the directory when I named it, I had it as /umd instead of /udm

All is well now, thanks.

[bfreas]

Where in EE do I "replace current header file with "header_UDM4.php"? I didn't see it on the Styles page (or anywhere else that I looked). Is this just an oversight on my part?

[Pekka]

Where in EE do I "replace current header file with "header_UDM4.php"? I didn't see it on the Styles page (or anywhere else that I looked). Is this just an oversight on my part?

In gallery root.

[bfreas]

OK....I wasn't thinking in terms of actually "replacing the file", but rather replacing references to it in the styles. I've got it now :)

[calvorn]

Pekka:
I am trying to figure out why I can't just replace header.php in my custom style with the UDM header file you created but that doesn't seem to work.

What am I missing?

Cal

[jeronimo]

Did you selecht the style WITH Udm in you admin pannel?
Otherwise itt wil not work.

[calvorn]

No, I did not but I don't want to use that style. I have my own style. I am trying to figure out how to get it to work with my style.

[jeronimo]

this style with UDM4 links css also to the UDM style sheet, and somewhere near the footer there is also someting.

If you use this style you can find out if things are on the propper location etc.
Then if this is a check, you can start modding this style sheet. So you have your own working stylesheet WITH UDM4

good luck
jeronimo

[rbachl]

After following precisely the description in this thread for the installation of udm, I have obtained a udm menu that is fixed (no mouseover or popup effect). What am I missing here?
The problem occurs with different browsers, therefore I believe that I must have done something wrong with the installation. I am having a fresh EE2 and udm installation.

Pekka: From the edited text for udm/udm-custom.ini, is there a special reason for the following (maybe I need to copy some more files to webroot/udm?) :
/************************************************** *************\
* CORE CONFIGURATION
\************************************************* **************/
//http path to images folder (from the web root, not the server root)
$um['baseSRC'] = 'udm/';


Thank you for any hints or suggestions.

[rbachl]

When looking at the source code generated by EE2, everything seems to be ok. In particular, the following lines are included:

(----snippet 1-----)
<link rel="stylesheet" type="text/css" media="screen,projection" href="udm/udm-style.php" />

(----snippet 2-----)
<ul id="udm" class="udm" ><li><a href="./index.php?ee_lang=eng&amp;u=">Browse&nbsp;Galleries&nbsp;</a><ul><li><a href="list.php?exhibition=1&amp;u=&amp;ee_lang=eng" title="1 photo">First exhibition</a></li><li><a href="./" title="--------------------------------">--------------------------------</a></li><li><a href="./guestbook.php?u=&amp;ee_lang=eng" title="Guestbook">Guestbook</a></li><li><a href="./news.php?u=&amp;ee_lang=eng" title="News">News</a></li><li><a href="./list.php?exhibition=all&amp;select_output=ratings&amp;u=&amp;e e_lang=eng" title="Browse Ratings">Browse Ratings</a></li><li><a href="./sitemap.php?u=&amp;ee_lang=eng" title="Gallery Map">Gallery Map</a></li><li><a href="./gear.php?u=&amp;ee_lang=eng" title="Gear List">Gear List</a></li><li><a href="./comments.php?u=&amp;ee_lang=eng" title="Photo Comment Browser">Photo Comment Browser</a></li></ul></li></ul>

(----snippet 3-----)
<script type="text/javascript" src="udm/udm-dom.php"></script>

udm-dom.php, udm-style.php and udm-custom.ini are all readable and located in the udm subdirectory of gallery.

Everything looks good, except that the menu display is fixed rather than mouseover/popup. Maybe this is some udm configuration that I am missing then?

[rbachl]

This sample page shows that udm4 is not working for me:

http://wanderlust.webhop.org/EE2

[jeronimo]

In the admin section you should select the UDM4 stylesheet

[rbachl]

Yes, thank you. I have selected the UDM4 stylesheet in the admin section,
but it is not working.