CODEWITHSUNDEEP
csspolymer
Narley Brittes
Narley Brittes

Reputation: 151

How to change Polymer(1.0) paper-toolbar background colour?

Yesterday I decided to try Polymer 1.0 and I'm already facing difficulties when trying to styling the paper-toolbar.

The documentation says that the background colour can be changed by using: --paper-toolbar-background

But how can I use it on CSS?

I tried the following:

    paper-toolbar {
        --paper-toolbar-background: #e5e5e5;
    }

Also this:

    paper-toolbar {
        --paper-toolbar {
            background: #e5e5e5;
        }
    }

But neither worked. What is the correct way to do it?

Thanks.

Upvotes: 6

Views: 6196

Answers (2)

wesleywh
wesleywh

Reputation: 1261

I couldn't find a solution to this problem either until recently. I have two toolbars and I didn't want to change the CSS for all toolbars just the header toolbar.

To change the CSS for every toolbar, in your external css file add the following:

paper-toolbar.paper-toolbar-0 {
  background: orange;
  color: red;
}

However, that doesn't address the problem. To change a single paper toolbar based on a class like the following:

<paper-toolbar class="header">
  ...
</paper-toolbar>

The above uses the class called "header" so in my CSS I added:

paper-toolbar.header {
    background: orange;
    color: red;
}

... and it worked! Yay! That means with this you should be able to override any CSS of any of the other elements doing the same thing. This is completely untested but I think it should work like:

<elementName>.<classname> {
  ...
}

Hope this all helps!

Upvotes: 5

Neil John Ramal
Neil John Ramal

Reputation: 3734

If you are styling it on your main page, then you have to apply styles using <style is='custom-style'>. This is to make Custom CSS Properties work.

Applying is relatively easy. paper-toolbar provides 2 custom properties and one mixin. --paper-toolbar-background is a property that changes the background color of the toolbar while --paper-toolbar-color changes its foreground color. --paper-toolbar is a mixin applied to the toolbar.

To use these properties is just the same as applying styles in your elements. As an example

<style is="custom-style">
  paper-toolbar {
    --paper-toolbar-background: #00f; /* changes the background to blue*/
    --paper-toolbar-color: #0f0; /* changes the foreground color to green */
    --paper-toolbar: {
      font-size: 40px; /* Change default font size */
    }; /* Notice the semicolon here */
  }
</style>

Upvotes: 16

Related Questions