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 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 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 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 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 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.

Previous: Apply a Style

Next: Video: Manage Navigation