loading

Start exploring to learn more about me and my passion for technology in education
learn more

Marzipano 360 how to change hotspot properties and styles

Recently I was asked about changing the hotspot properties of a Marzipano 360 project. This article will extend on How to use 360 images with Marzipano and Insta360. Unfortunately, there is no interface to change the styles of the hotspot, so you’ll need to know a little bit about CSS. For a simple free HTML / CSS editor, checkout Brackets. With your project completed and exported, we want to edit the file called style.css. As I’m using brackets, search for hotspot. This will reveal all the classes that are linked to all hotspots. You are looking for anything with the word background-color: or background: The value after will be a rgb() or rgba() value. These represent a Red Green Blue colour up to the value of 256. Where it is rgba, the a represents the alpha component of the colour. So, for example lets look at changing the default grey colour to a vibrant green. The first thing you want to do is locate you new colour value. A great place to start is https://www.w3schools.com/colors/colors_picker.asp where you can select the colour you want. In this case, I will use rgb(51, 204, 51). Here is a screen shot of the original for reference. Back to your CSS. You need to update background colours with the colour of choice with the following CSS classes: .info-hotspot .info-hotspot-header .info-hotspot .info-hotspot-text .info-hotspot .info-hotspot-close-wrapper Save your CSS file and review the results.   Why not have a play with other colours, in the CSS. Don’t forget the semi-colon at the end of the lines!

Useful eLearning Tools You Should Know About

Today, learning a new skill or grabbing a certification is possible with a few right clicks on the internet. The only thing required is the knowledge of right tools that makes our job quicker. This article will guide you about useful eLearning tools every eLearner must know about. Read more are 5 Useful eLearning Tools You Must Know About – eLearning Industry