Overlay colour

[lew-egr]

Hi, i’d like to change the color of the overlays used when AJAX updating items on the page, for instance updating items in the cart. It’s currently a light grey.

I see there is a ‘Color – Fullscreen overlays’ option in the customiser but this appears to have no effect on these areas.

Can you point out which CSS needs to be targetted?

Many thanks

[David Martin – Support]

Hi,

Could you clarify the overlay color you refer to? Not sure I am 100% following you on this.

Thanks,
David.

[lew-egr]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Hi,

Can you try to add the code below to the custom css option?

.woocommerce .processing {
    background-color: transparent!important;
}

-Rui

[David Martin – Support]

Hi,

The slideout cart loading overlay uses this CSS, here you can change the RGBA color values and the color opacity:

.shopping-bag .loading-overlay {
   background-color: rgba(0,0,0, 0.4)!important;
}

The actual cart page overlay is controlled via WooCommerce itself, this can be changed using:

.woocommerce .blockUI.blockOverlay {
   background-color: rgba(0,0,0, 0.4)!important;
}

[lew-egr]

Hi, that has no effect.

What controls this functionality – JqueryUI?

Thanks

[David Martin – Support]

@lew-egr – can you test the CSS I supplied above? That works for me locally.

[Rui Guerreiro – SUPPORT]

The overlay is already with a different color to me. don’t forget to clear the browser cache.

Where are you adding the custom css? It should be in this field.
https://www.dropbox.com/s/prukpcb03amvl62/Screenshot%202017-04-26%2014.21.17.png?dl=0

-Rui

[lew-egr]

Sorry David, i only saw Rui’s reply.

.woocommerce .blockUI.blockOverlay {
background-color: rgba(0,0,0, 0.4)!important;
}

was the answer i was looking for!

Both of you, thanks for your help!

[David Martin – Support]

Glad to help you out!

Thanks,
David