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 quickly.

Now, I'm using the core-scaffold as general layout. I know how to color the sidebar, but I'm not sure where I can style the main content settings.

<html>
    <head>  
        <style>
            html,body {
                height: 100%;
                margin: 0;
                background-color: #E5E5E5;
                font-family: 'RobotoDraft', sans-serif;
            }

            core-toolbar {
                background: #E5E5E5;
                color: white;
            }

            paper-item.core-selected {
                color: #99182c;
                fill: #99182c;
            }
        </style>

    </head>

    <body unresolved touch-action="auto">

        <core-scaffold>

            <core-header-panel navigation flex mode="seamed">
                <core-toolbar style="background-color: #99182c; color:#fff;">Main site name</core-toolbar>
                <core-menu selected="0">
                    <paper-item icon="home" label="Home"></paper-item>
                    <paper-item icon="today" label="Activities"></paper-item>
                    <paper-item icon="account-box" label="People"></paper-item>
                    <paper-item icon="theaters" label="Pictures"></paper-item>
                    <paper-item icon="info" label="Info"></paper-item>
                    <paper-item icon="lock" label="Login"></paper-item>
                </core-menu>
            </core-header-panel>

            <div tool>Home</div>
        </core-scaffold>
    </body>
</html>

So the core-toolbar is styling the left sidebar, but how do I style the main page?

Another issue I'm having is that I'd like to work with the paper-elements. However, when using this core-scaffold, you'll notice that when the screen is small enough and the tab appears to open the left menu bar, it's a 'normal' button and not a paper one. Since this is in the core-scaffold, I don't directly know how to change this (if this is possible). Any ideas?

jun jun · Accepted Answer · 2014-07-07T18:35:02

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.

Polymer core scaffold coloring and paper button

2 Answers