Jump to content

Where to add style to this js?


Chrisj

Recommended Posts

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

 

Link to comment
Share on other sites

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;
}

Link to comment
Share on other sites

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 by Chrisj
Link to comment
Share on other sites

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.

 

 

 

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.