CROPRO 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 CROPRO UI to adhere to the color scheme of your application. Here's how...

Two approaches

You adjust the UI styling via the CropArea.styles.settings property.

There are two types of styling-related properties available under the styles.settings:

The easiest but fairly limited approach is to change xxxYyyColor-style properties. These set the color of a particular element such as toolbarBackgroundColor.
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:

cropArea.styles.settings.toolbarStyleColorsClassName = 'bg-white';
cropArea.styles.settings.toolbarButtonStyleColorsClassName =
  'bg-gradient-to-t from-white to-white hover:from-white hover:via-pink-100 hover:to-white fill-current text-pink-300';
cropArea.styles.settings.toolbarActiveButtonStyleColorsClassName =
  'bg-gradient-to-t from-white to-pink-50 fill-current text-pink-400';
cropArea.styles.settings.toolbarStraightenerColorsClassName = 'text-pink-300 fill-current';
cropArea.styles.settings.toolbarBackgroundColor = 'white';

cropArea.styles.settings.canvasBackgroundColor = 'white';

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.

CROPRO Documentation: UI Customization

UI customization

Two approaches

Front page demo styling

Try to avoid setting layout-related styles

See also