[All Adaptavist Apps]
The top-level menu bar is always shown and it's design should fit with the overall look and feel of your theme layout...
To apply a background colour, use the following syntax:
div.dynarch-horiz-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-horiz-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 the menu bar, use the following notation:
div.dynarch-horiz-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.
to follow
to follow
Separators are displayed using a HTML <div>
element. An example of the custom separators we've used on our site is shown below:
/* Separators on the menu bar */ div.dynarch-horiz-menu table tr td.separator div { border-left: 1px solid #ACA899; border-right: 1px solid #FFFFFF; border-style: none solid; height: 100%; margin: 2px 3px; opacity: 0.7; width: 0px; }
In the example above, we've set the left and right border styles and then used a width of 0 pixels to remove the space between the borders. This gives a subtle 3D effect to the separator.
You can apply your styles to menu bars in a specific theme panel by prefixing them with the [panel class].
For example, to apply a background colour to any menu bar used in the main content area, prefix with .atb-content
:
.atb-content div.dynarch-horiz-menu { background-color: #ffffd6; background-image: none; }
Next page: 2 - Changing Pop-up Menus