Styling the rollershutter card

I am using the rollershutter on a canvas like here:

image

and I like to style the widget in a different color. As the white background color off the white rounded rectangle stands out too much I would like to make it a bit transparent or greyish.

Frow what I understood I can add a style parameter to the config of the card which I did for the outer card rectangle to make it red (which will not stay but just shows what I did so far):

component: oh-canvas-item
          config:
            h: 65
            w: 156
            x: 980
            y: 794
          slots:
            default:
              - component: oh-rollershutter-card
                config:
                  dirIconsStyle: arrowtriangle_{dir}
                  item: F1_Shutters
                  style:
                    background-color: rgba(246, 0, 0, 0.8)

My question is how I can change the inner white rectangle of the widget via this config to achieve a “background-color: lightgray;” so it would appear as follows (I tweaked the style with the browser dev tools to show what I intend to do):

image

The background color for the controls are still just set by the f7 variables. So, in the card style you need to set the --f7-button-bg-color and the --f7-segmented-strong-bg-color variables.

Thanks Justin,

This is how I did it now:

config:
  label: rollershutter_page
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-rollershutter-card
                      config:
                        dirIconsStyle: arrowtriangle_{dir}
                        item: GF_stairs_shutter
                        style:
                          --f7-button-bg-color: rgba(240, 0, 0, 1)
                          --f7-segmented-strong-bg-color: rgba(240, 240, 240, 0.5)
masonry: []
grid: []
canvas: []

Note that the following has no effect

–f7-button-bg-color: rgba(240, 0, 0, 1)

The outcome is

image

However, if I do this in a fixed canvas widget it results into this and has not effect :frowning:

component: oh-canvas-item
config:
  h: 65
  w: 137
  x: 564
  y: 2
slots:
  default:
    - component: oh-rollershutter-card
      config:
        dirIconsStyle: arrowtriangle_{dir}
        item: GF_stairs_shutter
        style:
          --f7-segmented-strong-bg-color: rgba(240, 0, 0, 1)

Question: how do I find out which vars are used. I tried looking into the css source but I can’t figute it out. Where do you get the info from? What if I wanted to give it a thin border for example (without asking you all the time :wink: )

If it’s not one I’m familiar with from my own previous struggles, then I usually just quickly check the component vue file to make sure that there isn’t a direct OH setting for the style I’m trying to control, and if there is not, then I bring up the F7 css doc:

(segmental buttons are under button and don’t have their own doc page).

I looked at the html code which have me these classed:

rollershutter-controls segmented segmented-round segmented-strong

and the div above has 'card-content". Together they define the background-style:

.card-content .segmented
background: var(–f7-card-bg-color);

So by setting this, you can achieve the goal:

style:
  --f7-card-bg-color: rgba(240, 0, 0, 1)

By the way I added this to the yaml of the widget. However, as a sidenote, this can be even done on the page level and it then applies to all widgets for the whole page.

Finally I set it to on the page level to

  style:
    background-color: black
    --f7-card-bg-color: rgba(240, 240, 240, 0.2)
    --f7-button-height: 7px

which IMHO looks pretty nice:

image

1 Like