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

Unable to apply custom CSS to confirmation box

Janakiraman-P
14-Alexandrite

Unable to apply custom CSS to confirmation box

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

7 REPLIES 7
tdixit
13-Aquamarine
(To:Janakiraman-P)

Hi @Janakiraman-P 

 

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

 

Regards,

Toolika Dixit

Janakiraman-P
14-Alexandrite
(To:tdixit)

 Hi @tdixit ,

 

thanks.

 

Janakiraman-P_0-1620102906413.png

 

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
13-Aquamarine
(To:Janakiraman-P)

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
14-Alexandrite
(To:tdixit)

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,

Janakiraman-P_0-1620138674480.png

 

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

Janakiraman-P_1-1620138819464.png

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.

Janakiraman-P_2-1620138984510.png

 

 

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

 

 

 

 

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
14-Alexandrite
(To:cmorfin)

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

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

 

 

Announcements