Changing Logos and Styles

Your organization may need to apply custom logos or custom CSS files to change the way content is displayed in the UI. You can do this by adding custom CSS files in the $A1BASEDIR/www/resources/assure1/css directory and adding images in the $A1BASEDIR/www/resources/assure1/images directory.

This topic gives some examples of changes you can make.

Applying Custom Colors to Alternating Rows

To show alternating colors in rows in grids:

1. In the command line for the presentation server, switch to the assure1 user:

   su - assure1
   

2. Go to the following directory:

   cd $A1BASEDIR/www/resources/assure1/css/
   

3. Create a file named Custom.css with the following content:

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

4. Create a file named Custom-light.css, with the following content:

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

5. Create a file named Custom-dark.css with the following content:

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

6. In a browser, log in to the UI and verify that the changes have taken effect.

Applying Custom Logos

To change the logos that are used in the splash screen, login screen, and navigation:

1. Create your new image files, with the following limitations:

   • Splash Screen and Login Screen image:

     • Size: 2100 * 1300

     • Aspect Ratio: 21 : 13

     • File type: SVG (allows automatic scaling)

   • Large Logo Image: 95 * 24

   • Small Logo Image: 24 * 24

2. Upload the images to the following directory on the presentation servers:

   $A1BASEDIR/www/resources/assure1/images/
   

3. On the presentation servers, go to the following directory:

   cd $A1BASEDIR/www/resources/assure1/css/
   

4. Create a file named Custom.css with the following content:

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

5. In a browser, log in to the UI and verify that the changes have taken effect.

Applying Custom Colors to the Vision Event Severity Bar

To change the color shown in the severity bar in Vision from Green to Brown for Normal (severity 0) events:

1. On the presentation servers, go to the vision css directory. Create the directory, if it does not already exist.

   cd $A1BASEDIR/www/resources/vision/css/
   

   or

   mkdir $A1BASEDIR/www/resources/vision/css
   

2. Create a file named Custom.css with the following content:

   #sev_0 {
       background: #964B00 no-repeat;
   }
   

3. In a browser, log in to the UI and verify that the changes have taken effect.

Change the Vision Logo to the Oracle Logo in the Header Bar for Vision

To change the Vision logo to the Oracle logo in the Vision header bar:

1. On the presentation servers, go to the vision css directory. Create the directory, if it does not already exist.

   cd $A1BASEDIR/www/resources/vision/css/
   

   or

   mkdir $A1BASEDIR/www/resources/vision/css
   

2. Create a file named Custom.css with the following content:

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

3. Log in to the UI and verify the changes have taken effect.