Query Template - Placeholder Loading Container Color

Hi All. I am having an issue which bothers me a little bit.

Query Templates on pages with a dark background are showing containers with a white default placeholder while loading

On pages with a white background - the containers are grey. Is there a way to make them transparent? Thank you!

Hi @Alexander,

You may find this post by @Araminta useful:


Hi @StrangeTech I was reading through the linked solution. Unfortunately the instructions provided don’t make any sense to me. Would you mind explaining the instructions a little bit more in depth?

You can achieve this by creating a global class/adding to your stylesheet:

  • targeting the .cc-loading-skeleton
  • Adding the following Custom CSS:
    .globalclass {
    –base-color: #434343;
    –highlight-color: #3a3a3a;


  • Do I need to add a specific class to my Query Template (.globalclass)?

  • Since I have different Query Templates (different background colors), I assume that I need to target every Query Template individually?

  • Although it doesn’t work, does the CSS look something like this in order to target both classes?

.cc-loading-skeleton.globalclass {
-base-color: #801d1d;
-highlight-color: #a25252;

Thank you.

Hi @Alexander,

The good news is, it is a lot simpler than it may have seemed.

  1. Create a global class called cc-loading-skeleton
  2. Add the following code to the global class’s custom css input field in Advanced SCSS:
.globalclass {
  --base-color: red;
  --highlight-color: green;


  1. I used pretty garish colour combination - I don’t recommend it unless you are creating a site showing what colours not to use together :wink:
  2. You don’t need to add the global class to any block
  3. Make sure you copy the full code from the code block to ensure it works
1 Like

It depends on your design - if you use transparency on the colours, you can overlay them on any background.

If you need them to be opaque and you want a different colour in different situations, that will require more complex use of styles as you won’t be able to just set the styles globally.

1 Like

Thank you @StrangeTech for the detailed answers! I was able to make it work.

Using transparent colors make those loading boxes disappear completely - which is what I want.

For some reason this additional classes do mess up the grid in the back-end. No big deal, as long as the front-end looks correct.


[adding additional characters to be above 20 character limit]

1 Like

Not sure, but I have the feeling I am not really getting it. This is how it looks on my end. As mentioned above, it does work - except for the backend mess.

Yes, perfect - now you should be able to remove the cc-loading-skeleton class from the block, which should solve your issue with it looking messed up.

1 Like

Ohh great! The removing class part did the trick. Thanks a lot for your time!

1 Like