MDK CSS changes are not reflected

[yavuzasik]

Hi

I wanted to modify the style of a "Status Text" element of an "Object Card Collection". As per the below document , I should be able to change these attributes of the respective CSS.

Actually I could not even use the above attributes. For some of them I immediately get a warning from the compiler saying "Unknown property" ( font-color for instance). Nevertheless it works for the color of the text when I use "color" attribute in the CSS by typing with auto-complete.

My main intention was to convert the text to a label by attaching a new background-color, but it did not work out at all. Later I also tried to play around with the font , font-family etc. , but none of them make a change in the Android app.

I use the version 23.4 btw. Can someone please give an idea?

Thanks,

Yavuz

[bill_froelich · Accepted solution]

You can't change the background color for individual properties like StatusText, etc. You can only change the background color for the whole card. The font color is controlled through the color property of the style.

[bill_froelich]

Please share your metadata definition where you reference your style and also your styles definition.

[yavuzasik]

Hi Bill,

Here is my page metadata and CSS. Let me know if these are the ones you asked for..

thanks

Regards

Part of my page metadata:

"Card": { "Visible": true, "Title": "{ActivityTypeText}", "Subhead": "{activity_info}", "DetailImage": "/app/Rules/ActivityIcon.js", "DetailImageIsCircular": false, "StatusText": "Started at: {starttime}", "OverflowButtons": [], "PrimaryAction": { "OnPress": "/app/Actions/Stop.action", "Style": "MyStopButton", "Title": "Stop", "Visible": true }, "SecondaryAction": { "Style": "", "Title": "", "Visible": false }, "Styles": { "Description": "MyDescription", "Footnote": "MyFootnote", "StatusText": "MyStatusText" }, "_Type": "Control.Type.ObjectCard" },

Styles.less:

@mdkRed1: #ff0000;@mdkGreen: #008000;@mdkWhite: #ffffff ;
.MyStopButton { background-color:@mdkRed1; }.MyDescription { color: @mdkWhite ; background-color: @mdkGreen }
.MyFootnote { color: @mdkWhite ; background-color: @mdkGreen }.MyStatusText { color: @mdkGreen ; background-color: @mdkGreen ;}.MyEmptySection{ color: @mdkRed1 ; }