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

Community Tip - You can change your system assigned username to something more personal in your community settings. X

Change all label styles in a mashup

jonasf
10-Marble

Change all label styles in a mashup

Hello,

 

I am currently developing a mashup with 100+ labels and would like to quicly change their styles (font size and color) all at the same time. Is this possible without going into each label and picking the new style manually?

 

1 ACCEPTED SOLUTION

Accepted Solutions
ailko
5-Regular Member
(To:jonasf)

Hi,

 

If you wish to make global CSS changes your CSS definitions should be created on the highest level possible, typically these are applied to a Master Mashup that contains all of the sub mashups and thus the widgets you are trying to edit.

 

One thing to note is depending on what version of ThingWorx you are running, the widgets and HTML structure differs on what class you actually need to edit. Typically how I locate what classes need to be edited is I use Chrome Developer Tools while my mashups are being previewed, you can dynamically adjust the styling and see real time feedback of your edits, and this assists in locating what exact out of the box CSS class you need to override.

Capture.PNG

View solution in original post

7 REPLIES 7
raluca_edu
17-Peridot
(To:jonasf)

Hi,

 

You can do that with custom CSS or with Theme (set for your mashup) like in the screenshot below:

 
 

label_theme.png

 

Best regards,

Raluca Edu

Hello, I tried defining a custom class and adding css to the mashup without any luck, can you please provide some more elaborate assistance in this matter?

 

.myLabelClass .widget-label {
Label: "DefaultMashupStyle";
}

ailko
5-Regular Member
(To:jonasf)

Hi,

 

If you wish to make global CSS changes your CSS definitions should be created on the highest level possible, typically these are applied to a Master Mashup that contains all of the sub mashups and thus the widgets you are trying to edit.

 

One thing to note is depending on what version of ThingWorx you are running, the widgets and HTML structure differs on what class you actually need to edit. Typically how I locate what classes need to be edited is I use Chrome Developer Tools while my mashups are being previewed, you can dynamically adjust the styling and see real time feedback of your edits, and this assists in locating what exact out of the box CSS class you need to override.

Capture.PNG

...or just export your mashup(s) as XML, do find-and-replace, then import.

 

/ Constantine

Hi again, This could be a solution, but with the option of custom-css I do not see it as best practice for this type of development.

slangley
23-Emerald II
(To:jonasf)

Hi @jonasf.

 

Did you follow the instructions in the post from @aliko?  If you're getting stuck somewhere, please provide the details and we will try to assist.

 

Regards.

 

--Sharon

jonasf
10-Marble
(To:jonasf)

I have not been able to solve this yet. It should be a simple css solution of updating the style for all labels present in the mashup. Any input is appreciated.

Top Tags