Layout properties for pages and rows

[Oliver2 (Oliver)]

I have been looking for over a week now for a way to do the following:

• control spaces between rows and columns (i.e. spaces between cards. unfortunately the no-gap property is not yet working)
• set background color for pages
• set font color of cards
• show/hide a popup based on an item’s state or as an alternative place a card on top of other cards (where I already know how to control its visibility)

I have already been asking in this forum but it is hard to make a step forward.
Sorry for contacting you now @ysc Yannick. Could you give me a tip?
Many thanks in advance.

[RGroll (Rainer)]

Hey @Oliver2

@Oliver2

control spaces between rows and columns (i.e. spaces between cards. unfortunately the no-gap property is not yet working)

Theres no default gap between rows - only cols have a pre-define gap.
To remove this, you have to assign the no-gap class to the parent element of the columns (most likely the f7-row component)

YAML example

component: f7-card
slots:
  default:
    - component: f7-row
      config:
        class:
          - no-gap
      slots:
        default:
          - component: f7-col
            config:
            slots:
              default:
                - component: Label
                  config:
                    text: "Column #1"
                    style:
                      background: green
          - component: f7-col
            config:
            slots:
              default:
                - component: Label
                  config:
                    text: "Column #2"
                    style:
                      background: yellow

@Oliver2

set background color for pages

Go to the Code tab of your site and assign a background-style there, like:

YAML example

config:
  label: Your page
  sidebar: true
  order: "1"
  style:
    background: green

@Oliver2

set font color of cards

Depends on the card you want to assign a font-color to - Some standard widgets may have a font color pre-defined, which you can’t overwrite. You can assign a font-color to custom widgets like this:

YAML example

component: f7-card
config:
  style:
    color: purple

@Oliver2

show/hide a popup based on an item’s state or as an alternative place a card on top of other cards (where I already know how to control its visibility)

I don’t think theres a way to open or close popups on pages automatically, based on item state changes, as you can trigger actions only manually with an action-component currently.

I’m not exactly sure, if I understand the second part of your question correct, but if you place a component (or card) inside another component, you can trigger its visibility with expressions like you do it with other components.

[Oliver2 (Oliver)]

Hi Rainer,
many many thanks that you took the time for helping me out.
I have already read a lot of your answers and example yaml codes in other threads which already helped a lot as I have started creating my own widget.

Is there a difference how to “start” a widget? I have seen yaml examples where the main widget f7-container is either f7-block, f7-page or f7-card

color: purple
Do you know if it is possible to set color by 6 digit color code ‘#123456’ or rgb code?

background color
Cool. Never saw any hints about that. Where do you get all this information from?

show/hide a popup
to clarify what I want to achieve:
Currently I have a custom widget in HABpanel which shows the video stream of a camera if the door bell rings for 30 seconds. That is simply an html element which is on top of the current page like this:

When I tip on that picture it closes before the 30 seconds are over.

[RGroll (Rainer)]

@Oliver2

many many thanks that you took the time for helping me out.

No problemo

@Oliver2

Is there a difference how to “start” a widget? I have seen yaml examples where the main widget f7-container is either f7-block, f7-page or f7-card

Each component of the f7-framework has its own behaviour and is made for different purposes with different pre-defined styles and classes. To stay on the three that you mentioned:

f7-block (f7 docs | f7-vue specific docs)

A content block with only a few styles already applied (only padding afaik) - so no background-color and no borders etc. - mosly used in cases, where you want display elements with as less styles as possible but still want it to align with the grid of other components (which the padding is for)

f7-page (f7 docs | f7-vue specific docs)

A page ‘container’ is meant to show contents as a full page. For OH it should be used for contents that you want to display without any borders / margin or padding at the outer ends - usefull especially for popups.

f7-card (f7 docs | f7-vue specific docs)

A classic card component is the ‘common’ way to organize informations inside - it comes with default borders, a background, padding / margin etc. - Its designed to work out-of-the-box with most of the other f7-components, like f7-list for example.

@Oliver2

color: purple
Do you know if it is possible to set color by 6 digit color code ‘#123456’ or rgb code?

Yes, the css property color works with with rgb(), rgba(), hex, hsl() and hsla() values (see: https://www.w3schools.com/cssref/pr_text_color.asp)

@Oliver2

background color
Cool. Never saw any hints about that. Where do you get all this information from?

It’s just css and some talks with Yannick about the places, where it can be used. - A basic understanding of CSS is very helpfull in the work with custom-widgets.

@Oliver2

show/hide a popup
to clarify what I want to achieve:
Currently I have a custom widget in HABpanel which shows the video stream of a camera if the door bell rings for 30 seconds. That is simply an html element which is on top of the current page like this:

I don’t think this could be realized inside a popup currently, but there are definitely ways to show and enlarge a video stream on item state change - to close this video stream on click would be easy then.

I might look into this, if I find time but it might take some days. But I’m sure you’ll be able to realize something like this for yourself with some research (or even trial & error)

[ysc (Yannick Schaus)]

@RGroll

It’s just css and some talks with Yannick about the places, where it can be used. - A basic understanding of CSS is very helpfull in the work with custom-widgets.

Also you can use the “inspect” feature of your browser and go to the Computed pane where you’ll be shown how the style property are set and what caused them to have that particular value.

Many of them will come from one of the –f7-* CSS variables, in this case you’re lucky because all you have to do is redefine it somewhere above in the tree (like your f7-card) and they will be inherited to the descendants.

style:
  --f7-card-header-text-color: red;
  --f7-card-header-font-size: 24px;

[Oliver2 (Oliver)]

@RGroll

YAML example

config:
  label: Your page
  sidebar: true
  order: "1"
  style:
    background: green

Sorry for bothering you again. I tried to apply this to a tabs page but with no luck.
Do you know how this is possible?

[RGroll (Rainer)]

Hey @Oliver2

@Oliver2

I tried to apply this to a tabs page

You have to apply the background color within the layout page you want to link - you can’t set page-styles via the tab page directly.

[Oliver2 (Oliver)]

thank you very much. I was hoping to define kind of “global” CSS values like

    config:
      style:
        --my-color: = '#111111'

and refer to that value from all elements with
background-color: var(--my-color)
like Yannick was suggesting in another thread.
A little bit like in HABpanel where you could define a custom css file.

[RGroll (Rainer)]

@Oliver2

and refer to that value from all elements with
background-color: var(--my-color)

Setting css variables will only work on a pagelevel - so you can assign var(–my-color) to every widget that sits on the page where you’ve defined that variable - it won’t work on other pages.

[RGroll (Rainer)]

btw - you don’t need the = in your css variable, so it would be:

--my-color: '#111111'