DriveWorks Pro 15: How To: Customize the DriveWorks Live Web Theme (KB13120601) [send feedback...]

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:

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

The table below identifies the Core and Custom files that are located in the \Web folder:

ItemTypeNotes
DriveWorks.configCustomThis file contains the following information:
  • Group Connection String - Will only need to be adjusted if running DriveWorks Live through IIS.
  • Preview Service Location - Will only need to be adjusted when a project uses the 3D Preview control.
Global.asaxSystemThis file should not be changed.
Theme.drivethemeSystemThis file should not be changed.
Web.configCustom
\binSystemThe files in this folder should not be changed.
\contentContains the custom folder.

Web.config

SystemThis file should not be changed.

\system

SystemThe files in this folder should not be changed directly.

To customize anything in the system folder, e.g. a skin or module, copy it across to the custom folder.

Files in the custom folder override files in the system folder.

error.cshtml

SystemThis file should not be changed.

navigation.xml

SystemThis file should not be changed.

pages.xml

SystemThis file should not be changed. This file is copied to the \custom folder when a Live session is started.

\components

SystemThe files in this folder should not be changed.

\fonts

SystemThe files in this folder should not be changed.

\handlers

SystemThe files in this folder should not be changed.

\modules

SystemThe files in this folder should not be changed directly.

To customize anything in the system folder, e.g. a skin or module, copy it across to the custom folder.

Files in the custom folder override files in the system folder.

\settings

SystemThe files in this folder should not be changed directly.

To customize anything in the system folder, e.g. a skin or module, copy it across to the custom\settings folder.

Files in the custom folder override files in the system folder.

main.js

SystemThis file controls which mode the Session Timeout runs in. See How To: Extend the Timeout In DriveWorks Live for more information. This file should not be changed directly.

To customize anything in the system folder, e.g. a skin or module, copy it across to the custom\settings folder.

Files in the custom folder override files in the system folder.

\skins

SystemThe files in this folder should not be changed directly.

To customize anything in the system folder, e.g. a skin or module, copy it across to the custom folder.

Files in the custom folder override files in the system folder.

\custom

This folder should be used to contain any custom modules or skins that you create, or copy from the originals in the system folder.

pages.xml

SystemThis file should not be changed. It will be replaced with the file of the same name from the \system folder when a Live session is started.

\uploads

SystemThis folder is used to contain any uploads from the image upload module.

\modules

CustomThis folder should be used to contain any custom modules that you create, or copy from the originals in the system folder.

\skins

CustomThis folder should be used to contain any custom skins that you create, or copy from the originals in the system folder.
\setupSystemThe files in this folder should not be changed.
\systemSystemThe files in this folder should not be changed.

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.

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.
Not all the files in the skin file 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.

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:

FileDescription
bg.pngBackground image. (Not all skins require this file)
skinImage.pngA thumbnail view of the skin for display on the \setup skins page.
Header and Banner image filesThe images to use for any required header and banners. (Not all skins require these files)

skin.css

skin.colors.css

skin.fonts.css

The cascading style sheet files to set layout, colors and fonts used for the skin.
skinProperties.xmlBuilt in view style for the skin (Metro or Main)

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.

If the original module name is kept for the copied module, the original module will not be available for selection.
Not all the files in the module file 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.

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:

File NameDescription
toolbox.pngThe icon used to display the module when the page is in Edit mode.
module.xmlStores the settings of the module. (Not all modules require this file)
controller.cshtmlDecides what to render. Receives the settings from the module.xml file (if required).
\views (folder)The files in this folder decide what is displayed to the user.


Knowledge Base Article Ref:KB13120601

Table of Contents