The Live UI of the Integration Theme is designed to enable extensive customization without affecting the System files.
This allows all future service packs and major versions to be installed with minimal impact to any modifications that have been made.
Customization can be on two levels:
The UI of the Integration Theme default site can be used to customize the following Settings:
There are multiple categories for these settings based on the aspect of the site you want to control:
Additionally the image and description used for your projects can be changed by following the instructions in the topic Project Image, Name and Description.
Customizing the Live UI is done by:
Not all the files need to be copied. Only the files that are to be modified are needed.
DriveWorks Live will always take the files available from the Custom folder first.
Any missing files will be picked up from the System folder.
Once the file has been copied to the relative Custom location the file can be customized.
The files associated to a skin that are typically customized include:
| Item | Notes |
|---|---|
| Pages.json |
This file controls the navigation of the site.
Here you can change page titles and HTML file names for translation into your local language. |
| favicon.ico |
This file is the icon displayed on the tab within the browser.
Placing a your own file in the Custom folder will update the favicon used by the site. |
| \Images | The default images used by the site:
|
| \Icons | The icons used by the site. |
Before undertaking any modifications to the files DriveWorks Live uses it is important to understand the following:
All files that enable the DriveWorks Live Integration Theme Live UI are stored in the location:
%ProgramData%\DriveWorks\[version number]\Live\Themes\Integration\Templates\FrontEnd
The table below identifies the Core (System) and Custom files that are located in the above folder:
| Item | Type | Notes |
|---|---|---|
| \System | System | The files in this folder should not be changed directly.
To customize anything in the System folder, e.g. a page or configuration, copy it across to the relative location in the Custom folder. Files in the Custom folder override files in the System folder. |
Config.json | System | This file should not be changed. |
Pages.json | System | This file should not be changed. |
favicon.ico | System | This file should not be changed. |
*.html | System | These files should not be changed. |
\Command | System | The files in this folder should not be changed. |
\Fonts | System | The files in this folder should not be changed. |
\Icons | System | The files in this folder should not be changed. |
\Images | System | The files in this folder should not be changed. |
\Locatization | System | The files in this folder should not be changed. |
LocalizedResources.json | System |
This file should not be changed.
It contains the default text for the site. |
\Scripts | System | The files in this folder should not be changed. |
\Styles | System | The files in this folder should not be changed. |
| \Custom | This folder should be used to contain any custom pages or configurations that you create, or copy from the originals in the System folder.
All files copied from the System folder should be placed in the relative location within the Custom folder. If the relative folder does not already exist, create the folder to copy the file into. | |
about.txt | System | This file explains the purpose of the Custom folder as detailed above. |
\Styles | System | The file in this folder should be changed. |
Customizations.css | System |
This is where additional CSS customizations should be applied for the site.
See Custom States CSS for the syntax required to declare your own state colors. |
Display Order
When running DriveWorks Live the files in the Custom folder will be read first.
If the required file is not found DriveWorks Live will read the file from the System folder.
To revert any changes, remove the respective file(s) from the Custom folder.
The site will fallback to the default values and files from the System folder.
Custom states can be declared within the Customizations.css file found in the Custom\Styles folder.
This is the easiest method to have unique state names color coded in the Live UI.
To do this the following syntax is required:
:root.light {
--color-state-[yourstatename]-background: [light background color];
--color-state-[yourstatename]-text: [light text color];
}
:root.dark {
--color-state-[yourstatename]-background: [dark background color];
--color-state-[yourstatename]-text: [dark text color];
}
.state-[yourstatename] {
background-color: var(--color-state-[yourstatename]-background);
color: var(--color-state-[yourstatename]-text);
}This allows you to specify both a light and a dark color scheme for your state.
[yourstatename] and be in lower case.