Working with CSS To Customize Web Portal - Two Examples

It's easy to customize Web Portal without modifying the ASP.NET source code. You can add CSS overrides directly from the Settings tab in the ADMIN interface.

The current Web Portal uses a responsive layout that automatically adjusts for mobile, tablet, and desktop screens. Custom layout rules should be added to the GlobalVariables theme file instead of changing the core Common.css or Style.css files.

The Settings screen calls this feature "Edit CSS," although the editable GlobalVariables files use the LESS format. Standard CSS rules, such as the examples below, are valid in these files.

Example #1 - Hiding the Change Password Link in the Web Portal End-User Interface:

In this example, we are going to hide the Change Password link in the Web Portal end-user interface. This may be useful for customers using Active Directory or another system where passwords are managed outside Web Portal.

Here are the steps:

1. Click Settings in the ADMIN interface.
2. Click Edit CSS.
3. Choose JeffNet\GlobalVariables.
4. Scroll to the bottom of the file.
5. Add the following rule:
   

   .site-navigation .changepassword {
       display: none !important;
   }

6. Click Update to save.

After the page is reloaded, the Change Password link should no longer appear. This rule applies at mobile, tablet, and desktop browser widths.

---

Example #2 - Changing the Maximum Layout Width of Web Portal:

By default, Web Portal expands to the available browser width up to a maximum width of 900 pixels. This responsive behavior allows the application to shrink automatically for phones and tablets.

If you want the application to expand to a maximum width of 1200 pixels on larger screens, follow these steps:

1. Click Settings in the ADMIN interface.
2. Click Edit CSS.
3. Choose JeffNet\GlobalVariables to change the end-user interface. To change the ADMIN interface, choose JeffNetAdmin\GlobalVariables.
4. Scroll to the bottom of the file.
5. Add the following rule:
   

   body .site-wrapper {
       max-width: 1200px;
   }
   

6. Click Update to save.

If you want both the end-user and ADMIN interfaces to use the wider layout, add the rule to both GlobalVariables files.

Do not replace the responsive width: 100%; setting with a fixed width, and do not assign a separate fixed width to .site-content-header. The header now follows the width of its responsive container automatically.

Reload the affected Web Portal page after saving. If the previous appearance remains cached, perform a hard browser refresh before checking the change.