2 - Changing Pop-up Menus

Pop-up menus use separate styles to the menu bar...

Pop-up menus and their contents are referenced by the CSS class: div.dynarch-popup-menu

Background and borders

To apply a background colour, use the following syntax:

div.dynarch-popup-menu {
 background-color: #ffffd6;
}

If you're using a pre-built menu style that has a graphical background, you'll need to remove the background image in order for your background colour to be seen:

div.dynarch-popup-menu {
 background-color: #ffffd6;
 background-image: none;
}

For more information on styling backgrounds with CSS, including using background images, please see CSS Background.

To set the border on pop-up menus, use the following notation:

div.dynarch-popup-menu {
 border: 1px dotted #000;
 border-style: dotted none;
}

The example above would display a 1 pixel dotted black border on the top and bottom of the menu bar.

For more information on styling backgrounds with CSS, including using background images, please see CSS Border.

Menu item states

to follow

Menu item text

To change the text settings for all items on pop-up menus, you need to apply the styles to the .label which contains the text, for example:

div.dynarch-popup-menu tr.item .label {
 font-family: Verdana, sans-serif;
 color: #0000ff;
}

You can also customise the text for different states, for example:

/* mouse hovers over item */
div.dynarch-popup-menu tr.item.hover .label {
 color: #00ff00;
}
/* item is active, eg. showing sub-menu */
div.dynarch-popup-menu tr.item.active .label {
 color: #ff0000;
}

Items with sub-menus

to follow

Panel specific styles

Should you wish to customise the pop-up menus within a specific theme panel, you can prefix the style with the panel class:

/* customise text colour of pop-ups from menus in the wiki page */
.atb-content div.dynarch-popup-menu tr.item .label {
 font-weight: bold;
}