Sproutcore Custom CSS

Hey, so I'm trying to apply some custom css to a ToolbarView in SproutCore. I've managed to get a CSSE file loading by saving it in layouts/english.lproj but the styles I write are being overridden by the ones provided by SproutCore. This only happens for styles provided by the framework. In my case this would be the background-image element. If I view the page in Chrome's developer tools (below) you can see that both styles are being applied but because my stylesheet loads afterwards it is overridden. If I uncheck the background-image element in Chrome, my background can be seen.

Here are the things that I have tried:

• Giving my Toolbar an extra CSS class and targeting that (in my case AppToolbar)
• Targeting every CSS class including app-toolbar (.sc-view.sc-toolbar-view.AppToolbar)
• CSS !important
• Lots of Googling and Reading Documentation

Has anyone else had this problem? any help/suggestions would be greatly ap开发者_开发知识库preciated.

Screenshot posted here

Try using the background property instead of the background-image property.

A quick solution is to give your mainPane a layerId of "myApp" and prefix all your css properties with "#myApp":

#myApp.sc-toolbar-view { ... }

A cleaner solution is to give to your app a theme: http://guides.sproutcore.com/theming_app.html. After that, you will have to prefix your css class with $theme:

$theme.sc-toolbar-view { ... }

Don't forget that you can use scss which is integrate to Sproutcore. This way you can encapsulate all your rules like this:

$theme {
  .sc-toolbar-view { ... }
  .button { ... }
  ...
}

This allow you to write $theme only once (per file) and all your css rules will have priority over the one provided by SC.