How to customize the appearance of your MIDAS systemMIDAS includes a selection of visual "themes" as standard. A theme may be selected by users at time of login, or administrators can set a theme to apply to all users.
NOTE: Prior to v4.20, MIDAS only included the "Deafult" 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 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>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.
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 ref, add the following to your theme.css file:
- Additionally, you may also override other visual elements in MIDAS by defining them in your theme.css file with the "!important" attribute.
TIP: You can use the element inspector in your browser's developer tools to identify id/class of existing visual elements in your MIDAS system that you'd like to customize through css
- 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.
← Return to Knowledgebase