Style (PA)
A project’s Style primarily affects visual aspects of the project, such as colors, opacity levels, rounded corners, and logos. The Style of a project also affects the header content, navigation menu style, and pop-up panels. This page describes how to edit the current project Style and manage Styles in Project Assist. This page also contains a reference for Style properties.
To edit your project’s Style, you use a pop-up window called the Style Manager. The following image shows the Project Assist Style Manager.
Behind the Style Manager, you can interact with a preview of your project to view the effects of your changes.
How to Open the Style Manager
The following interactions open the Style Manager:
Click Style on the home page, as shown in the following image.
Choose the Manage Project Style tab at the top of the screen, as shown in the following image.
How to Apply a Style
To apply an existing style to your project:
In the Style Manager, select a Style.
This Style is now applied to your project.
How to Clone and Edit a Style
To clone an existing style and edit the clone:
- In the Style Manager, select the style and then click the
Clone icon. - Select either the original or the clone.
- Click the
Edit icon next to the selected style. - Use the Style Manager to edit this style. See Style Properties.
Click Save.
Your changes are saved.
- To rename the style, double-click the style name in the Available Styles list.
- To apply the style to this project, make sure that the style is selected when you leave the Style Manager.
Tip
To cancel your changes, click the Back button at the top of the Style Manger, as shown in the following image.
Then, choose Close w/o Saving.
How to Delete a Style
To delete a style:
- In the Style Manager, select the style.
- Click the
Delete icon next to the selected style.
Style Properties
Project Properties
Project properties affect the entire project.
The following image shows the Project properties in the Style Manger.
The following is a list of Project properties.
| Property | Purpose |
|---|---|
| Default Layout | Specifies whether a desktop-style or mobile-style layout is used when the project is opened on a desktop computer. On a mobile device, the project always appears with a mobile layout. |
| Navigation | Specifies whether a tree or breadcrumbs are used for navigation. The Navigation property only applies when Default Layout is set as Desktop. |
| Background Color | Specifies a background fill for pages in your project. The fill can be a solid color or a gradient. This property can also be used to set opacity. Advanced DGLux5 users can also set an image as the fill. To set an image as the fill, you must upload an image to the current DGLux5 project, as described in Image, and then manually enter the path to the image in the URL field in the Fill pop-up. The Fill pop-up also appears in DGLux5. See Fill and Border Pop-Ups, Fill and Stroke Properties. |
| Background Image | Sets a background image to use behind your project. The Background Image property applies only when Default Layout is set as Desktop. To set an image, drag the image file from your computer to the area specified, or click the specified area and browse to the file. |
| Image Opacity | Sets the opacity for your background image. The Image Opacity property applies only when Default Layout is set as Desktop and a Background Image is set. |
Header Properties
Header properties affect the header that is always at the top of the project.
The following image shows the portions of the desktop layout header that are affected by Header properties.
| 1 | Main title | 2 | Sub-title | ||
| 3 | Main logo | 4 | Secondary logo | 5 | Log Out button |
The following image shows the portions of the mobile layout header that are affected by Header properties.
| 1 | Menu icon | 2 | Main title |
| 3 | Main logo | 4 | Log Out button |
Notes
- Sub-titles and secondary logos appear only when Default Layout is set as Desktop.
- Header height can be set only when Default Layout is set as Desktop.
The following image demonstrates the Header properties in the Style Manager.
The following is a list of Header properties.
| Property | Purpose |
|---|---|
| Header Color | Specifies a fill for the header. The fill can be a solid color or a gradient. This property can also be used to set opacity. Advanced DGLux5 users can also set an image as the fill. To set an image as the fill, you must upload an image to the current DGLux5 project, as described in Image, and then manually enter the path to the image in the URL field in the Fill pop-up. The Fill pop-up also appears in DGLux5. See Fill and Border Pop-Ups, Fill and Stroke Properties. |
| Main Title | Specifies main title text for the header. |
| Title Font Color | Specifies the font color for the main title text. This color can only be a solid color. This color also affects the Menu icon, in mobile layouts. |
| Sub-Title | Specifies sub-title text for the header. |
| Sub-Title Font Color | Specifies a font color for sub-title text. This color is also used for the Log Out button. This color can only be a solid color. |
| Main Logo | Sets the main logo image to appear next to the project title. To set an image, drag the image file from your computer to the area specified, or click in the specified area and browse to the file. |
| Main Logo Size | Sets the width in pixels of the main logo image. The image content keeps its source aspect ratio. The image will not be made taller than the Header Height. A large image width might cause a gap between the image content and the title. |
| Main Logo Opacity | Sets the opacity of the main logo image. |
| Secondary Logo | Sets the secondary logo image for the header. To set an image, drag the image file from your computer to the area specified, or click in the specified area and browse to the file. |
| Secondary Logo Size | Sets the width in pixels of the secondary logo image. The image content keeps its source aspect ratio. The image will not be made taller than the Header Height. A large image width might cause a gap between the image content and the title. |
| Secondary Logo Opacity | Sets the opacity of the secondary logo image. |
| Header Height | Sets the height in pixels of the header. |
Tree Properties
The properties known as Tree properties affect the navigation menu appearance. These properties apply to tree, breadcrumb, or mobile navigation.
The following image illustrates the portions of tree navigation that are affected by Tree properties.
| 1 | Background color | 2 | Font color | 3 | Selected item color |
| 4 | Selected item font color | 5 | Rounded corners | 6 | Stroke (border) |
The following image illustrates the portions of breadcrumb navigation that are affected by Tree properties.
| 1 | Background color | 2 | Font color | 3 | Selected item color |
| 4 | Selected item font color | 5 | Rounded corner | 6 | Stroke (border) |
The following image illustrates the portions of mobile navigation that are affected by Tree properties.
| 1 | Background color | 2 | Font color | 3 | Selected item color |
| 4 | Selected item font color | 5 | Rounded corner | 6 | Stroke (border) |
The following image shows the Tree properties in the Style Manager.
The following is a list of Tree properties.
| Property | Purpose |
|---|---|
| Inherit Style from Panels | Sets whether to reuse Panel properties as Tree properties. |
| Background Color | Specifies a fill for the navigation menu. The fill can be a solid color or a gradient. This property can also be used to set opacity. Advanced DGLux5 users can also set an image as the fill. To set an image as the fill, you must upload an image to the current DGLux5 project, as described in Image, and then manually enter the path to the image in the URL field in the Fill pop-up. The Fill pop-up also appears in DGLux5. See Fill and Border Pop-Ups, Fill and Stroke Properties. |
| Font Color | Sets the font color for the navigation menu, for all items except the selected item. In mobile navigation, this color also affects Expand and Collapse icons. |
| Selected Item Color | Sets the highlight color for the currently selected item in the navigation menu. You can also use this property to set opacity. |
| Selected Font Color | Sets the font color for the currently selected item in the navigation menu. |
| Rounded Corners | Sets the rounded corner pixel radius. See the images above. |
| Stroke Color | Sets the color of the navigation menu border. See the images above. You can also use this property to set border opacity. |
| Stroke Weight | Sets the thickness of the navigation menu border. See the images above. |
Panels Properties
Panels properties primarily affect the appearance of panels. Panels include items in the navigation tree for which As Popup is enabled. See Navigation Node Properties.
Each panel is affected by Panels properties differently. For example, in the following image, note the position of items affected by the Content Font Color and Header Font Color properties. Also note that some item colors in the image are determined by the Callout Header Color property in the Callouts properties. To see which items are affected by each Panels property, experiment with the Style Manager.
The following image shows the portions of the Weekly tab of the Schedules module panel that are affect by Panels properties.
| 1 | Content Font Color | 2, 4, 7 | Determined by Callout Header Color | 3 | Header Font Color |
| 5 | Header Color | 6 | Stroke (border) |
The following image shows the Panels properties in the Style Manager.
The following is a list of Panels properties.
| Property | Purpose |
|---|---|
| Header Color | Sets the header color for panels. |
| Header Font Color | Sets the header font color for panels. |
| Background Color | Specifies a fill for panels. The fill can be a solid color or a gradient. This property can also be used to set opacity. Advanced DGLux5 users can also set an image as the fill. To set an image as the fill, you must upload an image to the current DGLux5 project, as described in Image, and then manually enter the path to the image in the URL field in the Fill pop-up. The Fill pop-up also appears in DGLux5. See Fill and Border Pop-Ups, Fill and Stroke Properties. |
| Content Font Color | Sets the font color for the content of panels. |
| Rounded Corners | Sets the rounded corner pixel radius for panels, when applicable. |
| Stroke Color | Sets the color of the panel border. You can also use this property to set border opacity. |
| Stroke Weight | Sets the thickness of the panel border. |
| Popup Type | Specifies whether popups are free-floating or tabbed. Free-floating popups can be moved by the user. Tabbed popups are in a fixed location and can be selected using tabs. |
| Popup Width | Sets the panel width. |
| Popup Height | Sets the panel height. |
Callouts Properties
The properties known as Callouts properties primarily affect the appearance of callouts, charts, gauges, and widgets. These objects can be added to pages, templates, and reports. The following image illustrates how these properties affect an object.
| 1 | Header color | 2 | Header font color | 3 | Export button |
| 4 | Background color | 5 | Content font color | 6 | Rounded corner |
| 7 | Stroke (border) |
The following image shows the Callouts properties in the Style Manager.
The following is a list of Callouts properties.
| Property | Purpose |
|---|---|
| Inherit Style from Panels | Sets whether to reuse Panels properties as Callouts properties. |
| Header Color | Sets the header color. You can also use this property to set opacity. |
| Header Font Color | Sets the header font color. This color is also used for the Export button. |
| Background Color | Sets the background color. You can also use this property to set opacity. |
| Content Font Color | Sets the font color for the content. |
| Rounded Corners | Sets the rounded corner pixel radius. |
| Stroke Color | Sets the color of the border. You can also use this property to set border opacity. |
| Stroke Weight | Sets the thickness of the border. |