marker.js

marker.js 2 Documentation: UI Customization

UI customization

If you have tried the demo on the front page of markerjs.com you probably noticed that you can adjust marker.js 2 UI to adhere to the color scheme of your application. Here's how...

Two approaches

You adjust the UI styling via the MarkerArea.uiStyleSettings property.

There are two types of properties available under the uiStyleSettings:

  1. The easiest but fairly limited approach is to change xxxYyyColor-style properties. These set the color of a particular element such as toolbarBackgroundColor.
  2. The other, more flexible, way is setting xxxYyyClassName-style properties. This way you can set CSS class names of specific elements and gain more flexibility in what you can do.

Technically, you can combine both approaches but for predictable results, you should pick one or the other.

Front page demo styling

This site uses Tailwind CSS framework and we've used Tailwind CSS utility classes to style the front page demo to fit the style of the site.

Here's the relevant part of the demo code:

markerArea.uiStyleSettings.toolbarStyleColorsClassName = 'bg-white'; markerArea.uiStyleSettings.toolbarButtonStyleColorsClassName = 'bg-gradient-to-t from-white to-white hover:from-white hover:to-pink-50 fill-current text-pink-300'; markerArea.uiStyleSettings.toolbarActiveButtonStyleColorsClassName = 'bg-gradient-to-t from-pink-100 via-white to-white fill-current text-pink-400'; markerArea.uiStyleSettings.toolbarOverflowBlockStyleColorsClassName = "bg-white"; markerArea.uiStyleSettings.toolboxColor = '#F472B6', markerArea.uiStyleSettings.toolboxAccentColor = '#BE185D', markerArea.uiStyleSettings.toolboxStyleColorsClassName = 'bg-white'; markerArea.uiStyleSettings.toolboxButtonRowStyleColorsClassName = 'bg-white'; markerArea.uiStyleSettings.toolboxPanelRowStyleColorsClassName = 'bg-pink-100 bg-opacity-90 fill-current text-pink-400'; markerArea.uiStyleSettings.toolboxButtonStyleColorsClassName = 'bg-gradient-to-t from-white to-white hover:from-white hover:to-pink-50 fill-current text-pink-300'; markerArea.uiStyleSettings.toolboxActiveButtonStyleColorsClassName = 'bg-gradient-to-b from-pink-100 to-white fill-current text-pink-400';

Try to avoid setting layout-related styles

Technically, there's nothing preventing you from setting any CSS properties you like in the CSS classes you specify in the xxxYyyColorsClassName properties. But as the name suggests try sticking to the color-related properties and avoid anything that can affect layout.

Any attempts to set layout-related styles will likely result in undesired side-effects.

See also

  • Check out the IStyleSettings interface for the list of all of the available UI customization properties.
« PreviousNext »