Areas of the "Design" module

Read here how to access the "Design" module in the Portal manager. Information about how to create and edit ayouts 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 settings

The properties dialog of a layout can be opened by double-clicking on the corresponding tab on top of the work space.

General

Title

The name of the layout can be changed here.

Default menu

Select the pre-configured menu structure that should be used by default for this layout.

Version

The current version number of the layout is shown here.

Open version manager

Opens a dialog where the version number can be defined.

Show in layout switch

In the browser the layout can be selected in the additional control "Layout switch".

Output

Click here for more information about this topic.

Click on "OK" to close the layout properties again.

Layout

Structure

When you select an element in the structure, its settings are displayed in the "Element settings" area. They can be changed there. Double-click on the element to open a wizard that will help you edit the settings.

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

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.

Elements

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 also 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 %).

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

Opens a wizard where the most important properties of the element can be edited conveniently.

History

Click here for more information about this area.