CSSMenuTools Logo
Dreamweaver Extensions Expression Web Addins

Tooltips Advancer - Style Editor

Style Editor

Item Styles

Style Editor Item Styles group contains the style editor. Here you can create new item styles or modify existing.

Style

Select the style you wish to edit.

Manage the styles by using the buttons:

Create new style. Here you can enter a name, type and assign an icon-marker to this style. All the items that have this style applied would be marked with this icon on the menu tree view. You can change these details at any time.

The Service style type is useful to create the special items like Header, top/bottom edges (e.g. rounded corners) etc. Such items have no links and only the Normal state parameters.

NOTE: Every new style that you add into a list has all the parameters of the currently selected style.

HINT: You can call styles suitable for its locations i.e. Level-1 for first-level items or Level-1-arrow for first-level items with submenu. Icons with arrow are also usually used to mark items with submenu. This would help you much at further usage.

Delete the selected style. You can not delete a style applied to any item.

Rename selected style. The Edit Style Title dialog will appear. Here you can change the selected style name and icon-marker.

Apply the selected style to the menu item currently selected in the menu tree.

Apply the selected style to the selected level items. You can make a choice.

  1. Apply the selected style to all selected level items
  2. Apply the selected style to selected level items which have submenu
  3. Apply the selected style to selected level items which have not submenu

See Menu Levels understanding for details.

 

Size group

Width

Turn Width check box on if you want set button width for menu item then enter the width in pixels. If this option is not defined the button width is calculated as a sum of the text width and its left & right paddings.

Height

Turn Height check box on if you want set button height for menu item then enter the height in pixels. If this option is not defined the button height is calculated as a sum of the text height and its top & bottom paddings.

Text group

Font

Choose a font face from the drop-down list or type it directly.

Size

Set the font size. You can specify the size in pixels.

Align

Set text alignment. Buttons set horizontal text alignment: Left, Centered, Right. Next two buttons set vertical text alignment: Top, Centered. These buttons are accessible if the Button Width and Height options are defined. Otherwise the button size depends on the item text.

Padding

Set the Text paddings in pixels - spacing between the text and button edges.

NOTE: If you define Horizontal Align to Center then Left and Right paddings are disabled. If you define Vertical Align to Center then Top and Bottom paddings are disabled.

Wrap Long Text Line

Check this option if you wish the long text line to be wrapped to fit the text area width. Text area width is Button Width without Left and Right Padding. The option is accessible if the Button Width is defined.

State group

To describe the Item Style options we need some additional explanations about the item states.

The menu item may have up to three states.

They are:

Normal - mouse is out of item.

Over - mouse is over the item

Current (optionally) - highlighting menu item which is linked to the current page.

You can set different text color, background color, border color and background image for the states. Also you can set bold (B), italic (I) or underline (U) style to the states text.

You can set 'transparent' color for background. How to set colors see CSSMenuTools Color Picker.

Border

Turn Border check box on if you want use border.

Images

Turn Images check box on if you want to use background images.

Menu Item background can be composed using up to three images: left and right edges and middle image (repeating horizontally). Text will appear within the middle part only so the edges can be reviewed as additional margins for text.

Select the image box you wish to edit and type the image path in the edit box or browse image file by Browse button or by double-clicking on image box. Selected image field can be cleared using Delete button.


 

Previous Next