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

Community Tip - Learn all about PTC Community Badges. Engage with PTC and see how many you can earn! X

how to change font of grid row text

Rocky_2021
6-Contributor

how to change font of grid row text

I have a new font that i want to set to rows text of my grid,
"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?

Thanks in advance.

 

 

1 ACCEPTED SOLUTION

Accepted Solutions

@Rocky_2021 , thanks for the feedback. If I understood correctly your feedback -you want the change the appearance of widget of Thingworx - on Thingworx mashup. What is the relation here to Vuforia Studio.? Is this mashup shown or called from Studio?. My answer was here  regarding the style setting in Vuforia Studio. If you want to change the style appearance / e.g. font etc. only in  Thingworx mashup (without any relation to Vuforia Studio) then possibly AR community is not the best forum to ask this question, because here the most reported  issues and questions are regarding to Vuforia Studio  Ok TWX is often used in Vuforia Studio but possibly in the Thingworx forums you will get better answer regarding TWX style customization. 

https://community.ptc.com/t5/ThingWorx-Developers/bd-p/twxdevs

 

View solution in original post

3 REPLIES 3

Hi @Rocky_2021 ,

when you meant grid row text - for which  widget you want to apply the font.

So styles are defined in app.scss and they could be set to the class properties - exampe:

2023-04-14_10-45-09.gif

so example of style definition as text :

.buttoncircle {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 50%;
}

.ptc-3DLabel {  
  	font-family: Century Gothic;
  	color: black;
  	--text-stroke-color: yellow;
  	--text-stroke-width: 3px; /*csslint ignore*/
  	font-weight: normal;
  	font-style: italic;
  	background-color: grey;
}

and then as class set to a class property e.g. here of the gridLayout widget:

2023-04-14_10-47-11.gif

add e.g. an label widget and test in preview:

2023-04-14_10-50-01.gif

I did not tested on mobile but it should work if not then please, let me know.

So according to the font - if it is some new created you need to check if generally it work on desktop on the mobile . I never used non standard font. But possibly you need to add it to a project folder and then refer to it via style variable 

$font-path References the relative directory where fonts are stored.

 

Thank you @RolandRaytchev for the quick reply.

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-1681465963371.png
For label I am using following css.

14.04.2023_15.27.39_REC.png

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

 

 

@Rocky_2021 , thanks for the feedback. If I understood correctly your feedback -you want the change the appearance of widget of Thingworx - on Thingworx mashup. What is the relation here to Vuforia Studio.? Is this mashup shown or called from Studio?. My answer was here  regarding the style setting in Vuforia Studio. If you want to change the style appearance / e.g. font etc. only in  Thingworx mashup (without any relation to Vuforia Studio) then possibly AR community is not the best forum to ask this question, because here the most reported  issues and questions are regarding to Vuforia Studio  Ok TWX is often used in Vuforia Studio but possibly in the Thingworx forums you will get better answer regarding TWX style customization. 

https://community.ptc.com/t5/ThingWorx-Developers/bd-p/twxdevs

 

Top Tags