Styling the “Processing …” Overlay

  • Resolved tomsynomsy

    (@tomsynomsy)


    7 years, 8 months ago

    Hi,

    First of all: great plugin and thanks for creating it in the first place!!!

    I just updated to the latest version and noticed the “Processing …” overlay which is great as previously the users didn’t know what was going on until the forward to the success page.

    However the styling on my page seems to be a little off (see screenshot at the end) and I would like to show the overlay centered and with a half-transparent gray background over the regular website content.

    How can I best achieve this? I didn’t find anything to configure it in the backend of the plugin.

    thanks,
    Tom

    Screenshot:
    https://www.dropbox.com/s/64d8u4ssg5s21re/Screen%20Shot%202017-07-05%20at%2012.24.43%20PM.png

    • This topic was modified 7 years, 8 months ago by tomsynomsy.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Nicolas Figueira

    (@nahuelmahe)

    Hello @tomsynomsy,

    Thank you for using Direct Stripe and for your kind words.

    I know the loading animation looks terrible! I really have to apply better default styles.

    It is possible to completely edit it via a filter hook, you will find documentation at https://newo.me/change-direct-stripe-ajax-spinner-via-filter-hook/

    And if you’re not familiar with hooks maybe style it with custom CSS.

    For example you can open the “Appearance -> Customize -> Additional CSS” and paste this code :

    
#loadingDS {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(0,0,0,0.5);
    left: 0;
    text-align: center;
    color: #fff;
}
.loadingDS, #loadingDS img {
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) translateY(50%);
    font-size: 5em;
    display: block;
    color: #fff;
}

    Let me know how it goes!

    Best regards,

    Thread Starter tomsynomsy

    (@tomsynomsy)

    Thanks for the prompt help, Nicolas!

    I’ll give it a try and let you know how it goes.

    All the best from Spain!
    Tom

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Styling the “Processing …” Overlay’ is closed to new replies.