3 - Extreme Menu Customisation

If you need complete control over menu styles, you can disable or significantly reduce the usage of pre-built styles...

Use with caution

The pre-built styles are tested to work on a wide range of systems. When you disable or reduce them you get more control over your menu styles but you also need to deal with all the cross-browser styling issues yourself. You have been warned!

Reducing or disabling the pre-built styles

Set the menu style to one of the following: 'custom', 'custon 2d', 'custom 3d' or if you are really adventurous 'none'

Base style sheets

The following style sheets are intended to provide just enough customisation to make the menus usable and act as a base for your own custom modifications.

Basic menu styling

/* Menus */
div.dynarch-horiz-menu {
 background-color:transparent;
 border:0px none; 
}
div.dynarch-horiz-menu table tr td.hover { 
 background-color:#ea5086;
 color: #DD5555; 
}
div.dynarch-horiz-menu table tr td.active {
 background-color:#ea5086;
 color: #DD5555; 
}
div.dynarch-horiz-menu table tr td.hover table,
div.dynarch-horiz-menu table tr td.active table { 
}
div.dynarch-horiz-menu table tr td.separator div {
 border-right-color: #999999;
 border-left-color: #999999;
 margin-right: 3px; 
}

div.dynarch-popup-menu {
 background-color: #FFFFFF;
 padding: 0;
 color: #000000;
 border: 0px none #FFFFFF;
}
div.dynarch-popup-menu tr.item{
 color: #000000; 
}
div.dynarch-popup-menu tr.item.hover {
 background-color: #ea5086;
 color: #FFFFFF; 
}
div.dynarch-popup-menu tr.item.active {
 background-color: #ea5086;
 color: #FFFFFF; 
}
div.dynarch-popup-menu tr.separator td div {
 background: #000000; 
}

Tip: If you want to see how specific things are implemented in the inbuilt styles, take a look at the pre-built style sheets before disabling them and incorporate the bits you like.

Menu style with background images

/* Menus */
.atb-title div.dynarch-horiz-menu table tr td { 
background-image:url(/download/attachments/33120/menubg.png);
 background-position:top left;
 background-repeat:no-repeat;
 padding-left:20px;
 padding-right:10px;
 height:33px;
 font-face:cursive;
 font-size:14px;
 font-weight:bold;
 color:#ea5086;
}

div.dynarch-horiz-menu {
 background-color:transparent;
 border:0px none; 
}
div.dynarch-horiz-menu table tr td.hover { 
 background-color:#ea5086;
 color: #DD5555; 
}
div.dynarch-horiz-menu table tr td.active {
 background-color:#ea5086;
 color: #DD5555; 
}
div.dynarch-horiz-menu table tr td.hover table,
div.dynarch-horiz-menu table tr td.active table { 
}
div.dynarch-horiz-menu table tr td.separator div {
 border-right-color: #999999;
 border-left-color: #999999;
 margin-right: 3px; 
}

div.dynarch-popup-menu {
 background-color: #FFFFFF;
 padding: 0;
 color: #000000;
 border: 0px none #FFFFFF;
}
div.dynarch-popup-menu tr.item{
 color: #000000; 
}
div.dynarch-popup-menu tr.item.hover {
 background-color: #ea5086;
 color: #FFFFFF; 
}
div.dynarch-popup-menu tr.item.active {
 background-color: #ea5086;
 color: #FFFFFF; 
}
div.dynarch-popup-menu tr.separator td div {
 background: #000000; 
}

Customising the menu for a single panel

Prefix the style definitions with the panel class

/* Menus */
.atb-content div.dynarch-horiz-menu {
 background-color:transparent;
 border:0px none; 
}
.atb-content div.dynarch-horiz-menu table tr td.hover { 
 background-color:#ea5086;
 color: #DD5555; 
}
.atb-content div.dynarch-horiz-menu table tr td.active {
 background-color:#ea5086;
 color: #DD5555; 
}
.atb-content div.dynarch-horiz-menu table tr td.hover table,
.atb-content div.dynarch-horiz-menu table tr td.active table { 
}
.atb-content div.dynarch-horiz-menu table tr td.separator div {
 border-right-color: #999999;
 border-left-color: #999999;
 margin-right: 3px; 
}

.atb-content div.dynarch-popup-menu {
 background-color: #FFFFFF;
 padding: 0;
 color: #000000;
 border: 0px none #FFFFFF;
}
.atb-content div.dynarch-popup-menu tr.item{
 color: #000000; 
}
.atb-content div.dynarch-popup-menu tr.item.hover {
 background-color: #ea5086;
 color: #FFFFFF; 
}
.atb-content div.dynarch-popup-menu tr.item.active {
 background-color: #ea5086;
 color: #FFFFFF; 
}
.atb-content div.dynarch-popup-menu tr.separator td div {
 background: #000000; 
}

Page tree