Documentation for CXO-Cockpit Reporting Suite 5.0, click for CXO-Cockpit Reporting Suite 4.3 Documentation or check the CXO-Cockpit Website.

How to customise the web interface so I get my company logo?

From CXO Cockpit Reporting Suite Documentation
Jump to: navigation, search

Within the CXO-Cockpit & CXO-Viewer websites you can use your own company logo, this article describes how.

It is assumed that the CXO-Cockpit Website installation is in the default location: C:\Inetpub\wwwroot\CXOCockpit.

CXO-Cockpit version 4.3.1

CXO-Cockpit (Default Theme)

To set the company logo of the Default theme follow these steps:

  1. Obtain an image file of the company logo (should be scaled down from the image used for the Default Theme). This should be a GIF or PNG file as the logo should have a transparent background. Recommended height is 31 px
    Note: Internet Explorer 6 does not support transparencies in PNG files
  2. Copy the obtained image into the following CustomStyles folder, subfolder Images found in the root of the Website:
    C:\Inetpub\wwwroot\CXOCockpit\CustomStyles\Images
  3. Open the CockpitCustomStyle.css stylesheet contained in the CustomStyles folder for editing:
    C:\Inetpub\wwwroot\CXOCockpit\CustomStyles\CockpitCustomStyle.css
    Note: If the file is not there, rename file CockpitCustomStyle.example.css to CockpitCustomStyle.css
    Note: This file is "read-only" by default, so you will have to edit the file properties and un-check this flag to make changes to the file
  4. Near the end of this text file is the following text of which you will need to modify the following text with the name of the image file you just copied in the previous steps:
    /* Cockpit Logo */
    table.MainTable tr.MainMenuTitleBar td
    {
    background: Transparent url(Images/mycompanylogo.png) no-repeat 9px 9px;
    }
  1. (OPTIONAL) If the position of the image in the Website is not correct, modify the following text to better position the copied image:
    /* Cockpit Logo */
    table.MainTable tr.MainMenuTitleBar td
    {
    background: Transparent url(Images/mycompanylogo.png) no-repeat 9px 9px;
    }

CXO-Viewer (Simple Blue Theme)

To set the company logo of the SimpleBlue theme follow these steps:

  1. Obtain an image file of the company logo (should be scaled down from the image used for the Default Theme). This should be a GIF or PNG file as the logo should have a transparent background. Recommended height is 31 px
    Note: Internet Explorer 6 does not support transparencies in PNG files
  2. Copy the obtained image into the following CustomStyles folder, subfolder Images found in the root of the Website:
    C:\Inetpub\wwwroot\CXOCockpit\CustomStyles\Images
  3. Open the ViewerCustomStyle.css stylesheet contained in the CustomStyles folder for editing:
    C:\Inetpub\wwwroot\CXOCockpit\CustomStyles\ViewerCustomStyle.css
    Note: If the file is not there, rename file ViewerCustomStyle.example.css to ViewerCustomStyle.css
    Note: This file is "read-only" by default, so you will have to edit the file properties and un-check this flag to make changes to the file
  4. Near the end of this text file is the following text of which you will need to modify the following text with the name of the image file you just copied in the previous steps:
    table.MainTable tr.MainMenuTitleBar .left
    /* Cockpit Logo For Viewer */
    {
        background: Transparent url(Images/mycompanylogo.png) no-repeat 0px 2px;
        height: 34px;
    }
    /* Cockpit Logo For Printing */
    table.MainTable tr.MainMenuTitleBar .PrintHeader
    {
        background: Transparent url(Images/mycompanylogo.png) no-repeat 0px 2px;
        height: 34px;
    }


  5. (OPTIONAL) If the position of the image in the Website is not correct, modify the following text to better position the copied image:
    /* Cockpit Logo For Viewer */
    {
        background: Transparent url(Images/mycompanylogo.png) no-repeat 0px 2px;
        height: 34px;
    }
    /* Cockpit Logo For Printing */
    table.MainTable tr.MainMenuTitleBar .PrintHeader
    {
        background: Transparent url(Images/mycompanylogo.png) no-repeat 0px 2px;
        height: 34px;
    }


CXO-Cockpit versions prior to 4.3.1

CXO-Cockpit (Default Theme)

To set the company logo of the Default theme follow these steps:

  1. Obtain an image file of the company logo. This should be a GIF or PNG file as the logo should have a transparent background.
    Note: Internet Explorer 6 does not support transparencies in PNG files
  2. Copy the obtained image into the following Theme folder found in the root of the Website (emphasis placed on Theme folder name):
    C:\Inetpub\wwwroot\CXOCockpit\App_Themes\_DefaultBase\Images
  3. Open the _ccv.css stylesheet contained in the Theme following theme folder fopr editing (emphasis placed on Theme folder name):
    C:\Inetpub\wwwroot\CXOCockpit\App_Themes\Default
    Note: This file is "read-only" by default, so you will have to edit the file properties and un-check this flag to make changes to the file.
  4. Near the end of this text file is the following text of which you will need to modify the following text with the name of the image file you just copied in the previous steps:
    table.MainTable tr.MainMenuTitleBar td
    {
    background: Transparent url(../_DefaultBase/Images/cxologo.png) no-repeat 9px 9px;
    }
  5. (OPTIONAL) If the position of the image in the Website is not correct, modify the following text to better position the copied image:
    table.MainTable tr.MainMenuTitleBar td
    {
    background: Transparent url(../_DefaultBase/Images/cxologo.png) no-repeat 9px 9px;
    }

After an upgrade or patch the logo will not be overwritten for as long a different filename is used.

CXO-Viewer (Simple Blue Theme)

To set the company logo of the SimpleBlue theme follow these steps:

  1. Obtain an image file of the company logo (should be scaled down from the image used for the Default Theme). This should be a GIF or PNG file as the logo should have a transparent background.
    Note: Internet Explorer 6 does not support transparencies in PNG files
  2. Copy the obtained image into the following Theme folder found in the root of the Website (emphasis placed on Theme folder name):
    C:\Inetpub\wwwroot\CXOCockpit\App_Themes\_SimpleBlueBase\Images
  3. Open the _ccv.css stylesheet contained in the Theme following theme folder fopr editing (emphasis placed on Theme folder name):
    C:\Inetpub\wwwroot\CXOCockpit\App_Themes\SimpleBlue
    Note: This file is "read-only" by default, so you will have to edit the file properties and un-check this flag to make changes to the file.
  4. Near the end of this text file is the following text of which you will need to modify the following text with the name of the image file you just copied in the previous steps:
    table.MainTable tr.MainMenuTitleBar
    {
    background: Transparent url(../_SimpleBlueBase/Images/cxoviewerlogo.png) no-repeat 0px 2px;
    height: 34px;
    }
  5. (OPTIONAL) If the position of the image in the Website is not correct, modify the following text to better position the copied image:
    table.MainTable tr.MainMenuTitleBar
    {
    background: Transparent url(../_SimpleBlueBase/Images/cxoviewerlogo.png) no-repeat 0px 2px;
    height: 34px;
    }

After an upgrade or patch the logo will not be overwritten for as long a different filename is used.