How to style Polymer's <core-scaffold> toolbar background in 0.5?

101 views Asked by At

I'm having issues trying to set the full background color of the toolbar in Polymer 0.5 when using core-scaffold. What I've tried so far on Stackoverflow only sets the left menu side, but not the right content side. How does one set the background color for the full toolbar?

Below is the code sample from their own example.

<core-scaffold>
    <core-header-panel navigation flex mode="seamed">
        <core-toolbar>Menu</core-toolbar>
        <core-menu>
            <core-item icon="settings" label="item1"></core-item>
            <core-item icon="settings" label="item2"></core-item>
        </core-menu>
    </core-header-panel>

    <div tool>Dashboard</div>

    <div class="content">Content goes here...</div>

    <paper-toast id="error-toast" text="" swipeDisabled="false"></paper-toast>
</core-scaffold>

Cross Browser Support

Thanks to @CtrAltDel for leading me in the right direction. That solution only worked in IE. The following works in IE and Chrome.

<style>    
    body core-toolbar { background-color:Black; color:#ffffff; }
    core-scaffold::shadow core-toolbar { background-color:Black; color:#ffffff; }
</style>
1

There are 1 answers

1
CtrAltDel On BEST ANSWER

It has been a while but I had this working in the past:

body core-toolbar { background-color: #00FF00; }

with whichever color you want to use as the background-color value.