2. How to use your own custom CSS styling
Note: this tutorial only applies to images created inside storytelling project types.
The full example for this tutorial can be found HERE.
Before starting this tutorial, we're assuming you've already completed the following step:
- You've got your own HTML page with a Micrio image embedded, following the previous tutorial.
2.1. Create your markers
Firstly, upload an image, and create some different markers:

2.1.1 Steps
- Click the Marker item in the top menu
- Click the icon on the bottom right to create a new marker
- Click on the image where you want the marker to be placed
- Enter a title, and click the icon to edit the marker popup body text
-
Optional: If you want different markers to look differently,
you can assign custom class names to individual markers.
To do this, click the icon,
and add a name after
default
-- something likered
. On a later stage we'll find out what thedefault
class does! - Publish your image by going to the Image menu in the top bar, and clicking Publish. Your image is now ready to be embedded in your own page, that we'll make next!
2.2. Writing your custom CSS to style the marker
If you are new to this, please follow a tutorial to get started. There are many great resources online to teach this. For instance, check out this CSS tutorial at w3schools.com.
2.2.1. So let's make our markers red:
-
Micrio markers have the minimal css selector
.micrio-container .marker-container .marker
. That means you can customly style a marker by for instance adding this to the<style>
part of your HTML:.micrio-container .marker-container .marker { background-color: red; }
-
This will have the markers look like this:
Great! You've already paved the way to adding your own custom marker icons by using the CSS
background-image
option, custom sizing by defining the markerwidth
andheight
, and much more.
2.2.2. Custom individual markers
If you want to individually style markers, for instance the one we created with
the class name red
, this is also easy:
-
The class names given to markers in the editor are rendered in the client as
class-{your name}
, and will be put on the.marker-container
element. For instance in ourred
example, the marker class in the HTML will beclass-red
.That means we can style this marker individually by using the following CSS rule:
.micrio-container .marker-container.class-red .marker { background-color: red; width: 50px; height: 50px; }
This CSS rule will work for all markers that have the editor class name
red
! -
This results in the following marker:
-
Congratulations, now you can target custom markers!
2.2.3 How about the rounded corners and white borders?
It seems all markers you create look kind of the same. They have a round shape
with a white border, and a light drop shadow. This is actually the default
class, that you saw earlier in the class name
screen in the editor.
If you remove the default
from there, your marker will at first hand
be invisible! Since there is no CSS styling at all for it now, it will be
put on your screen and you can interact with it, but there will simply be no styling.
This however also adds more control over the custom marker styling. For example,
let's delete the default
class from our red
marker,
and play around with it a bit:
-
In the editor, click on the icon in the marker
editor, and remove the
default
word. -
Re-publish the image, and reload your HTML page in the browser. Now it will just have the custom CSS from the previous step, and will look like this:
- Now it's totally in your control to make it look exactly like you want to. You're getting the hang of it!
2.3. Styling the marker popup
Now that you've got the basics of custom CSS styling, you can continue with styling the popup you see when you open the marker.
2.3.1. Styling the popup
By default, the popups have a dark transparent background and have a static size. To style them, follow these steps:
-
The CSS selector for the marker popup is
.marker-container .marker-popup
. If we want to give all marker popups a red background, we can use this CSS rule:.micrio-container .marker-popup { background-color: red; }
This will look like this:
- That's it! You can now venture into the wonderful world of custom CSS, making your Micrio image and tours a wholesome custom experience.
Conclusion
In this tutorial, you've learnt how to use custom CSS to style your own Micrio images.
The full working HTML of this tutorial can be found HERE.
If you have any more questions, please drop us a line and we'll try to help you further!