Look & Feel Customization HOWTO before 4.6
Last modified 28 Sep 2022 20:50 +02:00
OBSOLETE
This functionality is obsolete since version 4.6. It is no longer supported or maintained.
Since 3.5.1
This functionality is available since version 3.5.1.

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

  • Bootstrap 3

  • jQuery 2.11

  • other plugins

We’re also using:

  • Ace editor

  • select and multiselect combo boxes for bootstrap

Quick customization tips

AdminLTE skins

Template contains 12 predefined skins:

  • skin-blue

  • skin-blue-light

  • skin-yellow

  • skin-yellow-light

  • skin-green

  • skin-green-light

  • skin-purple

  • skin-purple-light

  • skin-red

  • skin-red-light

  • skin-black

  • skin-black-light

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">

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

Since 3.7
This functionality is available since 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:

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

Was this page helpful?
YES NO
Thanks for your feedback