[All Adaptavist Apps]
When you're using the "Custom" menu style, this chunk of CSS will help you get started with your customisations...
/* 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; }
If you want to see how specific things are implemented in the inbuilt styles, take a look at the style sheets output when using those menu styles and then incorporate the bits you link in to your custom style.
/* 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; }