1

This is probably an extremely simple question for somebody knowing HTML/CSS just a tiny bit, so upfront, apologies but I couldn't find anything online (and I'm not sure where to look exactly). Specifically, I want to have some basic paper-styles applied to some of the widgets. In this case it is the secondary text attribute, depicted at the top (mostly) here: https://elements.polymer-project.org/elements/paper-styles?view=demo:demo/index.html&active=paper-styles

I want to use this to style the second line of a paper-item. I also posted an issue on the github repo of jupyter/declarativewidgets with more information (code snippets), please see here. Any help/pointer/tip/explanation would be greatly appreciated!

osdf
  • 818
  • 10
  • 20

1 Answers1

1

Make sure you're declaring secondary as a class, not an attribute, e.g. <div class="secondary"> not <div secondary> You may also need to import the paper-styles .html file with a <link> tag?

peller
  • 4,435
  • 19
  • 21
  • or maybe it's not that simple... http://stackoverflow.com/questions/31465141/usage-of-polymer-1-0-paper-styles-element – peller Jul 05 '16 at 16:49
  • the CSS rule for `.secondary` doesn't even exist in the paper code, you apparently have to create the CSS rule yourself based on variables prefixed with `--` in the theme file. You'll want to look at [the demo](https://github.com/PolymerElements/paper-styles/blob/master/demo/index.html#L115) on that paper-themes doc you referenced to see how it's done. Yah, pretty complicated! – peller Jul 05 '16 at 16:57
  • Thanks Adam for your replies! Still no luck: I added a `````` and then simply copied over the complete style section of the linked demo (and have ```class="secondary``` applied). – osdf Jul 05 '16 at 17:35
  • How would the most simplest example look like if I want to test wether the CSS styling actually works? – osdf Jul 05 '16 at 17:41
  • It looks like the CSS variables used in the paper-styles demo only work within Polymer elements (not sure exactly why yet — perhaps by design?) Here's a [simple example notebook](https://gist.github.com/peller/63b6bf6ccb2d37247f714273117cc4c1) showing a CSS rule for `.secondary` applies to a div inside a custom Polymer widget instance. If you want to use variables used internally in Polymer to external HTML elements, I'm not sure if that's possible... – peller Jul 05 '16 at 18:50
  • 1
    I updated the [example in gist](https://gist.github.com/peller/63b6bf6ccb2d37247f714273117cc4c1). Revision 2 works with a simple div. I forgot the `is="custom-style"` – peller Jul 06 '16 at 01:06