Skip to main content
G
gbucur5-Regular Member
5-Regular Member
February 13, 2019

CSS Widget Configurator/Generator

  • February 13, 2019
  • 4 replies
  • 8896 views

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=ButtonVariables

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.

 

 

    4 replies

    S
    Sugumar_56561-Visitor
    1-Visitor
    March 12, 2019

    Hi  gbucur,

    Looks Good and Cool..

    Can i have any example source code ?

     

    Thanks & Regards

    Sugumar R

    G
    gbucur5-Regular MemberAuthor
    5-Regular Member
    March 12, 2019

    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.

      S
      seanccc17-Peridot
      17-Peridot
      May 8, 2019

      Looks very great ! 

      Do you plan to add Chart widgets as well ?   That's would be very helpful. 

       

      Best regards,

      Sean

      G
      gbucur5-Regular MemberAuthor
      5-Regular Member
      May 8, 2019
      Hi Sean,
      Charts are svg based and hard to modify due to the many ways they can display data which can modify the DOM of the svg.
      B
      BhavyaPC1-Visitor
      1-Visitor
      July 24, 2019

      @gbucur 

       

      Thank you for sharing this CSS code. It's very helpful for me to understand custom css. 

      I tried implementing css on value display widget ("font-family")but no changes were reflected, where as they were easily applied to widgets such as label and text box. 

      Kindly let me know, way to apply css to a value display and date widget

      G
      gbucur5-Regular MemberAuthor
      5-Regular Member
      July 24, 2019

      Hi there,

       

      As you can see, the DOM(see attachment) for the value-display is a bit more complicated because it can render in so many ways.

      in this case myValueDisplay is my customClass, the purple classes and tags are the path to the div you have to style in order for your CSS properties to be applied. Your target div.class is renderer-true-default it's where your text resides.

       

      So it goes a bit like this:

      .myValueDisplay > .widget-content > .valuedisplay-wrapper > tbody > tr > .valuedisplay-text > .valuedisplay-block > .valuedisplay-container > .renderer-true-default {
 font-family: Arial, sans-serif !important;
}

      or the short way, but I don't usually do it like this because it takes the browser just a bit more time to render, and by doing lots of these, it's a bit more optimized.

      .myValueDisplay .renderer-true-default {
font-family: Arial, sans-serif !important;
}

      the > sign is to target the next child within the DOM structure, and not go deeper to find that class, so I basically follow the path in the tree.

      I would advise watching some CSS training courses on youtube or some other platform. What my tool generates, is just basic CSS stuff, which can be written by anyone who has some CSS knowledge. The only thing this is useful for, is to cut some development time.

       

        S
        sbt15-Moonstone
        15-Moonstone
        July 12, 2021

        Is this applicable for Twx 9.2, Bcoz when i copy the css generated directly to the custom css tab it didnt work.

        Eg: button. Tried replacing for button with .widget-button (generated) -> .widget-ptcsbutton 

        Is it something i have to do in specific for 9.x??

        Terms & ConditionsCookie settingsAccessibility statement