Customizing the Userplane Experience for Your Website
Out-of-the-box, Userplane applications have a polished look-and-feel that is launch-ready. However, some of these characteristics are easily modified through CSS overrides (and a few via your Dashboard account). Your CSS overrides can customize a Userplane application’s color palette, fonts, size and dimensions, and even icons. If this is a direction you’d like to pursue for your website’s Userplane experience, your first step is to write your custom, override styles into a separate CSS file that is accessible on your website server. This file is then loaded through a special setting in the Userplane Embed Code, which is described further, just below…
How Userplane Loads Your Custom CSS
Userplane is deferred during load-up, which allows your website files and styles to load first. Because of the cascading nature of CSS, your CSS override file must load after Userplane has loaded. To do so, just add a cssOverrideURI property to the settings object in the Userplane Embed Code. The value for the cssOverrideURI property should be the full path for your CSS override file on your website server. Note the cssOverrideURI property / value pair in the sample code here:
up.init({
siteId:"YOUR_SITE_ID",
key: "",
token: "YOUR_SSO_TOKEN",
settings: {
cssOverrideURI:"http://www.example.com/myCssOverrideFile.css"
},
lang: "en-us"
});
Best Practices
A Few Tips for Writing CSS Overrides
Userplane stylesheets use highly selective class definitions, which should avoid collisions with your website’s CSS. Occasionally, there might be something that does conflict, which you can usually solve by using the !important flag in your override value, to ensure that your CSS is honored.
Chrome or Safari’s Developer Tools, the Firebug add-on for Firefox, or the default inspection and development tools within Internet Explorer, are very helpful when developing CSS, and especially when determining values for CSS override properties – you can make changes directly in the browser, and then copy / paste them into your override file when you’re happy with the outcome.
Preparing for New Releases
As a hosted solution, Userplane applications will update automatically when a new release is made public. We do our best to ensure that Userplane CSS classes remain the same release-to-release, but occasionally, there is the possibility that product evolution could cause your user interface and / or CSS overrides to not display as anticipated. To mitigate this possibility, two steps are recommended. The first is to subscribe to the Userplane Mailing List, so that you can be among the first to receive advance notice of our upcoming releases. Secondly, we recommend performing some regression tests with your Userplane integration. Changes included in the release will be published to a staging site for testing, which will offer you the opportunity to make observations and adjustments as needed, prior to the production release.