Skip to main content
Kinetic Community

Change the color of the panels and icon banner

This activity will show how to change the coloration of request/approval panels and the icon banner

 

 

Steps:

  1. Change the class name

  2. Change the CSS file

Change the color using class name.

  1. Open the Text Editor.
  2. Navigate to kapp.jsp
    Screen Shot 2016-05-04 at 11.25.08 AM.png
  3. Do a search (Ctrl-f or command-f) of the file for HTML elements with class equal to "background-tertiary"
  4. Change the div class "background-tertiary" to "background-quaternary"
<div class="panel-heading background-quaternary">

 

Style Changes Using CSS

  1. Navigate to /css/master.css
    Screen Shot 2016-05-04 at 3.08.25 PM.png

  2. Do a search for background-quaternary

  3. Change the background color to #b7b2d2(Panels)

.background-quaternary {background-color: #b7b2d2 !important; }
  1. Do a search for .nav

  2. Change the background color to #556fa9 (Icon Banner)

.nav {background-color: #556fa9; }
  1. Refresh the catalog page to view changes.