Documentation

Get started with Coloring Book Plugin

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

Shortcode

  [pixobecoloringbook

    src="/images/flower.jpg"

    app-name="pixobe"

    initial-color="blue"

    fit-to-screen="false"]

Properties

Property	Details
app-name	Name of the app, if provided will override download file name.
src	Image source, should start with http(s) and a valid image file
fit-to-screen	If set to true, it will fit the image to available space on the screen
initial-color	Initial color of the color picker
email	Set to false, to turnoff email

Theme

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

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

  /* Header background color */
  --secondary-color-coloring: #4d4c7d;

  /* Icon, text color*/
  --primary-text-coloring: #e9d5da;

  /* Icon active color */
  --primary-text-dark-coloring: #e6ba95;

  /* Card Header color */
  --card-header-color-coloring : #2b264e

  /* Card background color */
  --card-bg-color-coloring: #f9f9f9;
}