The sections of the "Design" module

Read here to learn how to switch to the "Design" module in Portal Manager.

Click here to learn how to create layouts for your portal and open them for editing.

If you have multiple layouts open, you can switch between them using the tab at the top of the workspace.

You can change the size of each section by dragging with the mouse. To do this, move the mouse to the edge of an area until the mouse pointer changes to a double-arrow. If there is not enough space to display all the items in a section, vertical or horizontal scroll bars will automatically appear.

Each section can be closed using the close icon next to its title.

You can show or hide sections using the "View" option in the main menu. If a pane is displayed in its own window, you can dock it back to the right or left side of the workspace by dragging its title bar to the desired position with the mouse. If an entry has been created in the history, the entry's ID is displayed on the tab next to the layout's name.

Layout

Structure

In the "Layout" section, you can access the layout structure by clicking "Structure." There, the hierarchy of all elements in the layout is displayed in a tree structure. If the structure allows it, you can move the elements here using drag-and-drop to change their arrangement.

Grouping CSS Rules

If an element is selected here in the "Layout" section, you can create a group for CSS rules by selecting "Edit / Insert New Layer" from the main menu.

Title

Enter a title here that you want to use to display your grouping in the Layout Structure pane.

Find out how to create custom styles here.

Control Elements

You can access the settings for control elements in the "Layout" section by clicking "Control Elements." The following settings can be edited:

• General HTML Properties

  e.g., body, table, or div

• Advanced Features

  e.g., login, warnings, error messages

• Inspections

  Style properties that can be assigned in the "Applications" module via the "View" tab in the Properties dialog box for elements.

When you select an item here, the properties will be loaded in the "Element Settings" section. The control elements are organized by type (e.g., input fields or buttons).

Add a control element

Additional control elements can be added in the "Control Elements" section once the desired type (e.g., text or button) is selected. In the dialog box, you can edit the class and title. The new control automatically inherits the styles of the parent control that you selected before creating it.

Add an empty control element

Opens a dialog box where you can create a new control that contains no predefined CSS rules other than a class selector. To do this, select the desired type (e.g., text or button) in the "Control Elements" section.

Here, too, you can edit the class name and title in the dialog box.

Edit Properties

This dialog box can be opened via the main menu ("Edit / Properties") or the context menu when an existing control is selected in the layout structure.

"Elements" Section

You can find all the information on this topic here.

Snapshots

Snapshots are used to temporarily save the current layout at set intervals. Clicking on one of the snapshots restores the layout to its state at that point in time.

Open Selected Snapshot

Loads the selected snapshot.

Create a new snapshot

Opens a submenu that allows you to create a new snapshot. The "Create New Snapshot with Comment" submenu opens a dialog box where you can add a comment to the new snapshot.

Comment

You'll also find this dialog in processes when you create snapshots there.

The comment you can write here will appear in the snapshot section below the date the snapshot was created after you click "OK."

Settings

Opens a dialog box where you can specify the maximum number of snapshots to be created and the time interval for automatic creation.

Settings

You'll also find this dialog in processes when you create snapshots there.

Maximum ... Create snapshots

This is where you set the maximum number of snapshots to be created.

Create snapshots automatically every ... minutes

This is where you set the time interval for automatically creating snapshots.

Search

Here, you can search for an element's title, a CSS selector, or properties in the CSS by selecting "CSS."

Search field

Enter a search term here.

Shortlist

Various search functions are available here.

• CSS

  Search for element properties in CSS.

• CSS selector

  Searches for the specified CSS selector.

• Title

  Search for the element title.

Search

Triggers the search. Search results are displayed below the search field, and clicking on a result highlights the corresponding element in the layout structure.

Search History

Opens a window with a list of the most recent searches. Click on a search action in the list to repeat it.

Work surface

In the workspace shown in the center, you'll see a preview of the layout.

Element Settings

Here you'll find the two buttons, "Styles" and "Options," which allow you to switch between the CSS properties (styles) of the elements and the settings (such as title, size, etc.). In each of these areas, the settings defined for the element selected in the layout structure are displayed.

Click "Options" to edit the properties of the currently selected item.

Options

You can find all the information on this topic here.

Styles

In this section, you can edit the CSS properties of the element currently selected in the layout structure. Use the S, M, and L buttons in the upper-right corner to specify the display size for which the CSS property applies. In the upper-left corner, you'll find several buttons that allow you to view the CSS properties in various ways.

