Documentation

Get started with Coloring Book Plugin

This document explains steps to customize appearance of the coloring plugin.

You can add coloring book in two ways to your site.

  • Gutenberg Block Gallery.
  • Single coloring image.

Gutenberg Block

Search for Pixobe Gallery and add media to render the gallery.

Shortcode

  [pixobecoloringbook
    src="/images/flower.jpg"
    colors="#ffffff,#cccccc,#cccaaa,#fff000,#000000"]

Properties

PropertyDetails
srcImage source, should start with http(s) and a valid image file
colorsComma separted hex color code to display swatch instead of color picker

Theme

To change the default appearance of the colors, override the colors in your global styles.

:root {
  /* Background color*/
  --coloring-book-bg: #363062;

  /* Icon color */
  --icon-bg: #4d4c7d;

  /* Icon/text color*/
  --icon-color: #e9d5da;

  /* Icon active color */
  --active-icon-color: #e6ba95;
}