Recent Changes - Search:

Categories

Customizing Portal Guard

Branding/Customizing PortalGuard

Tags: user interface, branding

Problem Definition

You are considering purchasing PortalGuard/Have already purchased PortalGuard and you would like to add your organization's logo, colors, etc. to the login screen and account management page. How can this be done?


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.

These files should be located in the following folders by default:
C:\InetPub\PortalGuard\_layouts\PG - Contains login.aspx
C:\InetPub\PortalGuard\_layouts\images\PG - Contains the CSS, images and Javascript used by PortalGuard

The only files you will typically need to modify are:

  • css\style.css - This is the primary CSS file included in PortalGuard. It is included by login.aspx and has many styles that apply to generic HTML elements. You can replace this with your own, but there are definitions that must appear in it for PortalGuard to work properly (“translucent”, “popupWin”)
  • css\gradient-vine.css - This is only present in newer versions of PortalGuard (v5.3.2.0 or later) that use the Bootstrap framework. It's a small file that overrides the background color & effects, dialog title bar color and button color.
  • js\pg_custom.js - This Javascript file contains the HTML for all the messages that are returned to the user based on the success or failure of the PortalGuard request (e.g. login, password change, setting of challenge answers, et al.)
  • images\(Your Image) - You can replace the default images with those of your own to change the branding. This will prevent the need to edit image paths in the CSS and ASPX pages. If you wish to “remove” a specific image, one simple technique

The steps below describe the most common questions on branding your PortalGuard installation.

NOTE: You will need to manually refresh your browser for modifications to appear. The alternative is to launch a new InPrivate/Incognito window after each change.

NOTE: Always make backups of files before you modify them in case you need to revert. Before continuing with this article, backup the following files:

  • C:\InetPub\PortalGuard\_layouts\images\PG\css\style.css
  • C:\InetPub\PortalGuard\_layouts\images\PG\css\gradient-vine.css (if present)
  • C:\InetPub\PortalGuard\_layouts\images\PG\js\pg_custom.js
  • C:\InetPub\PortalGuard\_layouts\PG\login.aspx

Remove Radial Gradient Background

  • Open Notepad++ as an administrator then edit css\gradient-vine.css (or style.css for versions before 5.3.2.0)
  • In the body section, remove all five (5) background: lines:

Change Background Color

  • Follow the steps in the 'Remove Radial Gradient Background' section
  • Open Notepad++ as an administrator then edit css\gradient-vine.css (or style.css for versions before 5.3.2.0)
  • In the body section, change the hex value of the background-color attribute

Use A Background Image

  • Follow the steps in the 'Remove Radial Gradient Background' section
  • Open Notepad++ as an administrator then edit css\gradient-vine.css (or style.css for versions before 5.3.2.0)
  • In the body section, add 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 extensions (e.g. ".png") of your new background image
  • Copy your new background image to the C:\InetPub\PortalGuard\_layouts\images\PG\images folder

Change Button and Dialog Title Colors (version 5.3.2.0 and later)

  • Open Notepad++ as an administrator then edit css\gradient-vine.css
  • In the section that defines the .green and .PGButton classes, change the hex value of the background-color attribute

NOTE: When the .green (yes, that's a terrible className) and .PGButton classes are defined on the same line, they will share the same attributes. To change this and have them independent from one another, simply give them separate definitions:

Change Dialog Title Text

  • Open Notepad++ as an administrator then edit js\pg_custom.js
  • Search for the current text value (e.g. "Portal Login")
  • Replace the value with your own

Change Shield To Custom Logo

  • Copy the new background image to the C:\InetPub\PortalGuard\_layouts\images\PG\images folder. 100x100 is an optimum size.
  • Open Notepad++ as an administrator then edit InetPub\PortalGuard\_layouts\PG\login.aspx
  • Search for shield.png
  • Replace that value with the correct filename and extension of the new image

Set SSO Landing Page Default Tile Size and Remove Tile Size Selector

  • Edit C:\inetpub\PortalGuard\_layouts\images\PG\js\pg_sso.js
  • Change the initialization of the “thesize” variable in refreshSSOTabContents() to be "Small, “Medium” or "Large" instead of calling the getTileSize() function.
  • Edit C:\inetpub\PortalGuard\sso\default.aspx
  • Add style=”display:none” to this location in the "SSOtabs" div within the default.aspx file.
  • Update the last modified date of pg_sso.js at this location in default.aspx:

Invalidate All Browser Caches

Once you are finished making all changes to the UI, you can ensure all users' browsers pick up the changes. The steps are:

  • Open Notepad++ as an administrator then edit InetPub\PortalGuard\_layouts\PG\login.aspx
  • Search for the name of the CSS or JS file that was changed (e.g. style.css)
    • NOTE: If you changed gradient-vine.css, then search for <%=m_CSS%> instead. You will also need to add ?r= after the .css extension.
  • Change the YYYYMMDD value that appears after the filename to the current date (it's immediately after the ?r= text). This can actually be any value that hasn't been used yet (e.g. '20160527-foobar')
Page last modified on October 13, 2016, at 03:53 PM