[OH3] oh-label-card Text Align and gray borders

sl4m · February 4, 2022, 7:09pm

Dear all,
i am trying to create a new page for my wall tablet.
However, i do have two issues:

How to align the text to the left in a oh-label-card?
- I want to move the artist and music title information to the left side.
How to remove these gray borders around all cards?

This is how the page currently looks like (in “Run Mode”: on):

This is the YAML:

config:
  layoutType: fixed
  fixedType: grid
  label: Screensaver Light
  sidebar: true
  screenWidth: 800
  screenHeight: 1280
  colNum: 16
  margin: 0
  hideNavbar: true
  hideSidebarIcon: true
  style:
    --f7-block-text-color: black
    --f7-page-bg-color: white
    --f7-text-color: black
blocks: []
masonry: null
grid:
  - component: oh-grid-item
    config:
      x: 0
      y: 0
      h: 3
      w: 16
    slots:
      default:
        - component: oh-clock-card
          config:
            timeFontWeight: bold
  - component: oh-grid-item
    config:
      x: 0
      y: 7
      h: 6
      w: 16
    slots:
      default:
        - component: widget:weatherCard_auswahl_lightTheme
          config:
            itemPrefix: OneCallAPIweatherandforecast_
            itemPrefix2: Localweatherandforecast_
            forecastHours: "4"
            forecastDays: "4"
            bigCard: true
            fontColor: 0,0,0
            textShadowColor: 255,255,255
            dateFormat: true
            timestampSuffix: " Uhr"
            wordingFeel: Gefühlt
            wordingForecastHours: Stündlich
            wordingForecastDays: Täglich
            wordingForecastPrecib: "% Regen"
            wordingNow: Jetzt
            wordingToday: Heute
            wordingSunrise: Sonnenaufgang
            wordingSunset: Sonnenuntergang
  - component: oh-grid-item
    config:
      x: 0
      y: 3
      h: 4
      w: 7
    slots:
      default:
        - component: oh-label-card
          config:
            icon: "=(items.OneCallAPIweatherandforecast_Current_Iconid.state === '01d') ? 'f7: sun_max_fill' : (items.OneCallAPIweatherandforecast_Current_Iconid.state === '01n') ? 'f7: moon_stars_fill' : (items.OneCallAPIweatherandforecast_Current_Iconid.state === '02d') ? 'f7: cloud_sun_fill' : (items.OneCallAPIweatherandforecast_Current_Iconid.state === '02n') ? 'f7: cloud_moon_fill' : (items.OneCallAPIweatherandforecast_Current_Iconid.state === '03d') ? 'f7: cloud_fill' : (items.OneCallAPIweatherandforecast_Current_Iconid.state === '03n') ? 'f7: cloud_fill' : (items.OneCallAPIweatherandforecast_Current_Iconid.state === '04d') ? 'f7: cloud_fill' : (items.OneCallAPIweatherandforecast_Current_Iconid.state === '04n') ? 'f7: cloud_fill' : (items.OneCallAPIweatherandforecast_Current_Iconid.state === '09d') ? 'f7: cloud_heavyrain_fill' : (items.OneCallAPIweatherandforecast_Current_Iconid.state === '09n') ? 'f7: cloud_heavyrain_fill' : (items.OneCallAPIweatherandforecast_Current_Iconid.state === '10d') ? 'f7: cloud_sun_rain_fill' : (items.OneCallAPIweatherandforecast_Current_Iconid.state === '10n') ? 'f7: cloud_moon_rain_fill' : (items.OneCallAPIweatherandforecast_Current_Iconid.state === '11d') ? 'f7: cloud_sun_bolt_fill' : (items.OneCallAPIweatherandforecast_Current_Iconid.state === '11n') ? 'f7: cloud_moon_bolt_fill' : (items.OneCallAPIweatherandforecast_Current_Iconid.state === '13d') ? 'f7: cloud_snow_fill' : (items.OneCallAPIweatherandforecast_Current_Iconid.state === '13n') ? 'f7: cloud_snow_fill' : (items.OneCallAPIweatherandforecast_Current_Iconid.state === '50d') ? 'f7: cloud_fog_fill' : (items.OneCallAPIweatherandforecast_Current_Iconid.state === '50n') ? 'f7: cloud_fog_fill' : '?'"
            vertical: true
            iconSize: 100
            item: OneCallAPIweatherandforecast_Current_Condition
            noBorder: true
            noShadow: true
            outline: false
            iconColor: gray
  - component: oh-grid-item
    config:
      x: 7
      y: 3
      h: 4
      w: 9
    slots:
      default:
        - component: oh-label-card
          config:
            item: XiaomiKlimaSensor4_Temperatur
            fontSize: 80px
            noBorder: true
            noShadow: true
          slots: null
  - component: oh-grid-item
    config:
      x: 2
      y: 14
      h: 5
      w: 5
    slots:
      default:
        - component: oh-image-card
          config:
            noBorder: true
            noShadow: true
            item: EchoSpotSchlafzimmer_BildURL
            refreshInterval: 5000
  - component: oh-grid-item
    config:
      x: 7
      y: 14
      h: 2
      w: 9
    slots:
      default:
        - component: oh-label-card
          config:
            class:
              - justify-content-right
            style:
              text-align: left
            item: EchoSpotSchlafzimmer_Untertitel1
            fontSize: 30px
            text-align: left
            noBorder: true
            noShadow: true
          slots: null
  - component: oh-grid-item
    config:
      x: 7
      y: 16
      h: 3
      w: 9
    slots:
      default:
        - component: oh-label-card
          config:
            item: EchoSpotSchlafzimmer_Titel
  - component: oh-grid-item
    config:
      x: 0
      y: 14
      h: 2
      w: 2
    slots:
      default:
        - component: oh-label-card
          config:
            noBorder: true
            noShadow: true
            icon: f7:play_fill
            iconSize: 50
            label: " "
