Areas of the "Design" module

Read here how to access the "Design" module in the Portal manager. Information about how to create and edit layouts for your portal can be found here.

General

If you have more than one layout open, you can use the tabs at the top of the workspace to switch between them.

The size of each area can be adjusted by dragging with the mouse. To do that, position the mouse at the edge of an area until the mouse pointer changes to a double-headed arrow. If there is not enough space in an area to display all of the elements, horizontal and/or vertical scroll bars will appear.

Any tab in the module can be closed by clicking on the symbol next to the title.

In the View menu, you can select which tab should be displayed or hidden. If a tab is shown in its own window, you can also anchor it to the right or left of the workspace by dragging the title to the desired position with the mouse. If an entry has been created in the history, the ID of the entry will be shown next to the name of the layout in the tab.

Layout

Structure

All layout elements can be dragged & dropped in the layout tree to change their arrangement, provided the layout structure allows this.

Grouping CSS rules

When an element is selected here in the "Layout" area, a grouping for CSS rules can be created via the main menu "Edit / Insert new layer".

Title

Enter a title that should be used for your grouping in the Layout structure area.

Learn how to create user-defined styles here.

Control elements

Click on this button at the bottom right of the Layout area. The following settings can be modified here:

  • General HTML properties

    e.g. body, table or div

  • Advanced properties

    e.g. Login, Warnings, Error messages

  • Controls

    Style properties that can be assigned in the Applications module on the Style tab in the properties dialog of elements.

If you select something here, the properties will be loaded in the Element settings area. The control elements are ordered by type, such as edit elements or buttons.

Add control element

Additional control elements can be added in the "Control Elements" area when the desired type (e.g. text or button) is marked. The class and title can be edited in the dialog. The new control automatically adopts the styles of the parent control that you selected before creating it.

If you create new controls in the "Applications" module from the menu "Edit / Edit layout", make sure that you use a title that is unique across the entire portal. A title may not appear in another application of the current portal.

Add empty control element

Opens a dialog where a new control element can be created that does not contain any predefined CSS rules except for a class selector. To do this, the desired type (e.g. text or button) must be marked in the "Control elements" area.

The class name and the title can be edited here in the dialog as well.

Edit properties

The same dialog can be opened via the main menu "Edit / Properties" or the context menu if an existing control element is marked in the layout structure.

"Elements" area

Click here for more information about this topic.

Snapshots

With snapshots, the current layout will be cached at defined intervals. Clicking on a snapshot resets the layout to the state at that specific time.

Open snapshot

Opens the layout in the state of the selected snapshot.

Create snapshot

Opens a submenu where a new snapshot can be created. The sub menu "Create new snapshot with comment" opens a dialog in which the new snapshot can be commented.

The comment will be shown in the Snapshot area under the date, when the snapshot was created.

Options

Opens a dialog where the maximum number of created snapshots and the interval between automatic snapshots can be defined.

Maximum ... Create snapshots

The maximum number of created snapshots can be defined here.

Create snapshots automatically every ... Minutes

The time between automatically created snapshots can be determined here.

Search

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

Search field

Enter a search term here.

Drop-down list

Here are different functions available for the search.

  • CSS

    Searches for element properties in the CSS.

  • CSS selector

    Searches for the entered CSS selector.

  • Title

    Searches for element titles.

Search

Triggers the search. Hits will be shown beneath the search field. If you click on a hit, the corresponding element will be highlighted in the Layout structure.

Search history

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

Workspace

You can arrange the individual elements of your layout in the workspace, which you will see in the middle area.

Element settings

Here you will find the two buttons "Styles" and "Options" with which you can switch between the CSS properties (styles) of the elements and the settings (such as title, size, etc.). The settings defined for the respective element selected in the layout structure are displayed in both areas.

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

Options

General

ID / Class

The "ID" or "class" by which an element is identified in the CSS can be found for all elements in the general part of the options. If the ID is editable here, you need to make sure that you use an ID that is unique in this layout. If you use an ID twice, your changes will be dismissed as soon as you click on another element in the workspace.

Title

You can provide your element with a title here as well that will be used in all areas of the "Design" module.

Heading / Heading level

You can assign a heading level and enter a heading. The heading level has no impact on the hierarchy in the layout but will be written, as well as the heading, under the container in the HTML. This means that the heading can be used and read by screen readers and search engines.

Role

If you want to create accessible (barrier-free) pages or just want to create more transparency in your layout, you can assign a role to the element.

Multilingualism

Opens a dialog where each property (e.g. the title) can be defined in the different portal languages.

All other settings that can be made here in the "Options" area vary from element to element.

Styles

The CSS properties of the element currently selected in the layout structure can be edited in this area. With the S, M and L buttons at the top right, you can define to which display sizes the CSS property applies. At the top left, you will find several buttons that can be used to display the CSS properties in different ways.

Show CSS properties in compact table

Only the most important style properties, or style properties edited by you, are shown here.

Add CSS property

Adds a new, empty row to the bottom of the list. You can enter an available CSS rule here.

Remove CSS property

Removes the property from the list.

Modify the order of the properties.

Input length

If the value "Input length" is selected for the CSS property "Background position", a dialog is opened automatically.

Horizontal / vertical position

Enter the displacement and select the desired unit in the drop-down list to the right of the edit field (px, em, or %).

If the value "Length/number/percent" is selected for the CSS property "Line-height", a dialog opens automatically.

Value

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

Select fonts

If the value "Select fonts" is selected for the CSS property "Font-family", a dialog is also automatically opened in which the fonts can be specified.

Available list

Every selectable font is listed here.

Selected list

The fonts in this list will be used in the CSS.

Move right / Move left

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

Move up / Move down

Adjust the order that the fonts are used in the browser in. If the client does not support the first font, because it is not installed, the other fonts will be tried one after the other.

Show CSS properties in grouped table

The style properties of the element are displayed here in a table where they are sorted by groups.

"Property" column

All of the style groups are shown here.

Displays the style properties that belong to the selected group.

"Value" column

The value of a property can be defined here. Just click on the corresponding cell to do that.

Show CSS properties in editor

CSS properties can be edited directly here.

Save CSS

Changes are applied.

Undo last action

Restores the state before the last change.

Redo last action

The undone action is performed again.

Please note that own comments will not be saved.

In order to edit text or links in table columns, an "a" or a "span" has to be appended to the selector.

Example:

the default selector 

table.Table_Standard > tbody tr td.textvcontrol5ECDF9CF

hits the background properties of the table. The edited selector 

table.Table_Standard> tbody tr td.textvcontrol5ECDF9CF span

influences the text format in the table cells of the column.

Show CSS properties in dialog

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.

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 specify where the background image should be positioned in the element: Left, top left, bottom left, right, top right, bottom right, 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.

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.

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.

Same style / color / width 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.

Spacings

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.

Same margin / padding 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.

History

Click here for more information about this area.