Modifying Colors and Images - VPConnect - English - Foundation 22.1 - OnBase - external


Foundation 22.1

To modify the colors and/or images of the VPConnect web pages, perform the followings steps.

  1. On the application server where the VPConnect product is installed, locate the file structure \\DocsForDeltek\VPConnect\VendorPortal\AppThemes\VendorPortalThemes. This location holds all of the default themes for the VPConnect web pages.
  2. Make a copy of this directory and rename the portion of this path, …\VendorPortalThemes, to anything you want. For example:

    OLD: \\DocsForDeltek\VPConnect\VendorPortal\AppThemes\VendorPortalThemes

    NEW: \\DocsForDeltek\VPConnect\VendorPortal\AppThemes\CustomerTheme


    It is highly recommended that you do not modify the App_Themes/VendorPortalThemes folder, as these files can be overwritten with future upgrades to VPConnect.

  3. Modify the Web.config file located under the \\IAConnect\VPConnect\VendorPortal path to reflect this new directory name. This element is used to indicate which theme is being used to skin VPConnect. In this file, look for the tag <pages theme>. Modify this setting to the new directory name you just created. For example:

    Old: <pages theme="VendorPortalThemes">

    . New: <pages theme="CustomerTheme">


    Do not modify any files under any other directories other than the \\IAConnect\VPConnect\VendorPortal\AppThemes\{new name} directory.

  4. In the new directory, edit the ….\CustomerTheme\ file. Change the folder name for the following entries to reflect the new directory name. The following example shows the name already changed to the example, "CustomerTheme".

    <%-- Images --%>

    <asp:Image SkinId="logo" runat="server" ImageUrl="~/App_Themes/CustomerTheme/Images/logo_tag.jpg" />

    <asp:Image SkinId="spinner" runat="server" ImageUrl="~/App_Themes/CustomerTheme/Images/spinner3-black.gif" />

    <asp:Image SkinId="magnifier" runat="server" ImageUrl="~/App_Themes/CustomerTheme/Images/magnifier.png" />

    <asp:Image SkinId="close" runat="server" ImageUrl="~/App_Themes/CustomerTheme/Images/Close.png" />

    <asp:Image SkinId="delete" runat="server" ImageUrl="~/App_Themes/CustomerTheme/Images/delete.png" />

    <asp:Image SkinID="question" runat="server" ImageUrl="~/App_Themes/CustomerTheme/Images/questionmark.png" />

    <%-- ImageButtons --%>

    <asp:ImageButton SkinID="DialogCancel" runat="server" ImageUrl="~/App_Themes/CustomerTheme/Images/close_button.gif" />

    <asp:ImageButton SkinID="Cancel" runat="server" ImageUrl="~/App_Themes/CustomerTheme/Images/Close.png" />

    <asp:ImageButton SkinID="Copy" runat="server" ImageUrl="~/App_Themes/CustomerTheme/Images/Copy.png" />

    <asp:ImageButton SkinID="PDF" runat="server" ImageUrl="~/App_Themes/CustomerTheme/Images/pdf16x16.png" />

    <asp:ImageButton SkinID="AddLabor" runat="server" ImageUrl="~/App_Themes/CustomerTheme/Images/AddLabor.gif" />

    <asp:ImageButton SkinID="AddTravel" runat="server" ImageUrl="~/App_Themes/CustomerTheme/Images/AddTravel.gif" />

    <asp:ImageButton SkinID="AddODC" runat="server" ImageUrl="~/App_Themes/CustomerTheme/Images/AddODC.gif" />

    <asp:ImageButton SkinID="Question" runat="server" ImageUrl="~/App_Themes/CustomerTheme/Images/questionmark.png" />

    <asp:ImageButton SkinId="magnifier" runat="server" ImageUrl="~/ App_Themes/CustomerTheme/Images/magnifier.png" />