For a quick look & feel customization, please see also Deployment Information Type. Available since midPoint 3.5.1.

 

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

We're also using:

Quick customization tips

AdminLTE skins

Template contains 12 predefined skins:

To change skin you have to modify PageTemplate.html which you can find in module admin-gui/src/main/java/com/evolveum/midpoint/web/page/PageTemplate.html. You can also change it in war if you prefer to customize GA release.

<link href="../../../../../webjars/adminlte/2.3.0/dist/css/skins/skin-blue-light.min.css" rel="stylesheet" type="text/css" />

and

<body class="skin-blue-light">

Changing template header and logo

To change template header color and logo you have to edit file midpoint-theme.less which is located in module in admin-gui/src/main/webapp/less/midpoint-theme.less. You can also change it in war if you prefer to customize GA release.

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

Stylesheets without overlay

This feature is available from version 3.7

It is possible to add file named midpoint.less to midpoint.home folder. This file will be used during less compilation (during runtime) and styles will be appended to the end of midpoint-theme.css so it can be used to override existing CSS styles without need to build maven overlay project.

Stylesheet files description

All 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:

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.