[All Adaptavist Apps]

Page tree

(warning) Under construction

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:


Let's get started: 1 - Changing menu bar styles

2 Comments

  1. Unknown User (mattbovett)

    Not sure if this is the right page to ask this, but does anyone know the name of the shadow image(s) for the menus, their location on the server, and the CSS to change them?

    I don't have access to the server but I want to change them to make them look more Mac-like (smile)

    Matt

    1. Unknown User (gfraser)

      If you extract the plugin jar file (it's just a zip with extension of ".jar") you can find the menu styles and images within the /resources/builder/hmenu folder.

      How many images are required to create the smoother Apple shadow effect? If more than 5 images are required, you might run in to issues as there are only 4 divs wrapped around the div.dynarch-popup-menu element (div.a, div.b, div.c and div.d if memory serves)...