Current Version 8.4

Styling Classic Menus

 

Prerequisites

(1) Knowledge of DesignBais menu structure. See the Menu Definition section in the Database Component Manual

(2) Some understanding of CSS would be useful.

(3) A design for your new menu.

 

Objectives

  • Style a classic DesignBais menu to mimic the DesignBais website menu.

 

Open DesignBais DBINET.DEMO (Version 8.5+)

Review the DBDEMO_STYLEDMENU form to see the finished menu.

Review the demotmMenu style to follow the steps outlined in this walk through.

 

Logto your Application Account

Once you have reviewed the form DBDEMO_STYLEDMENU & the menu style.

 

Copy the Standard Menu Style

Go to the "Upgrade/Migration Tools" -> "DesignBais Upgrade" - > "Extract SYS Files" option.

Filename: DBISYSFORMS

Record Id: STYLE*dbaistmMenu

Style Prefix: demo (use what suits your application)

Target File Name: DBISTYLE

Click "Submit" and you should have a demotmMenu in your Style Definitions file.

 

Save the Style and Refresh your Browser

Click the Submit button to save the style and update the DesignBaisStyle.css stylesheet.

Press Ctrl-F5 to refresh the saved stylesheet in your browser.

 

Menu Maintenance

Set the "Menu Style" to the demotmMenu style for the menu to be changed.

 

Forms Designer

Set the "Top Menu" on your test form to the newly styled menu.

 

Test Your Form

Run your form. The menu will still be a standard DesignBais release format.

 

Style Definition

Open your demotmMenu style and modify to suit!

Use the "Edit Additional Styles as Text" on the additional styles multivalues as you can see more lines of the CSS file easily.

You will notice commented lines identifying the componets of the menu styling as outlined below:

/* IMPORTANT: Change commented items only */
/* [DEPENDENT]: The value is dependent on another attribute's value */
/* [RECOMMENDED]: Closely follow recommended values as much as possible */

SH: Top strip height.
ST: Top strip top border
SB: Top strip bottom border
SBC: Top strip background color

TW: Top menu item width.
TCB: Top menu item background color
TT: Top menu item top border
TB: Top menu item bottom border
TL: Top menu item left border
TR: Top menu item right border
TTH: Top menu HOVER top border [RECOMMENDED]=TT)
TBH: Top menu HOVER bottom border[RECOMMENDED]=TB)
TCBH: Top menu HOVER background color
TLH: Top menu HOVER left border [RECOMMENDED]=TL)
TRH: Top menu HOVER right border [RECOMMENDED]=TR)
TACB: Top menu active item background color
TACH: Top menu active item color
TACBH: Top menu active item hover background color
TACH: Top menu active item hover color

DIH: Drop down menu item height
DLO: Drop down menu left offset
DBO: Drop down menu bottom offset
DIT: Drop down item top border
DIB: Drop down item bottom border
DIL: Drop down item left border
DIR: Drop down item right border
DIW: Drop down item width
DICB: Drop down item HOVER background color
DITH: Drop down item HOVER top border
DIBH: Drop down item HOVER bottom border
DILH: Drop down item HOVER left border
DIRH: Drop down item HOVER right border
DICBH: Drop down item HOVER background color

TFIL (used to hide the left border of the first item of the top level. The width should be = TL
TLIR (used to hide the right border of the last item of the top level. The width should be = TR
DFIT (used to hide the top border of the first item of a drop down. The width should be = DI
DLIB (used to hide the bottom border of the last item of a drop down . The width should be = DIB

 

Change the Menu Height

In Style Definition call up your new menu style e.g. demotmMenu.

In the Additional Styles look for the lines commented with /* SH */.

Change the release 19px to your desired menu height e.g. 50px.

Submit and refresh your browser to pick up the changed style.

In Menu Definition set the "Top Menu Frame Height" to the height + border height e.g. 51px.

You may need to uncheck the "Include System Logo" field to exclude the System Logo from the menu or set the "Top Menu Frame Height" to include the height of the logo.

Save your menu and retest your form - the menu height should change.

 

Change the Menu Colors

In Style Definition call up your new menu style e.g. demotmMenu.

In the Additional Styles look for the lines commented with /* SBC */.

Change the default #eeeeee to your chosen color e.g. #004c97

This changes the menu background but not the option background.

Now look for the lines commented with /* TCB */ and change the option background.

Submit and refresh your browser to pick up the changed style.

Retest your form - if you have followed the sample above you will have black writing on a dark background. The hover color is still the default grey and the dropdown menus are unchanged.

Now look for the lines commented with /* TCBH */ , /* TACB */ or /* TACBH */ and change the option hover & active background color. The dark blue color #004c97 makes the black text hard to read but we will change the font color.

Now look for the line ".demotmMenu li" and change the font color from #000000 (black) to #ffffff (white) or a color that suits your background color. This will also change the color of the sub-menus and hence, we find the /* DCIB */ and /* DCIBH */ lines and change the background-color to the chosen color #004c97.

We now have the web site dark blue look with white text but not the lighter blue to highlight which option we are about to click. Firstly make the active top /* TACH */ lines color #7fe0e9 and then we need to add a font color to the hover styles. Look for ".demotmMenu li:hover li:hover" and ".demotmMenu li:hover" and add "color: #7fe0e9;". These last two items are examples of CSS Selectors and give you an indication of how CSS styling works. Search the web for more information, a good starting point would be https://www.w3schools.com/cssref/css_selectors.asp

We haven't changed color or indeed removed the borders between items, nor have we changed the font size or widened the option boxes, etc

The menu border may be styled by adding your own style to the menu - DesignBais has no default border class. The menu container may also be restyled by copying dbaistmContainer to your own style, making changes and linking it to your menu.

The final look is yours to decide.