Where to add style to this js?

[Chrisj]

This js has a (Proceed) button, I'd like to change it's color, but I don't know where the current color is.

It is in a pop-up box, and I don't see the styling on any page code, where it pops up from.

When I right-click and select inspect I see this:

<button type="button" class="swal2-confirm swal2-styled" aria-label="" style="background-color: rgb(48, 133, 214); border-left-color: rgb(48, 133, 214); border-right-color: rgb(48, 133, 214);">Proceed</button>

How can I find that?

Essentially, how can I style the "Proceed" button here:

function PT_BuyVideo(video_id) {
    if (!video_id) {
        return false;
    }

    swal({
        title: "",
        type: "info",
        html:"Simply proceed to purchase",
        showCancelButton: true,
        cancelButtonText: "Close",
        customClass: 'sweetalert-lg',
        confirmButtonText:'Proceed'
    }).then(function(){

any help is appreciated

 

[denno020]

Which colour are you trying to change? The `color`, which is the text colour, or the `background-color`?

I can see the background colour of the button is `background-color: rgb(48, 133, 214)`, which is added as an inline style, using the `style` attribute.

To overcome that, you're going to have to get more specific when writing your own style, and the only way to do that is to use `!important`:

.swal2-confirm {
  background-color: purple !important;
}

[Chrisj]

Thanks for your reply.

That worked successfully when I added it between style tags on the html page that launches the pop-up. Thanks.

You said "button is `background-color: rgb(48, 133, 214)`, which is added as an inline style", just for my own education, where would I find that inline line of code. I see it when I 'inspect' the element. How can I find it?

Edited March 29, 2019 by Chrisj

[gizmola]

Do a quick google next time and see if you can figure out what it is that you are actually using for components.    A quick google on the 'swal()' and I was able to determine that your site has integrated Sweetalert.js

That might be of benefit in the future.

With that said, since your immediate concern seemed to be the button itself, you provided the information in your original post:

<button type="button" class="swal2-confirm swal2-styled" aria-label="" style="background-color: rgb(48, 133, 214); border-left-color: rgb(48, 133, 214); border-right-color: rgb(48, 133, 214);">Proceed</button>

The 'style=' statement is what is referred to as an inline style, in that it's attached directly to the html element.  This isn't a great way to do things if you have a lot of buttons, because, of course, if you decide to change a number of buttons, you have to go into the styles for each and edit the html.  This seems like it's not the way to do things, since you already have 2 sweetalert classes to work with:  class="swal2-conform swal2-styled".

The way to handle that would in my opinion, be to remove the inline style, and change the things you want in the style sheet for Sweetalerts.

There is a good deal of documentation for this in the Sweetalert theming documentation.