Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 7 Next »

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


<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

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.

  • No labels