You set the four colors under Settings → Design & Display, type colors on the types. For everything else there are CSS variables and stable classes that you address in your theme or under Appearance → Customize → Additional CSS.
The color variables
On pages with a directory or hall plan, the plugin writes the four colors as variables into :root:
| Variable | Setting | Default |
|---|---|---|
--eem-primary | Primary color | #f76b15 |
--eem-secondary | Secondary color | #eef4fa |
--eem-bg-light | Background (toolbar) | #fff8f0 |
--eem-border | Border color | #dcebf7 |
As long as the “Design & Display” tab has never been saved, the front end uses fallback values (including a blue primary color) that differ from the back end. Saving once fixes this.
.page-id-42 .eem-app-wrapper {
--eem-primary: #2a6f97;
--eem-bg-light: #eef6fb;
}Further variables: --eem-featured-accent (type color of a featured tile), --eem-floating-bottom-offset (distance of the floating search bar from the bottom) and, in print, --eem-border-color and --eem-box-color of the booth signs.
Important classes
| Class | Element |
|---|---|
.eem-app-wrapper | Outer frame of directory and hall plan – the safe entry point for your own rules. |
.eem-filter-bar | Search and filter bar. |
.eem-grid-card | One tile of the grid view. |
.eem-table | The table view. |
.eem-featured-card | A tile of the featured row. |
.eem-detail-modal | The detail pop-up. |
.eem-map-container, .eem-smart-sheet | Hall plan and its info sheet. |
.eem-interactive-booth, .eem-active-booth | Clickable or currently highlighted booth area in the SVG. |
.eem-svg-layer svg .eem-active-booth,
.eem-svg-layer svg .eem-active-booth *:not(text) {
fill: #2a6f97;
}The plugin deliberately keeps the exhibitor name on booth signs black so it stays readable on any box color. Set the sign colors in the event’s print options, not via CSS.
Fundamental changes to the single page go through a template copy.