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

Community Tip - Stay updated on what is happening on the PTC Community by subscribing to PTC Community Announcements. X

How to change Grid Advanced widget text font to some external font

Rocky_2021
6-Contributor

How to change Grid Advanced widget text font to some external font

I have a new font that i want to set to rows text of my gridAdvanced widget,
"font-family": ["ZCOOL QingKe HuangYou", "cursive"]


I tried the css and grid configuration, may be somewhere i am getting wrong.

css is working for labels, but how shall i write css for grid rows font?
Can anyone please try this and help me set this font to my Grid Row Text?

 

 

 

 

In Thingworx composer I am using GridAdvanced widget.

in the screenshot below, 
Left side is Grid-Advanced widget, & Right side Zeros(0) are label widgets.
I need the font of GridAdvaced Text ( 1       0 ) to be the same as label font.

GP_10261285_0-1681468781425.png


For label I am using following css.

GP_10261285_1-1681468781407.png

Please try it for grid advanced widget in thingworx, and let me know if anything works for it.


Thanks in advance.

 

1 ACCEPTED SOLUTION

Accepted Solutions
Rocky_2021
6-Contributor
(To:Rocky_2021)

This is solved by finding the widget class / ID from runtime mashup and applying the css to it directly once the font is imported as .css file in FileRepository.

for example , in my case I use the following css code:

@import("/Thingworx/FileRepositories/customcss/digitalclockfont.css");

#root_pagemashupcontainer-8_gridadvanced-96-grid-advanced .objbox table btody tr td {font family: 'Zcool Qingke HaungYou',cursive;}

 

and this code is pasted in "custom css" of that mashup.

& wohoo that worked .. !

View solution in original post

2 REPLIES 2
jensc
17-Peridot
(To:Rocky_2021)

Hello @Rocky_2021 ,

 

The following custom CSS seems to work fine, although it doesn't change the header font.

@supports (ptcs-style-unit: "PTCS-CORE-GRID") {
   [part~="cell-label"] {
     font-family: 'yourFontFamilyHere';
    }
}

However I think this will target ALL grids, so be careful with how you use it.

 

To change the header font you might be able to use [part~="header-label"].

A good consideration is also that PTC does not recommend using custom CSS.

 

Regards,

Jens

Rocky_2021
6-Contributor
(To:Rocky_2021)

This is solved by finding the widget class / ID from runtime mashup and applying the css to it directly once the font is imported as .css file in FileRepository.

for example , in my case I use the following css code:

@import("/Thingworx/FileRepositories/customcss/digitalclockfont.css");

#root_pagemashupcontainer-8_gridadvanced-96-grid-advanced .objbox table btody tr td {font family: 'Zcool Qingke HaungYou',cursive;}

 

and this code is pasted in "custom css" of that mashup.

& wohoo that worked .. !

Top Tags