Font size for title on card widget

[stadelmannj (Juerg Stadelmann)]

how can I change the size of the font used for the title of an oh-toggle-card or oh-rollershutter-card widget ? I’ve tried several things based on google search, but non of the solution (things like fontsize in YAML config) increased the font.

[JustinG]

The current answer is akin to this:

Help styling f7-card with repeater

The oh-list-card is one of the special cases. In this case, the style property isn’t actually read so you can’t set css or css variables that way. In order to apply css to the header in the oh-list-card you have to use the more direct option of the stylesheet property which allows you to inject css directly into the page at the location of that element. So in this case you would want something like this: - component: oh-list-card config: title: List Card stylesheet: > .card-…

However, if you are willing to use a snapshot version or wait just a little bit for the next milestone, then it will be substantially easier. All the cards have been recently rebuilt so you would just need to use the new property headerStyle:

- component: oh-toggle-card
  config:
    headerStyle:
      fontSize: 32px

[stadelmannj (Juerg Stadelmann)]

Hi @JustinG unfortunatelly, this does not work either. what I size i chose, the size remains the same. here’s what I configured.

- component: oh-toggle-card
  config:
    item: Licht_EG_Whz1
    title: Licht Whz 1
    headerStyle:
      fontSize: 20px

any idea ?

[JustinG]

What version are you using?

[stadelmannj (Juerg Stadelmann)]

Version: 4.2.0 (Build)

[JustinG]

Well, that’s your problem. As I indicated, headerStyle is a very new feature. It is not available on anything but the most recent snapshots (going back only a couple of weeks), and now the most recent milestone that was just released. On 4.2, you’re going to have to use stylesheet workaround as demonstrated in the link I posted (only with font-size instead of font-weight).

[stadelmannj (Juerg Stadelmann)]

sorry, i missed that. i tried the “old” way as you pointed out in the link and it works fine, at least in any Browser on PC. but if I open the page on a Tablet (both Android with Chrome or IOS with Safari), it still does not work. is there another “trick” i need to apply to get it working on tablets ?
thanks a lot. appreciate your help.

[JustinG]

@stadelmannj

is there another “trick” i need to apply to get it working on tablets ?

No, the stylesheet works just fine on android phones and tablets for me. You probably have to re-fresh the page cache or use the Help and About → Reload App link.