Unable to apply custom CSS to confirmation box

[Janakiraman-P]

Hi,

I want to add custom CSS to the confirmation box action and cancel buttons. I tried applying with unique id and part attribute, not getting applied.

Any suggestions?

Thanks,

Janakiraman P

[tdixit]

Hi @Janakiraman-P 

Could you possibly share a screenshot where you want to apply the CSS

Regards,

Toolika Dixit

[Janakiraman-P]

 Hi @tdixit ,

thanks.

I want to apply custom css on this confirmation box popup.

Could you please tell how to apply CSS to the buttons?

--

Janakiraman P

[tdixit]

Hi @Janakiraman-P 

Your use case is not clear what type of changes you need to see on your buttons with custom CSS.

But, here is an example of how a custom css can be applied on buttons

Custom CSS for button

• .widget-ptcsbutton::part(root){
    padding:0px !important;
  }

• /* Button*/
  .widget-ptcsbutton::part(label) {
  font-family:'Roboto','Noto Sans CJK', sans-serif;
  font-weight:normal;
  }

[Janakiraman-P]

Hi @tdixit ,

Use case is to apply custom CSS on confirmation pop up.

In detail,

1) I hope you knew that we have confirmation pop up available under Function tab,

In that I created one confirmation with an Action and cancel buttons.

2) Here, for action button type, the default available button types are Primary  and Danger which comes with default color applied as Blue and Red respectively.

3) In my use case, I want to apply custom CSS to those action buttons.

e.g Action button color to Green and font-family to Ariel 

Please tell me how to do that?

---

Janakiraman P

[cmorfin]

Hi @Janakiraman-P 

I don't know about the CSS but what about using the  Style Theme ?

That would allow to apply different style depending if the button is active or not. If that is suitable this would be much easier to work with, I would think, and would be compatible with newer version which css is not guaranteed.

See Help Center

Thanks

Christophe

[Janakiraman-P]

Hi @cmorfin ,

Thanks.

I believe, you might have tried to apply style theme on confirmation pop up. Please guide me, am stuck in that.

I created a style theme with necessary styles and applied to the button which triggers confirmation. However, the created styles  have been applied to rest of the other button widgets as well, in the mashup. That shouldn't happen. 

Is there a possible way to apply style theme only to the confirmation pop up?

--

Janakiraman P

[cmorfin · Accepted solution]

Hi @Janakiraman-P 

The Style Theme does apply to the whole mashup, so if you have other buttons elsewhere in the Mashup, then they will also inherit this style.

There are a few options though:

- the Confirmation popup uses the Primary and Danger button type, so you can apply a different button type to the other buttons in the mashup and set a different style.

- You can also apply a specific style in Style Properties of the other button to override the Style Theme

Hope this helps

Kind regards

Christophe