cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Need to share some code when posting a question or reply? Make sure to use the "Insert code sample" menu option. Learn more! X

Using CSS in Value Display widgets in Vuforia Studio

HectorAtLmco
8-Gravel

Using CSS in Value Display widgets in Vuforia Studio

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!

ACCEPTED SOLUTION

Accepted Solutions
ailko
12-Amethyst
(To:HectorAtLmco)

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

 



View solution in original post

1 REPLY 1
ailko
12-Amethyst
(To:HectorAtLmco)

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

 



Announcements

Top Tags