Hello,

I have some issues with styling my menu, even though some things may be very easy to solve. Also some may have already been discussed, but I couldn't find the right thread (sorry). I'm using the ARI Ext Menu since the old menu (www.evo-it.nl) on Joomla1.5 is not compatible to Joomla2.5+.


The new test website: www.evo-it.nl/evo-it_testsite/Joomla25/

Issues:
1. The main menu level should have a background image. I managed to do that per item, however i'd rather like an overall solution.
.ux-menu LI.ux-menu-item105>a.current
{
background: transparent url(templates/theme576_joomla25/images/menu_bg_left.gif); !important
}

2. I want to have the vertical-alignment of the text at the bottom. (See difference between the old and test web site)
3. The sub-menu is not aligned with the background of menu level 0. (horizontal and vertically)
4. Each level-0 menu item consists of two background image. One at the left side and one at the right. (Also see difference between the old and test site)
5. I would like to change the blue arrows at 'OVER ONS' and 'OPLOSSINGEN' Where can that images?


Thank you in advance,

Jan


/* CSS Document */

.ux-menu
{
zoom:0;
position:absolute;
top:164px;
z-index:90;
margin-left: auto;
margin-right: auto;
width:984px;
height:57px;
background-image:url(templates/theme576_joomla25/images/menu_bg.gif);
vertical-align:text-bottom;!important;
}
.ux-menu LI A.ux-menu-link-level-0
{

background: transparent none;
border-style: none;!important;
margin-right: 19px;
margin-left: 19px;
height: 25px;
}

ul.ux-menu LI.ux-menu-level-0>a.current
{

background: transparent url(templates/theme576_joomla25/images/menu_bg_left.gif); !important
}




.ux-menu LI A.ux-menu-link-hover
{

background: transparent url(templates/theme576_joomla25/images/menu_bg_left.gif);

}

Hello,

Information about menu HTML layout and CSS classes can be found here. Menu images are located in the following folder:

<joomla_directory>\modules\mod_ariextmenu\mod_ariextmenu\js\css\images\

It can be used to customize menu.

Regards,
ARI Soft

Thank you for your response. The menu is 'ok' for now.

Things I've changed using CSS:
- main position and background
- Arrows of menu-0 a bit downwards
- Text of menu 0 to the bottom
- Two images in one CSS box at menu0 (current and hover)
- and some other marginal changes


CSS code (without comments..):


.ux-menu
{
zoom:0;
position:absolute;
top:164px;
z-index:90;
margin-left: auto;
margin-right: auto;
width:984px;
height:57px;
background-image:url(templates/theme576_joomla25/images/menu_bg.gif);
}

.ux-menu LI A.ux-menu-link-level-0
{
background: transparent none;
border-style: none;!important;
height: 25px;
}

.ux-menu LI A.ux-menu-link-level-0 .ux-menu-arrow
{
top: 26px;
}

ul.ux-menu LI.ux-menu-item-main
{
background: transparent none;
border-style: none;!important;
margin-right: 18px;
margin-left: 18px;
}

ul.ux-menu LI.ux-menu-item-main>a
{
display: table-cell;
vertical-align: bottom;
}


ul.ux-menu LI.ux-menu-item-main>a.current
{
background-image: url(templates/theme576_joomla25/images/alt1menu_bg_right.gif), url(templates/theme576_joomla25/images/menu_bg_left.gif);
background-position: right top,left top;
background-repeat: no-repeat;
}

.ux-menu LI a.ux-menu-link-level-0:hover
{
background-image: url(templates/theme576_joomla25/images/alt1menu_bg_right.gif), url(templates/theme576_joomla25/images/menu_bg_left.gif);
background-position: right top,left top;
background-repeat: no-repeat;
}

.ux-menu LI a.ux-menu-link-hover
{
background-image: url(templates/theme576_joomla25/images/alt1menu_bg_right.gif), url(templates/theme576_joomla25/images/menu_bg_left.gif);
background-position: right top,left top;
background-repeat: no-repeat;
}