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




  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.