/
PortalGuard v6.x - Basic Branding Guide

PortalGuard v6.x - Basic Branding Guide

Owned by Stephen Call (Deactivated)
Last updated: Nov 11, 2021
5 min read

Problem

You have PortalGuard v6.x or later and 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 for PortalGuard Version 6.x and Later

Files to Modify:

  • C:\inetpub\PortalGuard\_layouts\images\PG\css\style_custom.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\PG_Custom_dotNET_Text.inc

    • Page titles, Resource Revision Numbers

IMPORTANT NOTE: Follow the steps within the Invalidate all Browser Caches section below before validating any new modifications to ensure the most recent changes take effect in your browser.

Change the Background Color

Pertinent File(s):

  • style_custom.css

  1. Edit the 'style_custom.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 around line # 12 - a commented out header will also inform you of the correct section.

  3. To use a Gradient:

    • Update the 'background-color:' and add the following 'background:' elements.  Be sure to use the appropriate color codes.

      • Hex codes are typically used, but RGBA will work also.

  4. To use a solid color:

    • Update the 'background-color:' element and remove the trailing 'Background:' elements:

  5. Save the file. 

Change the Background Image

Pertinent File(s):

  • style_custom.css

  1. Edit the 'style_custom.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 around line # 12 - a commented out header will also inform you of the correct section.

  3. Modify the source URL in the 'background:' element to point to your chosen image.

    • It is recommended that you keep the images located in the same folder as the default 'bkgnd.jpg' image, and simply update the last portion of this line:

  4. Save the file. 

Change the Dialogue Header Color

Pertinent File(s):

  • style_custom.css

  1. Edit the 'style_custom.css' file in Notepad++ or a similar administrative Text Editor.

  2. Search for the '.dlghdr' element.

    • You can also search for the commented out 'Header Background' header text to be brought to the correct location - Approximately line #41.

  3. Modify the 'background-color:' element to use the desired color. 

  4. The next line defines the color of the header text within the page (default is white).

  5. Save the file.

Change the Button Colors

Pertinent File(s):

  • style_custom.css

  1. Edit the 'style_custom.css' file in Notepad++ or a similar administrative Text Editor.

  2. Search for the '.PGButton' element.

    • You can also search for the commented out 'Buttons' header text to be brought to the correct location - Approximately line #49.

      • the '.PGButton' element covers the styling for the default Button appearance.

      • the '.PGButton:hover' element covers the styling for the Button appearance when you hover over the button but do not click on it.

  3. Modify the 'background-color:' elements to use the desired color for the button at each stage.

  4. The 'color:' elements define the button text color at each stage.  Modify these as needed.

  5. Save the file.

Change the Logo

Pertinent File(s):

  • style_custom.css

  • pg_custom.js

For the Logos Throughout The PortalGuard Pages Other than the Login Page

  1. Edit the 'style_custom.css' file in Notepad++ or a similar administrative Text Editor.

  2. Search for the '.acctLogo' element.

    • This element should be very close to the top - approximately line #4:

  3. Modify the source URL in the 'content:' element to point to your chosen logo.

    • It is recommended that you place all custom logos in the same location as the 'shield.png' logo. 

    • Your logo image should use a transparent background for flexibility, but can technically be whatever you wish.

    • Logos will automatically be resized to a maximum height of 150 pixels, as noted in line #2 of the image above.  This setting can be customized if the page is modified accordingly. 

  4. Save the file.

For the Logo on the Login Page

  1. Edit the 'pg_custom.js' file in Notepad++ or a similar administrative Text Editor.

  2. Search for 'LOGIN_LOGO_PATH'.

    • This variable should be located around line #38.

  3. Modify the path in the variable definition. 

    • As with other images, it is recommended that you place the custom logo in the same location as the default 'shield.png' logo.

  4. Save the file.

Invalidate All Browser Caches

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 'PG_Custom_dotNET_Text.inc' file in Notepad++ or a similar administrative Text Editor.

    • As noted above, this file is located in the root of the PortalGuard website, typically "C:\inetpub\PortalGuard"

  2. Locate the 'PG_RSRC_TIME' variable and modify the value.  It is recommended that you utilize a date/time format, but any change will suffice.

    • This variable should be on line #5.

  3. Save the file.

  4. Refresh/Reopen the PortalGuard website to view your changes.

 

 

Related content