Menu

2. How to use your own custom CSS styling

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.

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:

2.1. Create your markers

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

2.1.1 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.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.

2.2.1. So let's make our markers red:

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

    .micrio-container micrio-marker .marker {
	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.

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:

  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 .marker {
	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!

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:

  1. In the editor, click on the icon in the marker editor, and remove the default word.

  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!

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:

  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:

  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!