Subscribe to PortalGuard's Quarterly Newsletter for News & Updates on the Latest Release! Click to Subscribe

PortalGuard Branding Guide

Problem

You would like to update the User Interface of your PortalGuard website with basic Branding Changes: Background Color, Logos, etc.

Solution

As part of installing PortalGuard, numerous files are unpacked on the IIS server. These files contain the ASPX, CSS and JavaScript that control PortalGuard’s user interface. The steps below cover the most common UI Changes for Branding Purposes.  If you have the skills and the know-how, please feel free to customize the website to your liking

Quick Navigation:

Basic Branding Changes

Files to Modify:

  • C:\inetpub\PortalGuard\_layouts\images\PG\css\style.css
    • Background colors, Button Colors, Dialogue Headers, Font Colors, etc.
  • C:\inetpub\PortalGuard\_layouts\images\PG\js\pg_custom.js
    • Text and Other Copy changes (i.e. headings or instructions)
  • C:\inetpub\PortalGuard\_layouts\PG\login.aspx
    • Main login logo
 Important Note:You should always make backups of files before you modify them should you need to revert back to a previous version. Before continuing on with this article, please backup the files listed above.

Change the Background Color

Pertinent File(s):
    • style.css
  1. Edit the 'style.css' file in Notepad++ or a similar administrative Text Editor
  2. Search for the 'body' section
    • This should be near the top of the file
  3. To use a Gradient but with different colors:
    • Update the 'background-color:' and the following 'background:' elements to the appropriate color codes
      • Hex codes are typically used, but RGBA will work also
      • Change the Background Gradient Colors
  4. To use a solid color:
    • Update the 'background-color:' element and remove the trailing 'Background:' elements
      • Use a Solid Color for the Background
  5. Save the file. 
  6. Refresh/Reopen the Login page to note the difference

Change the Background to an Image

Pertinent File(s):
    • style.css
  1. Edit the 'style.css' file in Notepad++ or a similar administrative Text Editor
  2. Modify the 'body' section with the following five (5) attributes:
    • background-image: url(../images/NEWIMAGE.jpg);
    • background-size:cover;
    • background-repeat: no-repeat;
    • background-attachment: fixed;
    • overflow-x:hidden;
      • Change the "NEWIMAGE.jpg" text to match the filename and extension (e.g. ".png") off your new background image
      • Use a Background Image
  3. Copy your new background image to the C:\Inetpub\PortalGuard\_Layouts\Images\PG\images folder
  4. Save the file. 
  5. Refresh/Reopen the Login page to note the difference

Change the Dialogue Header Color

Pertinent File(s):
    • style.css
  1. Edit the 'style.css' file in Notepad++ or a similar administrative Text Editor
  2. Search for 'dlghdr'
    • Change the dialogue header color
  3. Modify the 'background-color:' attribute to change the background color of the Dialogue Headers throughout the Login screen and various enrollment/Self-Service screens
  4. Save the file.
  5. Refresh/Reopen the Login page to note the difference

Change the Button Colors

Pertinent File(s):

    • style.css
  1. Edit the 'style.css' file in Notepad++ or a similar administrative Text Editor
  2. Search for 'PGButton'
    • Modify the 'background-color:' attribute to change the base background color of all Buttons on the Login screen and throughout the various enrollment and Self-Service screens
  3. Search for 'PGButton:hover' (this should be just below the 'PGButton' entry
    • Modify the 'background-color:' attribute to change the background color of all buttons when they are hovered over
      • Change Button Colors
  4. Save the file.
  5. Refresh/Reopen the Login page to note the difference

Change the Logo to Something Other than the PortalGuard Shield

Pertinent File(s):
    • login.aspx
    • pg_custom.js
  1. Upload your logo to C:\Inetpub\PortalGuard\_layouts\images\PG\images\
  2. Edit the 'login.aspx' file in Notepad++ or a similar administrative Text Editor
  3. Search for 'logoimg'
    • Update the 'src=' element to reflect the path to your logo
    • Change the Login Page Logo
  4. Save the file.
  5. Edit the 'pg_custom.js' file in Notepad++ or a similar administrative Text Editor
  6. Search for 'getlogohtml'
    • Update the 'src=' element defined within the 'return' element here. Similar to above, point this to your updated logo file.
      • Change other logo images
    • This will update the logo that appears on the Account Management Page, SSO Jump Page, the Help Desk Console, and the Admin Dashboard.  If you want a smaller file, simply upload a new file to the same folder as your previous logo, and change the path here.
  7. Save the file. 
  8. Refresh/Reopen the Login page to note the difference

Invalidate All Browser Caches

Prior to PortalGuard Version 6.0.0.0

Once you have finished making changes to the UI, you can ensure all users' browsers pick up the changes by invalidating the cached versions of the resources in the browser. To do so, follow these steps:

  1. Edit the 'login.aspx' file in Notepad++ or a similar administrative Text Editor
  2. Search for the name of the CSS or JS file that was changed (e.g. 'style.css)
    • Alternatively, you may simply search for '<head>' to be brought to the correct section of the 'login.aspx' page and modify the appropriate links from there. 
  3. Change the YYYMMDD value that appears after the filename to the current date
    • This value is immediately after the '?r=' text
  4. Update Revision Number to prevent Cache issues
  5. Save the file.
  6. Refresh/Reopen the Login page to note the difference

REV. 08/2018 | PortalGuard

  • 22
  • 29-Aug-2018
  • 751 Views