Help understand to use style and/or css for my 1st widget

[portboy (Robert Heimann)]

Hi,

I’m on my first widget
It’s for controlling my radiators.
Bu I’m not familiar to use styles and/or css.

This is my widget:

This is the code:

uid: Thermostat
tags:
  - Thermostat Einstellen
props:
  parameters:
    - description: Text to Show as Title
      label: Title
      name: Title
      required: false
      type: TEXT
    - context: item
      description: item whitch represents the actual modus
      label: Item
      name: item_modus
      required: true
      type: TEXT
    - context: item
      description: item whitch set auto modus
      label: Item
      name: item_set_modus_auto
      required: true
      type: TEXT
    - context: item
      description: item whitch set manu modus
      label: Item
      name: item_set_modus_manu
      required: true
      type: TEXT
    - context: item
      description: item whitch set comfort modus
      label: Item
      name: item_set_modus_comfort
      required: true
      type: TEXT
    - context: item
      description: item whitch set eco modus
      label: Item
      name: item_set_modus_eco
      required: true
      type: TEXT
    - context: item
      description: item the actual temp
      label: Item
      name: item_actual_temp
      required: true
      type: TEXT
    - context: item
      description: item set the temp
      label: Item
      name: item_set_temp
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Nov 12, 2022, 1:01:53 PM
component: f7-card
config:
  title: '=(props.Title) ? props.Title : "Title"'
  style:
    width: 300px
    padding-left: 0px
    margin-left: 0px
    margin-right: 0px
slots:
  content:
    - component: f7-row
      config:
        noGap: true
        style:
          padding: 0px
      slots:
        default:
          - component: oh-label-card
            config:
              icon: f7:thermometer
              iconSize: 20
              fontSize: 20
              label: =items[props.item_actual_temp].state
    - component: f7-row
      config:
        noGap: true
      slots:
        default:
          - component: oh-stepper-card
            config:
              item: =props.item_set_temp
              min: 16
              max: 24
              step: 0.5
              small: true
              style:
                padding:-horizontl: 10px
                margin: 0px
    - component: f7-row
      slots:
        default:
          - component: f7-col
            config:
            slots:
              default:
                - component: oh-button
                  config:
                    text: Auto
                    small: true
                    fill: '=(items[props.item_modus].state == "AUTO-MODE") ? true : false'
                    outline: true
                    actionItem: =props.item_set_modus_auto
                    actionCommand: ON
                    action: command
                    style:
                      width: 50px
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    text: Manu
                    small: true
                    fill: '=(items[props.item_modus].state == "MANU-MODE") ? true : false'
                    outline: true
                    actionItem: =props.item_set_modus_auto
                    actionCommand: ON
                    action: command
                    style:
                      width: 60px
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    text: Comfort
                    small: true
                    outline: true
                    actionItem: =props.item_set_modus_comfort
                    actionCommand: ON
                    action: command
                    style:
                      width: 70px
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    text: Eco
                    small: true
                    outline: true
                    actionItem: =props.item_set_modus_eco
                    actionCommand: ON
                    action: command
                    style:
                      width: 50px

How can I make the widget more compact?
The margins/paddings are to much
I can’t find any guide or ressource where I can lern/understand for not programming guys how to setup the style of the used components.

[hmerk (Hans-Jörg Merk)]

As an example, take a look here

[OH3] Main UI - main_widget - Part 7 - The RadiatorControl Card [3.3.0;3.4.9)

[:crayon: Add a primary screenshot or a logo here. The first image of the post will be promoted seen in the add-on list in the UI.] The RadiatorControl card used by main_widget will show all radiator controls (thermostats) in a selected room and show controls based on equipment group members. Usage All radiator controls need to have their own Group (Group->Equipment->RadiatorControl). Equipment Group Type: Group Category: heating (not used) Semantic Class: RadiatorControl Ambient Temperat…

Should be easy to modify to your needs….

[JustinG]

