How to customize the appearance of your MIDAS system

MIDAS booking systems include a selection of visual "themes" as standard. Users may select a theme at time of sign-in, or administrators can set a global theme to apply to all users.

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

---

To customize layout, colors, and fonts

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:
  :root{
  --theme-icon-stroke:rgb(255,0,0);
  }
  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.
  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 will cause a "Custom" theme option to be available in the theme selector (if shown on your MIDAS sign-in screen), and also a "Custom" theme option for the default theme setting (found via MIDAS Admin Options → Manage MIDAS → Appearance).
• With the "Custom" theme option selected, the contents of your "theme.css" fill 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"/>
  </symbol>
• 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"/>
  </symbol>
  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 will cause a "Custom" theme option to be available in the theme selector (if shown on your MIDAS sign-in screen), and also a "Custom" theme option for the default theme setting (found via MIDAS Admin Options → Manage MIDAS → Appearance).
• With the "Custom" theme option selected, the contents on your "theme.svg" file will override the various visual elements you've defined.
• To remove your icon customizations, simply rename/delete your "theme.svg" file.

---

To customize/remove branding...

You can also completely remove "MIDAS" branding, or replace it with your own branding throughout the software with our optional Custom Branding add-on.