[All Adaptavist Apps]
Under construction
Excerpt |
---|
This tutorial shows how to customise menus beyond the pre-defined menu themes... |
This tutorial assumes that you are already familiar with the basic functionality within Theme Builder 3.x such as creating and editing layouts using the Layout Manager. It also assumes that you have a good understanding of CSS.
Where possible, we recommend using the pre-defined styles and settings on the Menus Tab as these are heavily tested on a wide range of operating system and web browser combinations.
This tutorial will be useful to you if you are want to:
The tutorial is split in to to topics:
Children Display | ||
---|---|---|
|
Align | ||
---|---|---|
| ||
Let's get started: 1 - Changing menu bar styles |
There are times when you need to take complete control over the menu styling, below is an example of a framework which can be used for basic customisation of the menu style. For more detailed examples see the css included in the html when you choose different menu styles throug theme config.
Code Block |
---|
* 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; } |