ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Nota
• April 26, 2017 at 12:37 pm #322399
  lew-egr

  Member

  Post count: 15

  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

  April 26, 2017 at 1:00 pm #322404
  David Martin – Support

  Moderator

  Post count: 20834

  Hi,

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

  Thanks,
  David.

  April 26, 2017 at 1:39 pm #322421
  lew-egr

  Member

  Post count: 15

  This reply has been marked as private.
  April 26, 2017 at 1:43 pm #322424
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Hi,

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

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

  -Rui

  April 26, 2017 at 2:12 pm #322427
  David Martin – Support

  Moderator

  Post count: 20834

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

  April 26, 2017 at 2:13 pm #322428
  lew-egr

  Member

  Post count: 15

  Hi, that has no effect.

  What controls this functionality – JqueryUI?

  Thanks

  April 26, 2017 at 2:16 pm #322430
  David Martin – Support

  Moderator

  Post count: 20834

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

  April 26, 2017 at 2:21 pm #322432
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  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

  April 26, 2017 at 2:28 pm #322436
  lew-egr

  Member

  Post count: 15

  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!

  April 26, 2017 at 2:34 pm #322437
  David Martin – Support

  Moderator

  Post count: 20834

  Glad to help you out!

  Thanks,
  David

• Back to forum

  Posted in: Nota