Menu items

Design module Layout area - Structure Select element (e.g. Application menu) Properties dialog / Continue to Menu items

1. Normal / Hover / Selected

These buttons at the top of the dialog represent three statuses of the menu items: The properties below in the dialog can be defined in each case for the selected status.

2. Background


2.1. Background color

Color

The currently selected background color is shown here.

Select color
Opens a small palette from which the background color can be selected.

2.2. Background image

Background image

The path and filename of the selected background image are shown here.

Select image
Opens a dialog where an image can be selected. The formats .png, .jpg and .gif are recommended.

Delete image
Removes the selected image.

No image
Adds the property background-image:none to the CSS of the element.

Inherit properties from parent element
The inherit value is entered in the CSS.

Position

You can define the position of the background image within the element: left, left top, left bottom, right, right top, right bottom, top, bottom or in the middle.

Repeat

Here, you can define how the image should be repeated, where appropriate. The X repeat will repeat the image on the horizontal axis and Y repeat on the vertical axis. No repeat means the image will be shown in its original size.

3. Font


Font type

The currently selected font type is entered here.

Select font type
Opens a dialog where the font type can be selected.

Font size

Enter the font size here.

Font color

The currently selected font color is shown here.

Select color
Opens a small palette where the font color can be selected.

Font weight, Font style, Text decoration

The desired font properties can be selected here for each option.

4. Border


4.1. Style

The type of border can be defined here.

4.2. Color

The color of the border can be defined here.

4.3. Width

The width of the border can be defined here.

Identical style for all sides

The style defined for the top border is applied to all border sides. If this setting is deactivated, you can define each border side individually.

5. Spacings


5.1. Padding

With the padding, you control how far away the content of the element (such as text) is from its borders. Text that is located within an element will therefore be moved up, down, left or right, based on the number of pixels entered here.

Identicial padding for all sides

The padding defined for the top is applied to all sides. If this setting is deactivated, you can define each side individually.

5.2. Margin

With the margin, you control the spacing between the element and other elements outside of it. This offset will not be calculated from the content of the element, but rather from the area of the element. Therefore, if you have entered a padding of 10 px and a margin of 10 px, the contents of the element will be separated by a total of 20 px from the next element next to it. If you have defined a border for the element, the border will be displayed at a 10 px distance around the element. The margin, on the other hand, controls the distance from the border to the next element, so that in this example 10 px free space will be displayed around the borders as well.

Identicial margin for all sides

The margin defined for the top is applied to all sides. If this setting is deactivated, you can define each side individually.

More information

Layout elements