Hello all,
I am now trying the complete evening to change the color of text items of widgets. I tried the following parameters:
color: blue
textColor: blue
fontColor: blue
itemColor: blue
fontStyleColor: blue
None of them are working.
Can someone give me a hint?
Thank you 
style:
color: blue
Hello Oliver,
thank you for your answer.
Unfortunatelly also this doesnt work.
Here is the current code of the page:
config:
layoutType: fixed
fixedType: grid
screenWidth: 720
screenHeight: 1280
hideNavbar: true
hideSidebarIcon: true
label: screensaver_test
style:
--f7-page-bg-color: black
sidebar: true
colNum: 11
blocks: []
masonry: null
grid:
- component: oh-grid-item
config:
x: 4
y: 3
h: 4
w: 11
slots:
default:
- component: oh-clock-card
config:
timeFontWeight: bold
noBorder: true
noShadow: true
background: grey
timeFontSize: 50px
style:
color: blue
slots: null
canvas: []
The text is still black, looks like this:
I may be incorrect - but I think that since this is an OH component it appears that the color option has not been implemented?
I tried a different widget: oh-label-card
But i am not able to change the text color.
config:
layoutType: fixed
fixedType: grid
label: test3
blocks: []
masonry: null
grid:
- component: oh-grid-item
config:
x: 0
y: 0
h: 2
w: 2
slots:
default:
- component: oh-label-card
config:
item: Anzahl_Bilder
style:
color: blue
titleColor: blue
textColor: blue
fontColor: blue
fontSize: 30px
fontColor: blue
title: test
titleColor: blue
canvas: []
Text just stays black.
I created a custom widget and set style → color: red
This worked.
Then i integrated this custom widget into my page and the text was red:
config:
layoutType: fixed
fixedType: grid
label: test3
themeDark: false
blocks: []
masonry: null
grid:
- component: oh-grid-item
config:
x: 0
y: 0
h: 2
w: 2
themeDark: false
slots:
default:
- component: oh-label-card
config:
item: Anzahl_Bilder
style:
color: blue
title-color: blue
text-color: blue
font-color: blue
fontSize: 30px
font-color: blue
title: test
title-color: blue
themeDark: false
fontStyle:
color: blue
- component: oh-grid-item
config:
x: 2
y: 0
h: 2
w: 2
slots:
default:
- component: widget:test_widet
config:
item: Anzahl_Bilder
canvas: []
I do not understand this …
Just set your color scheme to dark, then you have white writing on a black background 
Possible but I only want to have one page with dark background as a screensaver. All others in white background 
Probably not possible with oh-clock-card.
You have to crreate your own f7-card and add an oh-clock component.
oh-clock color is set with either --f7-text-color or --f7-block-text-color.
But I don’t know if the property gets inherited from the f7-card
Thank you for your answer!
I tried the add the suggested code-lines, however, the text is still black…
config:
layoutType: fixed
fixedType: grid
screenWidth: 720
screenHeight: 1280
hideNavbar: true
hideSidebarIcon: true
label: screensaver_test
style:
--f7-page-bg-color: black
--f7-text-color: white
--f7-block-text-color: white
sidebar: true
colNum: 11
blocks: []
masonry: null
grid:
- component: oh-grid-item
config:
x: 4
y: 3
h: 4
w: 11
slots:
default:
- component: oh-clock-card
config:
timeFontWeight: bold
noBorder: true
noShadow: true
background: grey
style:
--f7-text-color: white
--f7-block-text-color: white
timeFontSize: 50px
canvas: []
To be honest, i dont know how to do this.
I tried the following in custom widgets and its showing a clock. However the text is still black
uid: widget_d052245939
props:
parameterGroups: []
parameters:
- name: prop1
label: Prop 1
type: TEXT
description: A text prop
- name: item
label: Item
type: TEXT
context: item
description: An item to control
tags: []
component: oh-clock-card
config:
title: '=(props.item) ? "State of " + props.item : "Set props to test!"'
footer: =props.prop1
content: =items[props.item].displayState || items[props.item].state
style:
color: red
component: f7-card
config:
style:
color: red
--f7-text-color: white
--f7-block-text-color: white
default:
slot:
- component: oh-clock
config:
...
Thank you alot!
I managed to get it work!
uid: Screensaver_Clock
tags: []
props:
parameterGroups: []
timestamp: Dec 29, 2021, 8:32:06 PM
component: f7-card
config:
font-size: 50px
bgColor: black
style:
color: white
class:
- justify-content-center
slots:
default:
- component: f7-row
config:
font-size: 50px
class:
- justify-content-center
style:
font-size: 50px
font-weight: 500
width: 100%
height: auto
slots:
default:
- component: oh-clock
config:
format: LTS
.
