Card background should be dynamic. Can you point me to the specific config that isn’t working?
You can’t. The stylesheet is pure css. That means it can handle any of the settings that you would put under the style config for a component. Any of the other configuration options, the ones that are just under the config key itself, such as icon-f7, etc, those are f7 specific options that are not css but used by the underlying f7 code.
In some cases, such as the iconColor, the f7 configuration alters a css property of some different name. If you want to override that f7 configuration you’ll have to explore the final page code or look into the f7 docs to see what property it is that’s being changed and whether it’s css or not. For example the widget code:
- component: oh-button
config:
text: Example Button
iconF7: ant
iconColor: blue
produces the html element:
<a href="#" class="button">
<i class="icon f7-icons color-blue">ant</i>
<span>Example Button</span>
</a>
which looks like this:
The iconF7: ant property tells the F7 code to add the <i> element with ant content. The iconColor: blue property tells the F7 code to add the class color-blue to the <i> element. Within the default css that comes with F7 the color-blue class will set the color css property of that element to blue.
We can’t put iconF7 in the stylesheet because that’s not a css property and the stylesheet will ignore it. We also can’t change the content of an element with css, so there’s no way for a stylesheet to interact with the iconF7 configuration.
We can’t put iconColor in the stylesheet because that’s not a css property and the stylesheet will ignore it. In this case, however, we can add a stylesheet to the button that overrides the color-blue class and gives the <i> element a different color value.
- component: oh-button
config:
text: Example Button
iconF7: ant
iconColor: blue
stylesheet: |
i {color: purple !important;}
Note: we had to add the !important directive to the css declaration because the order in which the elements are built by OH means that the stylesheet is applied before the F7 class so the F7 class color setting would override the one we want, and !important is the css keyword for “don’t override this setting with any further settings”.
then make myself available as a tester 
(i see 
