Skip to content

Styling a Micrio embed using CSS Client 4.x

WARNING

This page is about the Micrio client version 4. Use the links below to navigate to other versions.

CSS variables

Micrio 4 uses a set of CSS variables for styling its HTML elements, which are the simplest way of adjusting the way Micrio looks.

You can adjust these variables very easily to tweak the default Micrio look and feel:

VariableDefault valueDescription
--micrio-color#000The default text color
--micrio-color-hover#c5ff5bThe color for hovering clickable elements
--micrio-border-radius16pxThe border radius for buttons, popups, etc
--micrio-backgroundrgba(255,255,255,0.66)Element background color
--micrio-background-hovervar(--micrio-background)For clickable items, the hover background color
--micrio-border-color#fff4The default Micrio border color
--micrio-border1px solid var(--micrio-border-color)The default Micrio border
--micrio-page-background#fffCustom page background color
--micrio-page-color#fffCustom page font color
--micrio-marker-size16pxThe base marker size
--micrio-marker-text-color#fffThe marker label text color
--micrio-marker-border-radius100%The marker border radius (round)
--micrio-marker-colortransparentThe clickable marker color
--micrio-marker-color-hover#fb0The clickable marker color hover background
--micrio-marker-iconnoneA customizable marker icon
--micrio-marker-shadow-colorrgba(0,0,0,0.5)Marker shadow color
--micrio-marker-shadow0 0 3px var(--micrio-marker-shadow-color), inset 0 0 3px var(--micrio-marker-shadow-color)The marker shadow itself
--micrio-marker-shadow-hovernoneMarker shadow color on hover state
--micrio-marker-border4px solid #fffThe marker border
--micrio-marker-transitionbox-shadow 0.5s ease, background-color 0.5s ease, opacity 0.25s easeThe marker transition properties

Mobile responsiveness

There is also a light-weight responsive mode which affects the CSS variables. For screens narrower than 500px, this is the CSS:

css
@media (max-width: 500px) {
	html {
		--micrio-border-margin: 5px;
		--micrio-button-size: 48px;
	}
}

Custom CSS overwrites

Of course, since <micr-io> is a simple HTML element, you can use your own CSS to overwrite any of Micrio's styling.