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
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):
- Edit the 'style.css' file in Notepad++ or a similar administrative Text Editor
- Search for the 'body' section
- This should be near the top of the file
- 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

- To use a solid color:
- Update the 'background-color:' element and remove the trailing 'Background:' elements
- Save the file.
- Refresh/Reopen the Login page to note the difference
Change the Background to an Image
Pertinent File(s):
- Edit the 'style.css' file in Notepad++ or a similar administrative Text Editor
- 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

- Copy your new background image to the C:\Inetpub\PortalGuard\_Layouts\Images\PG\images folder
- Save the file.
- Refresh/Reopen the Login page to note the difference
Change the Dialogue Header Color
Pertinent File(s):
- Edit the 'style.css' file in Notepad++ or a similar administrative Text Editor
- Search for 'dlghdr'
- Modify the 'background-color:' attribute to change the background color of the Dialogue Headers throughout the Login screen and various enrollment/Self-Service screens
- Save the file.
- Refresh/Reopen the Login page to note the difference
Change the Button Colors
Pertinent File(s):
- Edit the 'style.css' file in Notepad++ or a similar administrative Text Editor
- 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
- 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
- Save the file.
- Refresh/Reopen the Login page to note the difference
Change the Logo to Something Other than the PortalGuard Shield
Pertinent File(s):
- Upload your logo to C:\Inetpub\PortalGuard\_layouts\images\PG\images\
- Edit the 'login.aspx' file in Notepad++ or a similar administrative Text Editor
- Search for 'logoimg'
- Update the 'src=' element to reflect the path to your logo

- Save the file.
- Edit the 'pg_custom.js' file in Notepad++ or a similar administrative Text Editor
- Search for 'getlogohtml'
- Update the 'src=' element defined within the 'return' element here. Similar to above, point this to your updated logo file.
- 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.
- Save the file.
- 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:
- Edit the 'login.aspx' file in Notepad++ or a similar administrative Text Editor
- 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.
- Change the YYYMMDD value that appears after the filename to the current date
- This value is immediately after the '?r=' text

- Save the file.
- Refresh/Reopen the Login page to note the difference
REV. 08/2018 | PortalGuard