Polymer core scaffold coloring and paper button

Question

I\'m starting to use the polymer 0.5 code to build a responsive website. I know it\'s not fully finished, but nevertheless I find it pretty neat and simple to get stuff done qui

Answer 1

It is possible to change the style from the navy blue by digging into the tag in the /bower_components/core-scaffold/core-scaffold.html and changing the background-color; however this changes all the defaults.

Answer 2

I ran into the same problem and it turns out that you can style the elements (the toolbar) inside other elements (core-scaffold) using CSS with a special syntax to access the inner component (which is inside the Shadow DOM) using the ::shadow pseudo-element.

The top rule changes the color of the title background while the second one changes the background of the content area.

core-scaffold::shadow core-toolbar {
  background: #E5E5E5;
  color: black;
}

core-scaffold::shadow core-header-panel {
  background: #FFF;
  color: black;
}

Source: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-cat-hat

Update: This didn't work properly with Firefox because of shims. What did it was adding styles with the shim-shadowdom directive that gets interpreted only when on a non webcomponent/shadowdom native platform:

<style shim-shadowdom>
  core-scaffold core-toolbar {
    background: #EEE;
    color: black;
  }

  core-scaffold #main core-header-panel {
    background: #FFF;
    color: black;
  }
</style>

Note that to change the background of the content area I also had to select #main so porting ::shadow rules might need a bit of inspecting...

Finally when you need to properly deal with Firefox and other browsers from within a webcomponent/polymer element you can use the polyfill-rule or polyfill-unscoped-rule.