Edit a Style
You can customize the visual style of your project at any time.
To duplicate an existing style and edit the copy:
Click Style or Manage Project Style.
The Style Manager appears. A preview of your project is behind it.
Clone an existing style by clicking it and selecting
Clone. Then, click either the original or the copy, and click 
Edit.
- Use the Style Manager to edit this style.
Click Save.
Your changes are saved. You can close your browser, or go to a different part of Project Assist.
- To apply the style to this project, make sure it is selected when you leave this part of Project Assist.
Project Assist 2.0 Style Properties
Project Properties
Project Properties
Project Properties
Project properties affect the entire project.
| Property | Purpose |
|---|---|
| Default Layout | Specify whether your project is laid out with a desktop-style or mobile-style layout when it is viewed on a desktop computer. On a mobile device, your project always appears with mobile layout. |
| Navigation | Choose whether desktop layout uses a navigation tree or hierarchical breadcrumbs. |
| Background Color | Select a background fill for pages in your project. |
| Background Image | Set a background image to use behind your project. Drag the image file from your computer to the area specified. Background images appear in desktop layout. |
| Image Opacity | Set the opacity for your background image. Background images appear in desktop layout. |
Header Properties
Header Properties
Header Properties
Header properties affect the header that is always at the top of the project.
| Property | Purpose |
|---|---|
| Header Color | Select a fill for your header. The fill can be a solid color, gradient, or image. To set an image as your header fill, you must upload an image to this DGLux5 project as described in Image, and then manually enter the path to the image in the URL field in the color picker pop-up.
|
| Main Title | Enter a title for your header. |
| Title Font Color | Select a font color for your title. |
| Sub-Title* | Enter a sub-title for your header. This text appears directly below the header. |
| Sub-Title Font Color* | Select a font color for your sub-title. |
| Main Logo | Set the main logo image to appear next to your project title. Drag the image file from your computer to the area specified. |
| Main Logo Size | Set the width of your main logo image, in pixels. The image keeps its aspect ratio and cannot be taller than the Header Height. |
| Main Logo Opacity | Set the opacity of your main logo image. |
| Secondary Logo* | Set the secondary logo image for your header. Drag the image file from your computer to the area specified. |
| Secondary Logo Size* | Set the pixel width of the secondary logo image for your header. The image keeps its aspect ratio and cannot be taller than the Header Height. |
| Secondary Logo Opacity* | Set the opacity of the secondary logo image for your header. |
| Header Height* | Set the pixel height of your header. |
*Affects the header in the desktop layout only. Choose between the desktop and mobile layouts in the Project Properties.
Tree Properties
Tree Properties
Tree Properties
Tree properties affect the navigation menu appearance for tree, breadcrumb, and mobile navigation. Choose between navigation types under Project Properties.
| Property | Purpose |
|---|---|
| Inherit Style from Panels | Set whether your navigation menu uses the same properties you define for panels. |
| Background Color | Set the background color for your navigation menu. |
| Font Color | Set the font color for your navigation menu. |
| Selected Item Color | Set the highlight color for the currently selected item in your navigation menu. |
| Selected Font Color | Set the font color for the currently selected item in your navigation menu. |
| Rounded Corners | Set how much to round the corners of your navigation menu, and the box that highlights the selected item. |
| Stroke Color | Set the color of the outline for your navigation menu. |
| Stroke Weight | Set the thickness of the outline for your navigation menu. |
Panels Properties
Panels Properties
Panels Properties
Panels properties affect the appearance of the panels that display devices and alarm consoles.
| Property | Purpose |
|---|---|
| Header Color | Set the header color for your panels. |
| Header Font Color | Set the header font for your panels. |
| Background Color | Set the background color for your panels. |
| Content Font Color | Set the font color for the content of your panels. |
| Rounded Corners | Set how much to round the corners of your panels. |
| Stroke Color | Set the color of the outline for your panels. |
| Stroke Weight | Set the thickness of the outline for your panels. |
| Popup Type | Specify whether your 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. A popup is a panel that displays a device. |
| Popup Width | Set the width for popups that display devices. |
| Popup Height | Set the height for popups that display devices. |
Callouts Properties
Callouts Properties
Callouts Properties
Callouts properties affect the appearance of widgets. Widgets include charts, lists, and callouts.
| Property | Purpose |
|---|---|
| Inherit Style from Panels | Set whether your widgets use the same properties you define for panels. |
| Header Color | Set the header color for your widgets. |
| Header Font Color | Set the header font color for your widgets. |
| Background Color | Set the background color for your widgets. |
| Content Font Color | Set the font color for the content of your widgets. |
| Rounded Corners | Set how much to round the corners of your widgets. |
| Stroke Color | Set the color of the outline for your widgets. |
| Stroke Weight | Set the thickness of the outline for your widgets. |