Skip to end of metadata
Go to start of metadata

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:

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

and

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.

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:

  • 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