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

PropertyDetails
app-nameName of the app, if provided will override download file name.
srcImage source, should start with http(s) and a valid image file
fit-to-screenIf set to true, it will fit the image to available space on the screen
initial-colorInitial color of the color picker
emailSet 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;
}