With CSS, you can virtually customize all the elements of your map such as buttons, fonts, and colors.
Advanced Customization with Custom CSS
There is almost no limit to what you can customize with CSS.
You can apply simple CSS customization to change font styles, sizes, or colors. On the other hand, you can leverage CSS customization to create your own skins and change the look and feel of your interactive maps.
You don’t need to be a CSS expert. We created an extensive list of custom CSS examples to help you get started. Check out the examples
Need help with custom CSS? Contact our support team using the chat button or the support request form.
Best Practice for CSS Customization
We have clearly marked the CSS classes that are safe to customize.
The safe classes start with the prefix “.mapme-theme__”. For example: “.mapme-theme__overview-content-title”.
We recommend you refrain from customizing other classes since new features in Mapme might affect those classes.
How to add the custom CSS code?
There are 2 ways to add CSS code
- You can use the built-in editor
- You can link to an external file with your CSS code
Built-in CSS editor
We recommend using the built-in editor for most use cases.
To add your CSS code in the editor, click on Settings > Style > Custom CSS.
Enter your custom CSS in the custom CSS editor. Your custom CSS changes will be reflected in real-time in the Preview.
External CSS file
We recommend using an external CSS file if you are using the same CSS for multiple maps. It will be easier for you to make changes since you can make those changes in one place and update all your maps at once.
You can also combine CSS from the built-in editor and an external file. For example, if are using the same CSS for multiple maps and also have some CSS specific to each map, this can be very handy.
When you make a change to your external CSS file, there is no need to publish the map for those changes to take effect. However, the preview will not automatically update. You will need to hide and reopen the preview to see the changes.
The external CSS file must be hosted on a server with SSL support.