« Creating a Micrio Tour

How to use your own custom CSS styling

Customizing your markers, popups and icons

This tutorial takes you step by step to creating your own custom styled image marker icons, and popups. You will learn how you can create differently styled markers, and write your own custom marker popup CSS.

The full example for this tutorial can be found HERE.

Before starting this tutorial, we're assuming you've already completed the previous step: Your own HTML page with a Micrio embed or you are using the upload CSS option in the editor.

1. Create your markers

Firstly, upload an image, and create some different markers:

editor-createmarker

Steps

  1. Click the Marker item in the top menu
  2. Click the icon on the bottom right to create a new marker
  3. Click on the image where you want the marker to be placed
  4. Enter a title, and click the icon to edit the marker popup body text
  5. 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 like red. On a later stage we'll find out what the default class does!
  6. 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. Writing your custom CSS to style the marker

This section explains how you can customly style your own markers and popups. This is done by using CSS, or Cascading Style Sheets.

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.

So let's make our markers red:

  1. Micrio markers have the css selector .micrio-container micrio-marker.class-default button.marker. That means you can customly style a marker by for instance adding this to the <style> part of your HTML or your CSS file:

    .micrio-container micrio-marker.class-default button.marker {
        background-color: red;
    }
    
  2. This will have the markers look like this:

custom-marker

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 marker `width` and `height`, and much more.

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:

  1. The class names given to markers in the editor are rendered in the client as class-{your name}, and will be put on the micrio-marker element. For instance in our red example, the marker class in the HTML will be class-red.

    That means we can style this marker individually by using the following CSS rule:

    .micrio-container micrio-marker.class-red button.marker {
        background-color: red;
        width: 50px;
        height: 50px;
    }
    

    This CSS rule will work for all markers that have the editor class name red!

    Note: the classname you choose (for example red) will have the prefix class-. So if you give the marker the classname red, the actual classname you can use in your CSS will be class-red.

  2. This results in the following marker:

custom-marker-red

  1. Congratulations, now you can target custom markers!

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 styling, that we saw earlier in the editor.

If you turn off the default styling 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 remove the default styling from our red marker, and play around with it a bit:

  1. In the editor, click on the icon in the marker editor, turn off the default styling.

  2. 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:

custom-marker-red-nostyle

  1. Now it's totally in your control to make it look exactly like you want to. You're getting the hang of it!

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.

By default, the popups have a dark transparent background and have a static size. To style them, follow these steps:

  1. The CSS selector for the marker popup is .marker-container .marker-popup article. If we want to give all marker popups a red background, we can use this CSS rule:

    .micrio-container .marker-popup article {
        background-color: red;
    }
    

    This will look like this:

custom-marker-popup

  1. 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!

✉ Can't find what you're looking for? Contact us!