Skip to main content
H
HectorAtLmco1-Visitor
1-Visitor
August 17, 2021
Solved

Using CSS in Value Display widgets in Vuforia Studio

  • August 17, 2021
  • 1 reply
  • 1834 views

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:

 

HectorAtLmco_1-1629225935947.png

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

Thank you so much!

Best answer by ailko

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:

ailko_1-1629812455811.png

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

 



1 reply

A
ailko5-Regular MemberAnswer
5-Regular Member
August 24, 2021

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:

ailko_1-1629812455811.png

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

 



    Terms & ConditionsCookie settingsAccessibility statement