You may find it helpful to look through the help doc on building widgets

Creating Personal Widgets

And in particular, if you look through the section on the OH specific widgets, you’ll probably find that much of the problem you’re having comes from not using the best components for your task. The -card components are probably not what you want here.

The docs section on css styling of pages and widgets also has some links for beginners tutorials on css.

[portboy (Robert Heimann)]

More reading, better solution

Now it looks:

And this is the code now:

uid: Thermostat
tags:
  - Thermostat Einstellen
props:
  parameters:
    - description: Text to Show as Title
      label: Title
      name: Title
      required: false
      type: TEXT
    - context: item
      description: item whitch represents the actual modus
      label: Item
      name: item_modus
      required: true
      type: TEXT
    - context: item
      description: item whitch set auto modus
      label: Item
      name: item_set_modus_auto
      required: true
      type: TEXT
    - context: item
      description: item whitch set manu modus
      label: Item
      name: item_set_modus_manu
      required: true
      type: TEXT
    - context: item
      description: item whitch set comfort modus
      label: Item
      name: item_set_modus_comfort
      required: true
      type: TEXT
    - context: item
      description: item whitch set eco modus
      label: Item
      name: item_set_modus_eco
      required: true
      type: TEXT
    - context: item
      description: item the actual temp
      label: Item
      name: item_actual_temp
      required: true
      type: TEXT
    - context: item
      description: item set the temp
      label: Item
      name: item_set_temp
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Nov 13, 2022, 11:26:19 PM
component: f7-card
config:
  title: '=(props.Title) ? props.Title : "Title"'
  padding: false
  style:
    width: 280px
    margin-left: 0px
    margin-right: 0px
slots:
  content:
    - component: f7-row
      config:
        noGap: true
      slots:
        default:
          - component: f7-col
            config:
              style:
                width: 40%
            slots:
              default:
                - component: f7-block
                  config:
                    strong: false
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =items[props.item_actual_temp].state
                          style:
                            padding-top: 8px
                            font-weight: bold
                            font-size: 17px
          - component: f7-col
            config:
              style:
                width: 60%
            slots:
              default:
                - component: oh-stepper-card
                  config:
                    small: true
                    item: =props.item_set_temp
                    min: 16
                    max: 24
                    step: 0.5
                    noBorder: true
                    noShadow: true
                    fill: true
    - component: f7-row
      config:
        noGap: true
      slots:
        default:
          - component: f7-col
            config:
              style:
                padding-left: 5px
                padding-bottom: 5px
                width: 60px
            slots:
              default:
                - component: oh-button
                  config:
                    text: Auto
                    small: true
                    fill: '=(items[props.item_modus].state == "AUTO-MODE") ? true : false'
                    outline: true
                    actionItem: =props.item_set_modus_auto
                    actionCommand: ON
                    action: command
                    style:
                      width: 50px
          - component: f7-col
            config:
              style:
                width: 65px
            slots:
              default:
                - component: oh-button
                  config:
                    text: Manu
                    small: true
                    fill: '=(items[props.item_modus].state == "MANU-MODE") ? true : false'
                    outline: true
                    actionItem: =props.item_set_modus_manu
                    actionCommand: =items[props.item_actual_temp].state
                    action: command
                    style:
                      width: 60px
          - component: f7-col
            config:
              style:
                width: 75px
            slots:
              default:
                - component: oh-button
                  config:
                    text: Comfort
                    small: true
                    outline: true
                    actionItem: =props.item_set_modus_comfort
                    actionCommand: ON
                    action: command
                    style:
                      width: 70px
          - component: f7-col
            config:
              style:
                width: 55px
            slots:
              default:
                - component: oh-button
                  config:
                    text: Eco
                    small: true
                    outline: true
                    actionItem: =props.item_set_modus_eco
                    actionCommand: ON
                    action: command
                    style:
                      width: 50px

I think still room for improvements
But for the first time it works

Thanks for the links where I have to look.