As you know, when integrating Pixo you can customize its look & feel by setting colors and backgrounds of the main components. We’ve been asked by a couple of customers to allow styling of even more & smaller components, like form elements, buttons, etc.

Instead, today we provide hook for attaching custom stylesheets.

This will allow you to completely overwrite Pixo’s default styles with your own, matching in full the look & feel of your product (fonts, colors, etc.).

How it works?

Just define your stylesheets in the styles option property:

var pixo_instance = new Pixo.Bridge({
  apikey: 'abc123xyz000',
  styles: {
     // CSS text
     css: '.pixo-canvaswrap { outline: 15px solid red }',
     // Stylesheet URL
     url: 'https://yourdomain.com/path/to/pixo-overrides.css',
  },
});

You can define both.

Backward-compatibility?

This change preserves the old way of setting custom styles.

Custom styling is a Premium feature

Check out our Pricing for further details.