Show CSS Variables

For some elements, such as Multiple Selection 2.0, the variables defined for the control can be edited. You can find more information on this topic in the help section for the respective application element.

Multiple Selection 2.0

Image Editor

Display CSS properties in a compact table

Only the most important style properties—or the style properties that you have changed—are displayed here.

Add a CSS property

Inserts a new, empty line at the end of the list where you can enter an existing CSS rule.

Remove CSS Property

Removes the property from the list.

Changes the order of the properties.

Length Specifications

If the value "Length" is selected for the CSS property "background-position," a dialog box opens automatically.

Horizontal / Vertical Distance

Enter the desired spacing here and select the unit from the drop-down list to the right (px, em, or %).

If the value "Length/Number/Percent" is selected for the CSS property "line-height," a dialog box opens automatically.

Value

Enter the desired value here and select the unit from the drop-down list to the right of it (px, em, or %).

Select Fonts

If the value "Select Fonts" is selected for the CSS "font-family" property, a dialog box opens automatically where you can select the fonts.

List available

Here you'll find all the available fonts.

List selected

The fonts in this list are used in CSS.

Move to the right / left

Moves the currently selected font from one list to the other.

Move up / down

Changes the order in which the browser uses the fonts. If the client does not support the first font because it is not installed, all subsequent fonts are tried one after another.

Display CSS Properties in a Grouped Table

The element's style properties are displayed here in a table, organized by group.

"Property" column

Here you can see all the style groups.

Displays the individual style properties that belong to the group.

"Value" column

Here, you can change the value of a property. To do this, simply click in the corresponding cell.

Display CSS Properties in the Editor

You can edit CSS properties directly here.

Save CSS

The changes will be applied.

Undo the last action

Restores the state to what it was before the last change.

Repeat the last action

The last action is performed again.

To set the properties of text or links in To modify table cells, you must append "a" or "span" to the selector.

Example:

The specified selector

                table.Table_Standard > tbody tr td.textvcontrol5ECDF9CF
            

matches the table's background properties. The Modified Selector

                table.Table_Standard> tbody tr td.textvcontrol5ECDF9CF span
            

affects the appearance of the text in the table cells of the column.

Display CSS Properties in the Dialog Box

If you click "Show CSS Properties in Dialog" here at , you can easily edit CSS rules in a wizard. Use the S, M, and L buttons in the upper-right corner to specify the display sizes for which the CSS rules apply.

Background

Background Color

Here you can see the currently selected background color.

Select a color

Opens a small color palette from which you can select the desired background color.

Background image

Select an image

Opens a dialog box where you can select a background image.

Delete Image

Exports the selected image again.

No image

The property `background-image: none` is specified in the element's CSS.

Inherit property from parent element

Takes on the color of the parent element. In CSS, the value "inherit" is specified.

Position

Here you can specify where the background image should be positioned within the element: Left, Top Left, Bottom Left, Right, Top Right, Bottom Right, Top, Bottom, or Center.

Repetition

Specifies how a graphic should be repeated. "X and Y Repeat" repeats the graphic horizontally and vertically, respectively. "No Repeat" displays the graphic at its original size.

Font

Font

The currently selected font is listed here.

Select a font

Opens a dialog box where you can select a font.

Font size

Here you can see the currently selected font size. In the drop-down list on the right, you can select the unit: pixels, em, or percent.

Text Color

Here you can see the currently selected text color.

Select a color

Opens a small color palette from which you can select the desired text color.

Typeface

Specifies whether the text is displayed in normal or bold font.

Font style

Specifies whether the text is displayed in regular or italic font.

Text Decoration

Specifies whether the text is formatted with an underline (underline) or without an underline (none).

Frame

Style

Here, you specify the line style used to outline the element.

Color

You can select a line color for each page.

Width

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

Same style / same color / same width for all pages

With this setting, you only need to enter the desired property once for each instance. It then applies to all sides of the frame.

Distances

Internal spacing

Here, you can adjust the spacing between the element's content (e.g., text) and the outer edge of the element. In the drop-down list, you can select either pixels, em, or percent.

Outer Distance

Here, you can set the distance from the outer edge of the element to the outer edge of the next adjacent or surrounding element. In the drop-down list, you can select either pixels, em, or percent.

Equal outer and inner margins on all sides

With this setting, you only need to enter the desired property once for each instance. It then applies to all sides of the element.

History

You can find all the information about this topic here.