How to add custom CSS for newly added class in widget properties

[PG_10250187]

Hi,

I need to add custom CSS for the class I added in widget properties.

Note: Before PTCS-CHART-LEGEND the class is displayed (saw it in inspection tool). Please reply ASAP.

Below is the snippet: Where to add the custom class name (clschart)

@supports (ptcs-style-unit: "PTCS-CHART-LEGEND"){
       [part=item][legend=L1] [part~=marker]{
        border-top: 5px dashed red;
        background-color: #fff !important;
    }
}

[VR_10133499]

Hi ,

Your question is unclear whether you want to know how to create a CSS class or you want to know how to add CSS class to a widget.

From your CSS code it looks like you want to modify how legends are displayed in your chart, this should be easy by using style theme. Or there should be properties under the style properties that can be directly modified to achieve the same task.

[SV_10230677]

I need clarification on how to use custom class in @supports css selector ??

[SV_10230677]

That is add a custom class and add it to the below stylesheet

@supports (ptcs-style-unit: "PTCS-CHART-LEGEND"){
       [part=item][legend=L1] [part~=marker]{
        border-top: 5px dashed red;
        background-color: #fff !important;
    }
}

[SV_10230677]

Consider that am using a custom class "myClass" and integrating it with the style as below,

.myClass @supports (ptcs-style-unit: "PTCS-CHART-LEGEND"){
       [part=item][legend=L1] [part~=marker]{
        border-top: 5px dashed red;
        background-color: #fff !important;
    }
}

The above snippet throws an error.

What would be the right way to add a custom class to a @support style ??

[slangley]

Hi @PG_10250187.

Can you provide more details of your custom widget?  What is widget designed for?  What are you trying to change?  Screenshots may be helpful.

Regards.

--Sharon