How can I style the extension Sidebar?

Question

I have the following sidebar in my extension but I want change the look and feel. How can I do this?

var sidebar = new appAPI.sidebar({
  position: 'right',
  url: 'http://news.yahoo.com',
  html: 'Some Html',
  title: {
    content: 'Yahoo News',
    close: true
  },
  opacity: 1.0,
  width: '300px',
  height: '100%',
  preloader: true,
  sticky: true,
  slide: 150,
  openAction: ['click', 'dblclick'],
  closeAction: 'click',
  theme: 'default',
  scrollbars: false,
  openOnInstall: true

Answer 1

There are several ways to do achieve this but my preferred method is to inject the relevant CSS rules into the page using the appropriate selector. So, for example, to change the border color to red:

var inlineCss = '.crossrider-sidebar-'+appAPI.appInfo.id+'-container {' +
   'border-color:red !important;' +
'}';
appAPI.dom.addInlineCSS({css:inlineCss});

[Disclosure: I am a Crossrider employee]