Using CSS in Value Display widgets in Vuforia Studio

[HectorAtLmco]

Hello there! I have a Value Display widget showing some data. I wanted to control the style with CSS in the Application section, so I wrote:

//Green
.valdispGreen {
color: #33cc33;
background-color: #000000;
font-size: 25px;
opacity: 0.7;
}

However, I found out that only the LABEL changed size, the VALUE portion of it, did not inherit the color or the font size:

Does anyone know how to change the VALUE font and color?

Thank you so much!

[ailko · Accepted solution]

Hi,

Yes you can update this as well via leveraging CSS by overriding the default CSS class behind the widget. First to figure out what class you need to override in a preview browser tab enable dev tools and use the inspect element feature and highlight/click the desired html component:

From here you are able to identify that the gray "Value" text is styled via the .item-note CSS class, so you can override this class in the same application CSS area as your custom class definitions. My CSS code looks like this:

//Green
.valdispGreen {
color: #33cc33;
background-color: #000000;
font-size: 25px;
opacity: 0.7;
}

.item-note {
float: right;
color: #3832a8;
font-size: 14px;
}

Doing this method will over-write all value displays in the experience or any widget that uses the .item-note class