[All Adaptavist Apps]
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!
to follow
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.
/* 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.
/* 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; }
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; }