Problem

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

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.

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
• 
4. To use a solid color:
• Update the 'background-color:' element and remove the trailing 'Background:' elements
• 
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
• 
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'
• 
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
• 
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
• 
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.
• 
• 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. 
5. Save the file.
6. Refresh/Reopen the Login page to note the difference

REV. 08/2018 | PortalGuard