Widget Formatting with Stylesheets

[anne_hh (Anne W)]

Hello everybody,

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

config:
  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
    config:
      x: 4
      y: 0
      h: 2
      w: 2
    slots:
      default:
        - component: f7-card-content
          config:
            style:
              background: url(/static/esszimmer.png)
              background-size: 100% 100%
              background-repeat: no-repeat
          slots:
            default:
              - component: oh-stepper-card
                config:
                  item: Esszimmer_1_Solltemperatur
                  min: 8
                  max: 25
                  title: Esszimmer
              - component: oh-label-card
                config:
                  item: Esszimmer_1_Aktuelle_Temperatur
                  trendItem: Esszimmer_1_Aktuelle_Temperatur
                  action: analyzer
                  actionAnalyzerItems:
                    - 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.

[PeterV2 (Peter)]

Just had a similar problem.

Label Card Text Color

Creating a page showing time and temperature - very easy job (I tought …) Took me hours to make a black background setting the text color of the time widget to red removing the border of the widget. But now I surrender. Just changing the text color of a label widget to red. config: layoutType: fixed fixedType: canvas label: SZ style: --f7-page-bg-color: black sidebar: true hideNavbar: true hideSidebarIcon: true scale: true imageUrl: /static/blank.png comment: //Damit…

Maybe the same solution?

[anne_hh (Anne W)]

Hmhmhm…there is a div.card in the code:

But the css doesn’t get applied.

[JustinG]

@anne_hh

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.

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%; }

[anne_hh (Anne W)]

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

[JustinG]

@anne_hh

Aaah, this is real css syntax, not oh key/value pairs.

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%;
    }