Page tree

Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.
titleWork in progress

This is work in progress, expect unexpected.

Current MidPoint theme is based on AdminLTE template. AdminLTE uses:


Code Block
.skin-blue-light .main-header {
  & .logo {
    //background-color: red;	//this will change color under logo image
    &:hover {
      //background-color: red;  //this will change color under logo image during hover event

    & > span {
      height: 100%;
      width: 100%;
      display: inline-block;
      background: url("../img/midpoint_logo_white_180.png") no-repeat 10px 3px;	//here you can put logo of your company

  & nav.navbar.navbar-static-top {
    //background-color: red;	//this will change color of navigation bar on top of page

Stylesheet files description


Javascript files description

todoAll style sheets are compiled from LESS files located in admin-gui/src/main/webapp/less/... based on wro4j.xml definitions. Most interesting files for review/change when updating styles in MidPoint are:

  • admin-lte/bootstrap-less/variables.less
  • admin-lte/less/variables.less
  • midpoint-theme-variables.less
  • midpoint-theme.less

Best way to change them is using maven overlay project.

Javascript files description

Javascript files are located in admin-gui/src/main/webapp/js/... . Most of the MidPoint specific code is located in midpoint-theme.js.