Show CSS properties in dialog

Design module Select element in the Layout / Structure area Element settings / Style / Show CSS properties in dialog

1. General




If you click on "Show CSS properties in dialog" at the top right here, you can edit the CSS rules in a convenient wizard. With the S, M and L buttons at the top right, you can define to which display sizes the CSS property applies.

2. Background


Background color

The currently selected background color is shown here.

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

Background image


Select image
Opens a dialog where the background image can be selected.

Delete image
Removes the defined image.

No image
The property "background-image: none" is entered in the CSS of the element.

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

Position

Here, you can define the positioning of the background image within the element: Left, Left top, Left bottom, Right, Right top, Right bottom, Top, Bottom or Center.

Repeat

Defines how the image should be repeated. "X and Y repeat" repeats the image horizontally and vertically, respectively. "No repeat" means the image will be shown in its original size.

3. Font


Font type

The currently selected font type is entered here.

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

Font size

The currently selected font size is shown here. You can select the unit - pixel, em or percent - for the font size in the drop-down list.

Font color

The currently selected font color is shown here.

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

Font weight

Defines whether the font should be shown normally or in bold.

Font style

Defines whether the font should be shown normally or in italics.

Text decoration

Defines whether the font should be shown normally (none) or underlined.

4. Borders


Style

Define the type of line that frames the element.

Color

The line color can be selected for each page.

Width

Define the width of the border lines in pixels, em or percent.

Identical ... for all sides

With this setting, the desired property only needs to be entered once in each case. It is then applied to all of the border sides.

6. Spacing


Padding

Here, you can define the space between the element content (e.g. text) to the border of the element. In each case, you can select the unit - pixel, em or percent - from the drop-down list.

Margin

Here, you can define the space between the border of the element and the next adjacent or surrounding element. In each case, you can select the unit - pixel, em or percent - from the drop-down list.

Identical ... for all sides

With this setting, the desired property only needs to be entered once in each case. It is then applied to all of the border sides.