css

Type: string or Object

Our Contact Picker is fully customizable via CSS styles.

When this value is an object, we look for two additional properties and apply the primaryColor and secondaryColor to the current style sheet. This is a simpler way to make the Contact Picker match the colors of your website without having to create and host your own separate stylesheet.

For example:

cloudsponge.init({
  css: {
    primaryColor: '#b30021',
    secondaryColor: '#e6e6e6',
  }
});

The color values can be any CSS color.

primaryColor applies to the topbar, checkboxes, links and share button.
secondaryColor applies to the hover background on the sources page, and the selected contacts.

See it working in our examples here.

For full access to all customizations that CSS provides, pass a URL to the stylesheet you created with your own style overrides. When specified, your stylesheet is included after our styles on the page so it needs to only define the styles you want to override.

Here are examples of common classes that you might want to override. If there anything you want to style that’s not included, let us know and we’ll help you with the particulars.