[All Adaptavist Apps]

Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

(warning) Under construction

Excerpt

This tutorial shows how to customise menus beyond the pre-defined menu themes...

Preface

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.

Topics Covered

This tutorial will be useful to you if you are want to:

  • customise the top-level menu bar
    • background colour and borders
    • rollover styles
    • text styles
    • separator styles
  • customise pop-up menus
    • background colour and borders
    • rollover styles
    • text styles
    • separator styles

Contents

The tutorial is split in to to topics:

Children Display
excerpttrue
Align
alignright

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; }