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.