As a hosted solution Userplane will be updated automatically and you will likely need to do some regression testing as our interface requirements change with new features or adjustments. While we do our best to ensure the classes you are overriding will not change nominally it is still possible the adjustments to the underlying styles associated to said classes might break your interface in some manner. As such we highly recommend you subscribe to our mailing list where we provide preview versions a week ahead of any release. We will publish all changes to a staging site for regression testing one week before a production release and notify you so you have the opportunity to adjust accordingly.
Userplane highly recommends using the Firebug add-on for Firefox to develop CSS, although you can also use the default inspection and development tools within Webkit-based browsers and IE as well.
When building our stylesheets for the Userplane experiences we use very high selectivity in our class definitions. Because CSS cascades based on how specific the definitions we recommend you add an !important flag to all your overrides.
The default CSS for Disqus Comments uses very high selectivity. To override default styles, add an !important to the end of each CSS rule.
Since Userplane is completely deferred in terms of loading on your page we have to approach overriding CSS a little differently then the typical approach of just including a CSS file after you include Userplane. Why? Well by default CSS will cascade downward, and our embed only requires a single javascript file, not the CSS needed to style that embed. So we load our stylesheet after we have all of the SDK ready to use, as a result you will need to make sure your stylesheet loads right after ours which would require you to wait for our elements to finish loading, instead you can just let us do it for you.
So to add your own stylesheet to override the styles of the Userplane SDK make sure the below is included in your embed:
up.init({siteId:"your site id", key: "", token: "your token", lang: "en-US", settings: {cssOverrideURI:"PATH TO YOUR CSS FILE", skin:"YOUR SKIN"} );
The cssOverrideURI is the path to the css file on your server. An example would be: http://www.example.com/test.css. For skin, you have two options: basic and helix. Basic is a stripped down skin. You should use basic if you are making significant changes to the appearance of the Webmessenger3. Helix is our default skin. You should use helix if you are making minor modifications to the appearance of the Webmessenger3.