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;
}

Applying custom colors to the Vision event severity bar

Here is an example to change the color shown in the severity bar in Vision from Green to Brown for "Normal" events.

On the presentation server(s), go to the vision css directory. Create the directory, if it does not already exist.
```
cd $A1BASEDIR/www/resources/vision/css/
```
Create a file named Custom.css, and enter the following:
```
#sev_0 {
    background: #964B00 no-repeat;
}
```
Login to the UI and verify the changes have taken effect.

Change the Vision logo for the Oracle logo in the header bar for Vision

Here is an example to change the Vision logo for the Oracle logo in the header bar for Vision.

On the presentation server(s), go to the vision css directory. Create the directory, if it does not already exist.
```
cd $A1BASEDIR/www/resources/vision/css/
```

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

.ui.centered.middle.aligned.image.gv_header {
    content:url("/resources/assure1/images/OracleWhite.svg");
    width: 100px;
}

Title and Copyright Information

Implementation Guide

F88952-01