Widget Formatting with Stylesheets

Hello everybody,

i have a grid page where i try to overwrite the opacity for included boxes:

  layoutType: fixed
  fixedType: grid
  screenWidth: 1920
  screenHeight: 1080
  scale: true
  label: Temperaturen
  sidebar: true
  stylesheet: >
    .card: { opacity:50%; }

The actual box looks like this:

  - component: oh-grid-item
      x: 4
      y: 0
      h: 2
      w: 2
        - component: f7-card-content
              background: url(/static/esszimmer.png)
              background-size: 100% 100%
              background-repeat: no-repeat
              - component: oh-stepper-card
                  item: Esszimmer_1_Solltemperatur
                  min: 8
                  max: 25
                  title: Esszimmer
              - component: oh-label-card
                  item: Esszimmer_1_Aktuelle_Temperatur
                  trendItem: Esszimmer_1_Aktuelle_Temperatur
                  action: analyzer
                    - Esszimmer_1_Aktuelle_Temperatur

Unfortunately, the css is not injected into the page, checked that with inspecting the resulting css commands. Obviously i’m overlooking something? I read through a lot of examples but can’t quite see how this intended to be used.

Currently it loogs like this, i want the white boxes to be semi transparent but if ever possible without applaying styles to each box separately.

Just had a similar problem.

Maybe the same solution?

Hmhmhm…there is a div.card in the code:
But the css doesn’t get applied.

You have it all mostly correct except for the extra : in your css after the class name

  stylesheet: >
    .card: { opacity:50%; }

should be

  stylesheet: >
    .card { opacity:50%; }

Aaah, this is real css syntax, not oh key/value pairs. I see. Thanks so much!

Yep. In yaml > is a multi-line string indicator. So all indented lines that follow are part of a single string value for the stylesheet key. In that multi-line string you are just writing full css and that string is injected directly as a scoped css directive.

That does mean that if you prefer to read the longer format css declarations you could also write your key/value as:

stylesheet: >
    .card {
      opacity: 50%;