Custom Micrio integration example Client 4.x

This page is about the Micrio client version 4, which is outdated. Use the links below to navigate to alternative versions.

• Version 3.x
• Version 5.x

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.

TIP

The full example for this tutorial can be found HERE.

1. Create your markers

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

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 -- something like red.
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. Embed the image in your own HTML page

Follow the previous tutorial step to get your own HTML document with the image embedded, and set the ID of the <micr-io> element to your image's.

Open that HTML file in your browser, and you will see your image.

3. 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 micr-io .marker > button. That means you can customly style a marker by for instance adding this to the <style> part of your HTML or your CSS file:

   micr-io .marker > button {
   	background-color: red;
   }

2. 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 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 {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 red.

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

   micr-io .marker.red > button {
   	background-color: red;
   	width: 50px;
   	height: 50px;
   }

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

2. This results in the following marker:

   

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

   

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

4. 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 micr-io .marker-popup > article. If we want to give all marker popups a red background, we can use this CSS rule:

   micr-io .marker-popup > main {
   	background-color: red;
   }

   This will look like this:

   

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