DriveWorks Pro 15: Skins [send feedback...]

Skins

Skins provide the appearance and page behavior characteristics to a theme.

The Web theme uses the Corporate Skin by default, the skins that are available and their main characteristics are:

SkinHeader ImagePage WidthPage AlignmentPage ColorBackground Color/ImagePage Scroll BehaviorResponds to Screen WidthSpecification Properties Visible on Specification History Module
Black Glass950pxCentreWhiteBG.pngEntire page scrollsNoNo
Blue Glass950pxCentreWhiteBG.pngEntire page scrollsNoNo
Standard950pxCentreWhite

DFDFDF

Entire page scrollsNoNo
Standard Fluid100%LeftWhiteWhiteHeader remains static, page scrolls into headerYesNo
Carbon Fluid950pxCentre#333333#333333Entire page scrollsYesNo
Tiled Fluid100%CentreWhiteWhiteHeader remains static, page scrolls into headerYesNo
Corporate100%CentreDarkbg.jpgFull page scrollsYesYes
Contemporary100%CentreLightbg.jpgHeader remains static, page scrolls into headerYesNo

To Change the Skin used in the Web Theme

To select a different Skin follow the steps below:

DriveWorks Live is required to be run as an administrator when modifying the theme files. To do this you must be logged in as an administrator on your machine.

  1. Select Live from Stage 2: Specification from the task explorer of DriveWorks Live
  2. Click Start to start DriveWorks Live.
  3. Using your web browser enter the address of the DriveWorks Live site, this will be  http://localhost:8020 by default.
  4. When the Log in screen appears in your browser enter your credentials.

    The credentials used to Login must have the setting Administer Group Security applied.

    See the section To Edit a Team's Members and Permissions in the topic Security Settings for more information.

  5. Click Login.
    The address bar of your browser will display http://localhost:8020/
  6. Select Live from the task explorer of DriveWorks Live
  7. Click Start to start DriveWorks Live, Launch your web browser and enter the appropriate URL in the address bar as detailed below:
    From the same machine DriveWorks Live is installedFrom another machine with internet access

    http://localhost:8020

    DriveWorks Live defaults to port 8020. This can be changed from Live Settings, if you are unsure if this has been changed check the settings applied in DriveWorks Live

    http:// URLtoYourDriveWorksLiveSite

    Substitute URLtoYourDriveWorksLiveSite with the URL to your DriveWorks Live site

  8. When the Log in screen appears in your browser enter your credentials:

    The credentials used to Login must have the setting Administer Group Security applied.

    See the section To Edit a Team's Members and Permissions in the topic Security Settings for more information.

  9. Click Login.
  10. Once logged in, type setup at the end of the current address shown in the browser address bar, click Go to or hit Return to go to the address.
    The address bar of your browser will now be http://localhost:8020/setup/Default.cshtml

    The setup page below will now be displayed.

  11. Click the skins link from the page navigation just under the DriveWorks Live Setup heading.

    The skin.cshtml page will now be displayed.

  12. Click the Preview link under the required skin to open a new page that displays how the skin will look.
  13. Return to the skin.cshtml page and click the Apply link, under the required skin, to apply the selected skin to the theme.

Create a Custom Skin

The quickest and easiest method to create a custom skin is to base it on an existing skin supplied by DriveWorks. Browse through the existing skins (as detailed above) to find a skin that is suitable for modification.

Custom Skins and Modules

When presenting Skins or Modules in the application DriveWorks will present all items in the folder

%ProgramData%\DriveWorks\[version]\Live\Themes\Web\content\custom folder

and then from the folder

%ProgramData%\DriveWorks\[version]\Live\Themes\Web\content\system folder

Items in the \system folder are maintained by DriveWorks (for future releases) and should NOT be modified.

Items in the \custom folder will not be overwritten by future releases of DriveWorks, therefore any customization will be available when future releases are installed.

You can create your own skins, which will be available from the Skin.cshtml page by following the steps below:

  1. Locate the folder for the skin to base your modified skin on.

    Skins folder Location

    The location of the default skins that are installed when DriveWorks is installed is:

    Windows 7, Windows 8, Windows 10
    Folder NameSkins
    Location %ProgramData%\DriveWorks\[version]\Live\Themes\Web\content\system\skins
    Example C:\ProgramData\DriveWorks\12\Live\Themes\Web\content\system\skins
    DescriptionDriveWorks Live Skin Files are stored here **DO NOT MODIFY**

  2. Copy the chosen Skin folder (This will be the folder named Black Glass, Blue Glass, Standard or Standard Fluid) to the custom\skins folder.

    Skins folder Location

    The location where any default Skins folder should be copied, prior to customization, is:

    Windows 7, Windows 8, Windows 10
    Folder NameSkins
    Location%ProgramData%\DriveWorks\[version]\Live\Themes\Web\content\custom\skins
    Example C:\ProgramData\DriveWorks\12\Live\Themes\Web\content\custom\skins
    DescriptionSkins folder is an empty folder for copying parts from the Web theme to enable modification

  3. Rename the folder that has just been copied to be the name required for your new skin, for example
    Original Skin FolderCopied FolderNotes
    Live\Themes\Web\content\system\skins\ Blue GlassLive\Themes\Web\content\custom\skins\Blue GlassRename the folder indicated by Blue Glass to My Skin (for example)
  4. The new folder will now be displayed in the Skins.cshtml page, and can be selected to be used in the web theme (see To Change the Skin Used in the Web Theme above).
  5. The files included in the new folder can then be modified to customize your own skin. The following headings give some guidelines for modifications that can be applied.

