CSS: change the look and feel of any element on the page

Almost everything generated by Events Made Easy can be changed in layout using stylesheets (CSS).
If you don’t want to change any files of your theme, and your theme doesn’t provide an interface to change CSS rules, you can create a file called ’eme.css’ in your theme CSS directory and put in there e.g.:


.eme-location-map {
width: 600px;
height: 400px;
}
.eme-location-balloon {
        color: #FF7146;
}
.eventful {
        background: FF7146;
}

(just an example that changes the location map width and height, the text color of the location balloon inside the map, and the background colour in the calendar for days that have events).
You can start from css/eme.css (in the EME plugin folder) as a base and just change the parts you want. The css-file from the plugin is always loaded, so your own eme.css should just contain the things you want to override.
If you do decide to use a file like eme.css in your theme, I recommend to create a child theme and work with that otherwise your custom file will get removed if a theme update arrives. Child themes are beyond the scope of EME to explain, so read up in wordpress on that.

Also: create a file called ’eme_print.css’ in your theme CSS directory to change the layout of the “Print Preview” booking result. An alternative to this file is to put the specific printing css-layout in your regular css-file/place and use the css media print-indicator.

CSS is something you should learn to master, using a CSS-debugger like Firebug also helps (in firefox). Learn CSS here . Before asking support on CSS, please do try it yourself and/or ask the theme maker for hints, they are the CSS experts and know best how their theme is working and can provide hints on how to change things.

If you want to hide a field in the subscription form, try this inline CSS example (hides the SEATS field, can be used e.g. if you set the mininum and maximum seats to book at 1):


<span style="visibility: hidden;">#_SEATS</span>
Scroll to Top