DriveWorks Pro 22

Skins

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:

Skin	Header Image	Page Width	Page Alignment	Page Color	Background Color/Image	Page Scroll Behavior	Responds to Screen Width	Specification Properties Visible on Specification History Module
Black Glass		950px	Centre	White	BG.png	Entire page scrolls	No	No
Blue Glass		950px	Centre	White	BG.png	Entire page scrolls	No	No
Standard		950px	Centre	White	DFDFDF	Entire page scrolls	No	No
Standard Fluid		100%	Left	White	White	Header remains static, page scrolls into header	Yes	No
Carbon Fluid		950px	Centre	#333333	#333333	Entire page scrolls	Yes	No
Tiled Fluid		100%	Centre	White	White	Header remains static, page scrolls into header	Yes	No
Corporate		100%	Centre	Dark	bg.jpg	Full page scrolls	Yes	Yes
Contemporary		100%	Centre	Light	bg.jpg	Header remains static, page scrolls into header	Yes	No

To Change the Skin used in the Web Theme

To select a different Skin follow the steps below:

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

DriveWorks Quick Tips
	DriveWorks Quick Tips: Changing A Skin Changing a skin in DriveWorks Live is an easy way to make your projects look and feel more professional. In this video, we show you how to change a skin and take your existing project to the next level.
DriveWorks Quick Tips are a series of 1 minute videos, available on YouTube, that explain specific functionality. View all Quick Tips

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.

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 Name	Skins
   Location	%ProgramData%\DriveWorks\[version]\Live\Themes\Web\content\system\skins
   Example	C:\ProgramData\DriveWorks\12\Live\Themes\Web\content\system\skins
   Description	DriveWorks 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 Name	Skins
   Location	%ProgramData%\DriveWorks\[version]\Live\Themes\Web\content\custom\skins
   Example	C:\ProgramData\DriveWorks\12\Live\Themes\Web\content\custom\skins
   Description	Skins 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 Folder	Copied Folder	Notes
   Live\Themes\Web\content\system\skins\ Blue Glass	Live\Themes\Web\content\custom\skins\Blue Glass	Rename 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.

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.

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:

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

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