Changing Logos and Styles

Certain organizations may need to apply custom logos and/or custom CSS files to change the way content is displayed in the UI.

Warn:

Users that are already logged into the Assure1/Unified Assurance UI or have logged in in the past will need to do a forced refresh of all browser tabs to have the changes properly applied to their session.
If using presentation server redundancy and/or external presentation servers, these changes must be done to all presentation servers to ensure proper functionality.
All changes that are done on the command line in this document should be done as the assure1 user, and any files added to the system should be owned by the assure1 user and group.
```
su - assure1
```

Applying custom colors to alternating rows

Here is an example to show alternating colors to rows in grids.

On the presentation server(s), go to the css directory:
```
cd $A1BASEDIR/www/resources/assure1/css/
```

Create a file named Custom.css, and enter the following:

/* Increase font weight when hover over a table row */
.x-grid-item-over .x-grid-row {
    font-weight: 530;
}

Create a file named Custom-light.css, and enter the following:

/* Apply different background color on alternate rows */
.x-grid-item-alt .x-grid-row {
    background-color: #f0f5f9 !important;
}

/* Maintain same selected color on alternate rows */
.x-grid-item-alt.x-grid-item-selected .x-grid-row {
    background-color: #e8e8ee !important;
}

/* Maintain same hover over color on alternate rows */
.x-grid-item-alt.x-grid-item-over .x-grid-row {
    background-color: #e8e8ee !important;
}

Create a file named Custom-dark.css, and enter the following:

/* Apply different background color on alternate rows */
.x-grid-item-alt .x-grid-row {
    background-color: #222424 !important;
}

/* Maintain same selected color on alternate rows */
.x-grid-item-alt.x-grid-item-selected .x-grid-row {
    background-color: #28282a !important;
}

/* Maintain same hover over color on alternate rows */
.x-grid-item-alt.x-grid-item-over .x-grid-row {
    background-color: #28282a !important;
}

Applying custom Logos

Here is an example to change the logos that are used in the splash screen and login screen, as well as the logos used in the navigation.

Prerequisite: These steps assume new image files have been already generated. Each image should be limited to the following overall sizes:
- Splash Screen/Login Screen Image: 2100 * 1300
  - Aspect Ratio: 21 : 13
  Note:
  - The default image used for the splash and login screen should be an SVG file to allow for some auto-scaling that is handled by the UI.
  - The default image used for the splash and login screen should be kept within the above size and aspect ratio to ensure proper functionality.
- Large Logo Image: 95 * 24
- Small Logo Image: 24 * 24
Upload the images to the images directory on the presentation server(s):
```
$A1BASEDIR/www/resources/assure1/images/
```
On the presentation server(s), go to the css directory:
```
cd $A1BASEDIR/www/resources/assure1/css/
```

Create a file named Custom.css, and enter the following:

/* Logo banner above the menu */
#logobig a:after {
  content: url('/resources/assure1/images/CustomLogoBig.png') !important;
}

#logosmall a:after {
  content: url('/resources/assure1/images/CustomLogoSmall.png') !important;
}

.logo, #splashscreen .logo {
   background-image: url(/resources/assure1/images/CustomSplashLogo.svg) !important;
}

Title and Copyright Information

Implementation Guide

F83890-01