DriveWorks Pro 22

How To: Customize the DriveWorks Live Web Theme (KB13120601)

Customizing the DriveWorks Live Web Theme

The Web Theme is optimized to allow extensive modifications without affecting the system files.

This will allow 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:

• Standard - Involves using the UI to make modifications.
• Advanced - Involves copying core files to be customized and using proprietary editors to alter settings.

Standard Customization

The UI of DriveWorks Live can be used to customize the following:

• Theme Selection - Please refer to: To Select a Theme for information on doing this.
• Skin selection (Web Theme) - Please refer to: To Change the Skin used in the Web Theme for information on doing this.
• Module settings and position (Web Theme) Please refer to: Modules for information on doing this.

Additionally the image and description used for your projects can be changed by following the instructions in the topic Project Image, Name and Description.

Advanced Customization

Before undertaking any modifications to the files DriveWorks Live uses it is important to understand the following:

• The Folder Structure of the themes used to display your projects in a browser.
• The System Files that will be overwritten when installing service packs.
• The Custom Files that are intended to be modified.

Folder Structure

All files that enable DriveWorks Live are stored in the location:

%ProgramData%\DriveWorks\[version number]\Live\Themes

The Themes folder contains the following sub folders:

• \Application

  All files required for the Application Theme are stored here.

  These files are continually updated by DriveWorks and should not be modified at all.
• \Web

  All files required for the Web Theme are stored here. The Web Theme is highly customizable.

System Files and Custom Files

See System Files and Custom Files for a table of all system and custom files for the Web Theme.

Skin Customization

Customizing a Skin is done by:

1. Identify a system skin to base the customization on.
2. Copy the identified skin to the \custom folder.
3. Apply the customizations to the copied files.

Identify the System Skin

To identify a skin to base your customization on:

1. In DriveWorks Administrator go to Personal Web Edition.
2. Click the Theme button and select Web Theme.
3. Start PWE by clicking the Start button.
4. When your browser loads log onto the implementation using your credentials (must have administrator privileges).
5. Type /setup at the end of the URL.
6. Click the skins link at the top of the setup page.
7. Click Preview on the skin options to find the required skin. Make a note of the name.

   

Copying a Skin

To copy a skin, for customizing, follow the steps below:

1. Locate the skin folder from %ProgramData%\DriveWorks\[version number]\Live\Themes\Web\content\system\skins.

   This will be one of the folders from:

   • Black Glass
   • Blue Glass
   • Carbon Fluid
   • Contemporary
   • Corporate
   • Standard
   • Standard Fluid
   • Tiled Fluid
2. Copy the skin folder to %ProgramData%\DriveWorks\[version number]\Live\Themes\Web\content\custom\skins.

   It is the files in this folder that should be modified to create the new skin.

3. Rename the folder of the copied skin. This is optional to ensure the original skin is displayed.
   If the original skin name is kept for the copied skin, the original skin will not be available for selection.

Customizing a Skin

Once the Skin has been copied to the \custom\skins folder the files in the skin folder can be customized.

The files associated to a skin that are typically customized include:

Module Customization

Modules give each of the web pages a function. The method to apply a module can be generalized as:

• Drag a module from the toolbox into position on a page.
• Apply any settings to the module.
• View the module in action

  A module can be viewed in 3 modes:

  • View Mode - The normal view of the module a user would see.
  • Edit Mode - The view of the module during Edit mode in a browser.
  • Edit Settings Mode - The view of the module that is being edited to have settings applied.

Customizing a module is done by:

1. Identify a system module to base the customization on.
2. Copy the identified module to the \custom folder.
3. Apply the customizations to the copied files.

Identify the System Module

This is simply a case of running through the specification process using PWE and noting the URL and position of the module you require.

Once the module is found enter edit mode on the page and the name will be displayed in the module.

Copying a Module

To copy a module, for customizing, follow the steps below:

1. Locate the module folder from %ProgramData%\DriveWorks\[version number]\Live\Themes\Web\content\system\modules.

   This will be one of the folders from:

   • Image Upload
   • Integration
   • Login
   • Markup
   • Menu
   • Projects
   • Specification Details
   • Specification Form
   • Specification History
   • Specification Navigation
   • Specification Tasks
2. Copy the module folder to %ProgramData%\DriveWorks\[version number]\Live\Themes\Web\content\custom\modules.

   It is the files in this folder that should be modified to create the new skin.

Customizing a Module

Once the Module has been copied to the \custom\modules folder the files in the modules folder can be customized.

The files associated to a module that are typically customized include: