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

CSS Widget Configurator/Generator

Level 7

CSS Widget Configurator/Generator

Hi everyone,

 

Maybe you got my email, I just wanted to post this also here.

 

I built a CSS generator for a few widgets, 8 at the moment. This is on a cloud instance accessible by anyone.

 

Advantages:

     - don't have to style buttons and apply style definitions over and over again

     - greater flexibility in styling the widget

     - you don't have to write any CSS code

 

The way this works: you use the configurator to style the widget as you want. Use also a class to define what that widget is, or how it's styled. For example "primary-btn", "secondary-btn", etc. Copy the generated CSS code into the CustomCSS tab in ThingWorx and on the widget, put the CustomClass specified in the configurator.

 

As a best practice, I'd recommend placing all your CSS code into the Master mashup. And then all your mashups that use that master will also get the CustomCSS. So the only thing you have to do to your widgets in the mashups, is fill the CustomClass property with the desired generated style.

Also, comment your differently styled widgets by separating them with /* My red button */ for example.

 

The mashups for this won't be released, this will only be offered as a service. As you'll see in the configurator, they are not that pretty, the main goal was functionality.

 

Here is the link to the configurator:

https://pp-18121912279c.portal.ptc.io/Thingworx/Runtime/index.html#master=CSSMaster&mashup=ButtonVar...

User: guest

Password: guest123123

 

Give it a go and have fun! :)

 

NOTE: I will add more widgets to this in the future and will not take any requests in making it for a specific widget, I make these based on usage and styling capabilities.

 

 

2 REPLIES 2

Re: CSS Widget Configurator/Generator

Hi  gbucur,

Looks Good and Cool..

Can i have any example source code ?

 

Thanks & Regards

Sugumar R

Highlighted

Re: CSS Widget Configurator/Generator

The mashups are not for sharing. They are no used to anyone. I'm just appending to a div a <style> tag with the CSS in it and also outputting all that in a custom code viewer widget. If I share that, people will want me to explain how all that works and I don't have time for it.

 

It's only served as a service.