Skip to main content
7-Bedrock
November 21, 2023
Solved

Tab font size issue in thingworx 9.4

  • November 21, 2023
  • 1 reply
  • 1693 views

AC_10460579_0-1700574228317.png

On updating the thingworx version from 9.1 to 9.4 the font size of the tab title is changed. how to fix this issue ?

Best answer by VladimirRosu_116627

The CSS approach mentioned below is what we used to do in the past many times, but as powerful as it is, it will lead to increased upgrade times, especially if you rely on it excessively.

The way to proceed in this situation is to use Style Themes (they work with Tabs, but not in an obvious way).

1. Create a custom Style Theme (eg: duplicate the PTC Convergence Theme)

2. In the Custom theme, modify the Global > Text > Large Title. This is the one applied to the Tabs (the tab headers)

3. Now go to all your mashups and set the new Theme as the Style Theme for that Mashup, like this:

VladimirRosu_1-1700641568917.png

 

You'll now have a future-proof way of changing the style across all your mashups from a single place. Hint: you also have a CustomCSS section in the Style Theme, so in case you really need to use CSS now, you no longer need to spread your CSS across multiple mashups, or resort to store it in a Master Mashup etc.

The biggest advantage of this approach is the fact that it will no longer impact the upgrades from an UI perspective, Style Theme styles being guaranteed to apply to widgets across versions (as opposite to CSS, since the internal structure can change)

1 reply

16-Pearl
November 22, 2023

Hi @AC_10460579 ,

 

Have you tried to change Font Size in Tabs > Style Properties > Base,Disabled,Hover,Pressed,Selected,Hover&Selected > Tab Label > Font-Size?

 

Arun_C_1-1700636717951.png

 

Thanks & Regards,

Arun C

 

7-Bedrock
November 22, 2023

Yes, I have tried this approach. However, in my project, there are a lot of screens where I'm using a tab widget. So, I'm looking for an approach that can make changes across the entire application in one go.

16-Pearl
November 22, 2023

Hi @AC_10460579 ,

 

I'm not sure, whether we can able to achieve this in 'StyleTheme For Tab Widget'. But you can try to include this below CSS in your master/mashup, it may solve your problem globally.

 

.widget-ptcstabset::part(tabs-tab-label) 
{ 
 font-size: 14px !important;
}

 

 Thanks & Regards,

Arun C