/
Custom UI per Hostname

Custom UI per Hostname

Owned by Stephen Call (Deactivated)
Last updated: Nov 12, 2021
4 min read

Problem

You want to provide a Custom UI for various hostnames that all point to the same PortalGuard website.

Solution

Use our custom dotNET function and variables to update the UI files based on the hostname being accessed.

  1. Navigate to the PortalGuard server and open the '\inetpub\PortalGuard\_layouts\PG\login.aspx' file in an administrative text editor.

    • We recommend using Notepad++ or similar.

    • IMPORTANT NOTE: It is recommended that you do this in a test environment first.  However, if that is not possible, you can also test this functionality by making a copy of the 'login.aspx' file and renaming it.  From there you can test by going directly to the new file as a URL endpoint. 

  2. Locate the first instance of the 'public string...' variable declaration within the <script runat="server> tag.  Prior to editing, it should resemble the following screenshot:

  3. Modify the line to add the following variable declarations after the 'm_AllLangs = ""' declaration:

    • m_CSS = "",

    • m_JS = "";

  4. Scroll down within this file and locate the 'private bool m_RememberMeMobileOnly = false;' declaration.  This should be located at approximately line #27.  Insert the code from the attached 'handleSkinsFunction.txt' file into a new line below this section.

    • Attachments can be found on the right-hand side of this article, near the top of the page.  

    • The final results should resemble the following:

      • Important Note: Be sure to modify the function with the appropriate hostnames in use for your environment. Based on the screenshot above, that would mean updating lines # 36, 39, and 42.  Each variable should reference the correct filename as well, to be defined later on in this article.

  5. Scroll down and locate the 'void Page_Load(object sender, EventArgs e)' function (located at line #52 in the above screenshot).

  6. After the opening 'if' statement, add a new line to call the 'handleSkins()' function.  Your final result should resemble the following:

  7. Search for the '<head>' element and then find the '<title>' element within.  You should see a series of declarations for CSS and JS files that the website will load.  Before editing, your view should resemble the following:

  8. The highlighted sections will need to be updated to use the dotNET variables defined in step #3 above. In this section of the file, the usage of the dotNET variables will resemble the following format:

    • <%=m_JS%>

    • <%=m_CSS%>

  9. Using the above screenshot as a base, you will need to modify line #237 directly, and add a new declaration to line #252.  The final result should resemble the following screenshot:

  10. Save the changes to this file. 

  11. Within the File Explorer on the PortalGuard server, navigate to the '\inetpub\PortalGuard\_layouts\images\PG\css' folder. 

  12. Make a copy of the 'style_custom.css' file and rename it to match the structure referenced within the handleSkins() function depicted in step #4 above.  If you have not modified the function, you should have copies of the CSS file resembling the following:

    2. Important Note: If you change the filenames here, be sure to update the handleSkins() function defined within the login.aspx (as noted in step # 4 above).

  13. Make the same types of file copies in the '\inetpub\PortalGuard\_layouts\images\PG\js' folder as well:

    2. Important Note: If you change the filenames here, be sure to update the handleSkins() function defined within the login.aspx (as noted in step # 4 above).

  14. Edit each copy of the 'style_custom.css' and 'pg_custom.js' files to modify the branding and text changes per hostname as needed. 

 

Related content