Title: Styling the “Processing …” Overlay
Last modified: July 5, 2017

---

# Styling the “Processing …” Overlay

 *  Resolved [tomsynomsy](https://wordpress.org/support/users/tomsynomsy/)
 * (@tomsynomsy)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/styling-the-processing-overlay/)
 * 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](https://www.dropbox.com/s/64d8u4ssg5s21re/Screen%20Shot%202017-07-05%20at%2012.24.43%20PM.png)
    -  This topic was modified 8 years, 11 months ago by [tomsynomsy](https://wordpress.org/support/users/tomsynomsy/).

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Author [Nicolas Figueira](https://wordpress.org/support/users/nahuelmahe/)
 * (@nahuelmahe)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/styling-the-processing-overlay/#post-9295052)
 * Hello [@tomsynomsy](https://wordpress.org/support/users/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/](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](https://wordpress.org/support/users/tomsynomsy/)
 * (@tomsynomsy)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/styling-the-processing-overlay/#post-9295110)
 * 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.

 * ![](https://s.w.org/plugins/geopattern-icon/direct-stripe_7787ff.svg)
 * [Direct Stripe](https://wordpress.org/plugins/direct-stripe/)
 * [Support Threads](https://wordpress.org/support/plugin/direct-stripe/)
 * [Active Topics](https://wordpress.org/support/plugin/direct-stripe/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/direct-stripe/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/direct-stripe/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [tomsynomsy](https://wordpress.org/support/users/tomsynomsy/)
 * Last activity: [8 years, 10 months ago](https://wordpress.org/support/topic/styling-the-processing-overlay/#post-9295110)
 * Status: resolved