Latest News: Celebrating our 15th anniversary | MIDAS v4.27 Out Now | COVID-19 Support

MIDAS Knowledge BaseMIDAS Knowledge Base

How to customize the appearance of your MIDAS system

MIDAS includes a selection of visual "themes" as standard. Users may select a theme at time of login, or administrators can set a global theme to apply to all users.

NOTE: Prior to v4.20, MIDAS only included the "Default" and "Default-HiRes" themes as standard. (Optional themes could be downloaded separately)

If your MIDAS room booking system is "self-hosted", you may also "customize" a visual theme as follows...

To customize layout, colors, fonts, etc...

  • The visual appearance of MIDAS is achieved through CSS (Cascading Style Sheets). To override a built-in theme;
  • Create a CSS file named "theme.css" within your MIDAS server installation.
  • A number of CSS variables are available which control core theme colors, which may be set in your custom theme.css file. The currently available variables are as follows:
    theme-background-color, theme-color-1, theme-color-2, theme-color-3, theme-color-4, theme-color-5, theme-color-6, theme-color-7, theme-color-8, theme-color-accent, theme-date-hilight, theme-fieldset-color, theme-gradient-color-1, theme-gradient-color-2, theme-gradient-color-3, theme-gradient-color-4, theme-grid-hours-color, theme-box-color-dark, theme-box-color-light, theme-option-color, theme-overlay-color, theme-legend-color, theme-shadow-color, theme-border-color, theme-icon-stroke, theme-icon-text, theme-tool-tip, theme-tool-back, grid-block-text
  • For example, to change the color of icons to red, add the following to your theme.css file:
    Any of the aforementioned CSS variables may be specified within the :root{ ... } section of your theme.css file to control theme colors throughout the software.
  • Additionally, you may also override other visual elements in MIDAS by defining them in your theme.css file with the "!important" attribute.
    TIP: You may use the element inspector in your browser's developer tools to identify the "id" or "class" of existing visual elements in your MIDAS system that you'd like to customize through css. Developer Tools are usually access via F12, however you may need to refer to your browser's documentation if you're unsure how to open and use Developer Tools
  • Save the changes in your theme.css file back to your server.
  • MIDAS will then detect this file and its contents will override the various built-in CSS styles with the values you've defined.
  • To remove your theme customization, simply rename/delete your "theme.css" file.

To customize icons...

  • Icons in MIDAS are in SVG (Scalable Vector Graphics) format, and consist of two parts - a "frame" (border) and the actual icon itself. In the default themes, the frame is a circle around each icon, To override the built-in icons;
  • Create an SVG file named "theme.svg" within your MIDAS server installation.
  • Add your SVG frame as a <symbol> with the id "frame". Here's an example specifying a circular frame around icons:
    <symbol id="frame" viewBox="0 0 48 48">
     <circle r="22.5" cy="24" cx="24" class="circle" style="fill:none;stroke-width:3"/>
  • Add your SVG icons as further <symbol>'s with each id set to the corresponding icon in MIDAS. For example, the "Search" icon in the MIDAS toolbar has the symbol ID "search":
    <symbol id="search" viewBox="0 0 48 48">
     <circle r="8" cy="20" cx="27" style="fill:none;stroke-width:3"/>
     <path d="M 14,34 l 5.8,-5.8" style="stroke-width:3;stroke-linecap:round"/>

    TIP: You can use the element inspector in your browser's developer tools to identify the id of an existing icon in your MIDAS system you'd like to change
  • Save the changes in your theme.svg file back to your server.
  • MIDAS will then detect this file and its contents will override the various visual elements you've defined.
  • To remove your icon customizations, simply rename/delete your "theme.svg" file.

You might also be interested in...

MIDAS » KB » Support » Article 00010

← Return to Knowledge Base