Create an Image for your Custom Skin that is Displayed on the Skin Chooser Page

Your own image can be used for the new skin by creating an image with the following properties:

  • Dimensions: 128w x 60h
  • Resolution: 96 dpi
  • File Name: SkinImage.png

Follow the steps below to display your image:

  1. Place the new image in the folder created for your skin; for example Live\Themes\Web\content\custom\skins\My Skin.
  2. This folder will already contain an image of the same name, confirm your acceptance to overwrite the file in any dialog that appears.

Create and Change the Header Image for your Custom Skin

Follow the steps below to create and display your image:

  1. Locate the existing image in the folder created for your skin; for example Live\Themes\Web\content\custom\skins\My Skin (depending on the skin that was copied this could be Header.png or Header950.png)
  2. Make a note of the image dimensions and create your own image using the same dimensions.
  3. Run Live and log on to the group.
  4. Go to the setup page (add /setup to the end of the URL) and click the skin settings link.

  5. Click the Edit link to change the header image to use.
  6. Click Browse and locate the new header image you created.
  7. Once it has been uploaded successfully, click the Save button.
  8. Click on site home to return to your skin and check that your new header image appears.

The new skin will now display the new header image.

When modifying files that are currently in use in the DriveWorks Live or PWE session you may need to do one of the following to view the updates:

  • Refresh the web page in your browser
  • Stop and Restart the current session of DriveWorks Live or PWE

Create and Change the Banner Image

If the new skin was based on the Standard skin there will be an image named Banner.png

Follow the steps below to create and display your image:

  1. Locate the existing image in the folder created for your skin; for example Live\Themes\Web\content\custom\skins\My Skin
  2. Make a note of the image dimensions and create your own image using the same dimensions.
  3. Run Live and log on to the group.
  4. Go to the setup page (add /setup to the end of the URL) and click the skin settings link.

  5. Click the Edit link to change the banner image to use.
  6. Click Browse and locate the new banner image you created.
  7. Once it has been uploaded successfully, click the Save button.
  8. Click on site home to return to your skin and check that your new banner image appears.

The new skin will now display the new banner image.

When modifying files that are currently in use in the DriveWorks Live or PWE session you may need to do one of the following to view the updates:

  • Refresh the web page in your browser
  • Stop and Restart the current session of DriveWorks Live or PWE

Create a Background Image and Change the Background Color

Background Image

If the new skin was based on the Black Glass or Blue Glass skin there will be a background image named BG.png

If the skin.css stylesheet has not been modified the easiest way of changing the background image for your new skin is to replace the existing image in the new skin folder.

Follow the steps below to create and display your image:

  1. Locate the existing image in the folder created for your skin; for example Live\Themes\Web\content\custom\skins\My Skin
  2. Make a note of the File Name and Image dimensions, create your own image using the same dimensions and file name.
  3. Replace the existing image in the My Skinfolder with the new image
  4. Confirm your acceptance to overwrite the file in any dialog that appears.

The new skin will now display the new background image.

Background Color

When using a skin that has a fixed page width the web page background color can be changed by:

Cascading Style Sheet files can be edited in a text editor application such as Notepad
  1. Open the Skin.Colors.css file located in the new skin folder; for example Live\Themes\Web\content\custom\skins\My Skin\Skin.Colors.css
  2. Locate the color attribute within the body tag in the Skin.css file
  3. replace the existing hexadecimal value with the new hexadecimal value that represents the color required for your background.
  4. Save and close the modified CSS file

When modifying files that are currently in use in the DriveWorks Live session you may need to do one of the following to view the updates:

  • Refresh the web page in your browser
  • Stop and Restart the current session of DriveWorks Live.

Advanced Modifications

If you are familiar with cascading style sheets further elements can be modified to suit your preferences by:

  1. Open the .css files located in the new skin folder; for example Live\Themes\Web\content\custom\skins\My Skin\Skin.css
  2. Locate the required style definitions and modify to suit your preferences.
  3. Save and close the modified .css file
Skin specific css is broken up over multiple files. All skins will have at least three .css files for controlling the appearance of the skin:
  • Skin.Colors.css - Contains the colors used in the Skin.
  • Skin.Fonts.css - Contains the fonts used in the Skin.
  • Skin.css - All other styling, such as layout, will be in this file.

Skins that respond to screen width will usually have a responsive.css file.

This contains css concerned with sizes or layout that may need to change depending on screen size.

When modifying files that are currently in use in the DriveWorks Live or PWE session you may need to do one of the following to view the updates:

  • Refresh the web page in your browser
  • Stop and Restart the current session of DriveWorks Live.

Table of Contents