canvas: []

Can someone help?
Thank you!

JustinG · February 4, 2022, 9:28pm

There’s an easy solution to your first question. All cards have a noBorder property; just set that to true. (You may also want to set the equivalent noShadow and outline properties as well). Those and a few other card properties are described in the docs:

https://www.openhab.org/docs/ui/components/oh-label-card.html

Your second question is a little trickier. The label cards do not have a many default ways to alter their formatting. I suggest that you might have an easier time getting exactly the look you want in the long run if you just build your own custom widget for this instead of relying on the default cards. However, that said, it can be done. To do it you have to take advantage of the stylesheet property to inject some custom css into the page. You have to give the label a unique class name, make sure that the container the label is in stretches the entire width of the card, and then left align the label within that container:

- component: oh-label-card
  config:
    label: Big label
    class: left-label
    stylesheet: >
      .left-label {
        width: 100%;
        text-align: left;
      }

gives you:

sl4m · February 5, 2022, 7:40am

Hi thank you for your detailed answer!
The style sheet I will try today.
However noBorder and noShadow I already set to true (YAML code above). But I still do have the gray borders. Anything else to deactivate?

JustinG · February 5, 2022, 5:51pm

Sorry, I missed that part.

You probably also need to add

--f7-card-box-shadow: none

to the style settings of the page.

sl4m · February 5, 2022, 8:57pm

That worked fine. The gray boxes are gone!
Stupid question: how do you know that? ;D is there somewhere a documentation about these --f7 commands? Currently I am just searching the forum to find your posts about that

Ps: thank you for your help!

JustinG · February 5, 2022, 10:47pm

There is a very good set of docs on the f7 elements:

But often, if you have question about some part of a widget you can use the inspect feature of your browser which will show you both the current settings of the element and whether that setting depends on an f7 variable:

Usually, the only difficult there is figuring out which html element is the one you’re interested in because many of the components will include multiple elements. There you sometimes have to go look through the vue files for the components to understand their structure: