Portal and Application Area
A layout loads both application pages and portal pages in the portal and application areas.
In the "Design" module, you'll find the portal and application areas in layouts created using Intrexx layout templates; in the structure, they appear in the "Layout" section under the name "Stage." Here, you can edit application styles, such as those for the application menu or the application name. On portal pages, for example, you can edit the styles of portlets.
The portal and application area is also available as an element. If no portal or application area exists in the layout yet, the element can be selected here. You can find information on how to create elements here.
Features
You can edit the properties of an existing portal and application area via the "Edit" option in the main menu or by double-clicking "Stage" in the layout structure. When editing properties, you'll be guided by a wizard that walks you through the most important settings step by step.
1. Portal and Application Area - General
When creating a new portal and application area or editing an existing one, the general settings are displayed first in the wizard. You can find out everything about these settings here. Click "Next."
2. Portal and Application Area - Position and Size
Here, you can specify the positioning and size of the portal and application areas.
Positioning
Static Positioning
A line break is inserted in the HTML after an element with this setting.
Absolute Positioning
With this setting, elements have no effect on subsequent or adjacent elements. Absolutely positioned elements can overlap other elements. The positioning is based on the nearest parent element that does not have static positioning.
Absolute positioning should be used when an element is intended to be independent of its surroundings.
Relative Positioning
The element is positioned relative to its normal position.
Fixed Positioning
The element is positioned relative to the viewport.
Size
Auto Width, Auto Height, Auto Width and Height
An element's position is determined by its order in the document. When using automatic sizing, the element's size depends on the type of positioning.
With absolute positioning, the height, width, or both height and width are automatically adjusted to fit the space available between absolutely positioned neighbors. The alignment is controlled using the CSS properties `right`, `left`, `top`, and `bottom`.
With static positioning, an automatic width ensures that the element takes up the width of the container surrounding it. In this case, the automatic height is determined by the element's content.
Fixed width and height
With this setting, the element's dimensions on the workspace are preserved.
Width / Height
If the "Fixed Width and Height" setting is selected, enter the desired width and height here.
Click "Next."
3. Portal and Application Area - Background
Here, you can configure the background, border, and spacing for the portal and application menus.
Background Color
You can select the desired color here. You can find more information on this topic here.
Background image
The URL and filename of the selected background image are displayed here.
Select an image
Opens a dialog box where you can select an image. We recommend using the .png, .jpg, and .gif file formats.
Delete Image
Removes the reference to the currently selected image.
No image
Sets the `background-image: none` property in the element's CSS.
Inherit property from parent element
The `inherit` value is specified in CSS.
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
Here, you specify how the image should be repeated. The X and Y repeats, for example, repeat the graphic horizontally and vertically, respectively. If there is no repeat, the graphic is displayed at its original size.
Frame
Style
Here, you can set the type of border line.
Color
You can select the desired color here. You can find more information on this topic here.
Width
You can adjust the frame width here.
Same style / color / width for all pages
Applies the setting specified for the top side of the frame to all sides of the frame. If you disable this setting, you can configure each frame page differently.
Distances
Internal spacing
Here, you can adjust the spacing between the element's content (e.g., text) and its border. Text contained within an element is therefore shifted up, to the right, down, or to the left by the number of pixels specified here.
Outer Distance
Use the "Outer Margin" setting to adjust the distance between the element and the outer edge. This spacing is not measured from the element's content (e.g., text), but from the element's boundary. So, if you've set an inner margin of 10 px and an outer margin of 10 px, the element's content will be a total of 20 px away from the next adjacent element. If you have defined a border for the element, the border would be displayed with a 10-pixel margin around the element. The `margin`, in turn, controls the distance between the frame and the next element, so that in this example, a 10-pixel margin would be displayed around the frame.
Same inner/outer spacing on all sides
Apply the spacing set for the top margin to all sides. If you disable this setting, you can configure each page differently.
Click "Next."
4. Application Menu - Layout
Arrangement
Here, you can configure the layout of the application menu. You can choose from
-
Horizontal, top
-
Horizontally at the bottom
-
Vertical, left
-
Vertical, right
This allows you to decide whether the application menu should be positioned horizontally above, horizontally below, vertically to the left, or vertically to the right of the area where the application pages are displayed. The menu items in the application menu are defined in the application properties.
No application menu
Hides the application menu.
Click "Next."
5. Application Menu - Background
Just as with the portal and application areas, you can configure the background, border, and spacing of the application menu here. Click "Next."
6. Application Menu - Menu Items
This is where you define the appearance of the application menu items.
Normal / Hover / Selected
These buttons at the top of the dialog box represent three states of menu items:
-
Normal
Menu item without mouse interaction
-
Hover
Menu item activated by mouse click
-
Selected
Selected menu item
The properties in the lower section of the dialog box are set for the currently selected state.
Background
You can find information about the available background settings here.
Font
Font
The currently selected font is listed here.
Select a font
Opens a dialog box where you can select a font.
Font size
Enter the font size here.
Text Color
You can select the desired color here. You can find more information on this topic here.
Font type, font style, text decoration
Select the desired font properties here.
Frames / Spacing
You can find information about the settings available here. Click "Next."
7. Area of Application - Background
Choose here what you want the background of the application area to look like. You can find information about the available settings here.
8. Portal Page - Background
Here, you can customize the appearance of the portal page's background. You can find information about the available settings here.
9. Portal Page - Portlets - Heading
Use this section to customize the appearance of the portlets on the portal page.
You can find information about the available settings for background, borders, and spacing here.
You can find information about font settings here.
10. Portal Page - Portlets - Content Area
Here, you can define the layout of the content area for portlets. You can find information about the available settings for the background, borders, and spacing here.
You can find information about font settings here.
Clicking "OK" saves all the settings you've edited in the wizard and closes the dialog box.
Elements: Horizontal/Vertical Application Menu
These elements can be created if there is no application menu in the application area yet.
Element Settings - Application Menu
In the "Element Settings" section of the application menus, in addition to the general settings—which are described here —you'll also find the settings for the separators.
Separator between menu items
No separator
With this option, no separator is displayed between the menu items.
Image
With this option, any image can be used as a separator.
Select an image
Opens a dialog box where you can select an image.
Text
This option allows you to enter text that will be displayed between the menu items.