How to style spModal buttons?

Flavio7
Kilo Contributor

Hi, I have a particular Catalog item
(dev.service-now.com/sp?id=global_sc_item_details&sys_id=47aeb6254f8dee4064c83c728110c7a9&clv=lock)

which requires confirmation before submission.
I've done a Client Script onSubmit to open a modal window and ask for Confirmation:

function onSubmit() {

    var hasUserConfirmedAgreement = g_form.getBooleanValue("hasUserConfirmedAgreement");
    var modalContent = g_form.getValue("modalMessage");
    var primaryLabel = getMessage("Agree");
    var cancelLabel = getMessage("Cancel");

    if (!hasUserConfirmedAgreement && g_form.getValue("u_eus_sr_priviledge_action") == "NEW") {
        if (typeof spModal != 'undefined') {
            spModal.open({
                    message: modalContent,
                    title: 'Responsability Agreement',
                    footerStyle: {},
                    size: "lg",
                    buttons: [{
                            label: cancelLabel,
                            cancel: true
                        },
                        {
                            label: primaryLabel,
                            primary: true
                        }
                    ]
                }

            ).then(function(confirmed) {

                g_form.setValue("hasUserConfirmedAgreement", confirmed);
                if (confirmed) g_form.submit();
            });
        }
        return false;
    } else {
        return true;
    }



}

Is there some way to apply specific CSS to those buttons?
May I define some class for them?
They got the standard sp-bootstrap properties...

Thank you!

1 ACCEPTED SOLUTION

Pranav Bhagat
Kilo Sage

Add the code in your CSS of the page like this

div.card-block > p {
    /* your css ... */
}

You have to dig into the class.

example

find_real_file.png

 If you want style the button do

div > button >.btn{

  /* your css ... */

}

Regards

Pranav

View solution in original post

3 REPLIES 3

Pranav Bhagat
Kilo Sage

Add the code in your CSS of the page like this

div.card-block > p {
    /* your css ... */
}

You have to dig into the class.

example

find_real_file.png

 If you want style the button do

div > button >.btn{

  /* your css ... */

}

Regards

Pranav

Flavio7
Kilo Contributor

Made my day! 🙂 thank you

Ur Welcome 

 

Here's another example

find_real_file.png