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 5 Next »

Work in progress

This is work in progress, expect unexpected.

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

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


  • No labels