Query Template - Placeholder Loading Container Color

[Alexander]

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!

[StrangeTech]

Hi @Alexander,

You may find this post by @Araminta useful:

Custom color for Skeleton placeholder

Hi @Jonas, 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; } Please let me know if this helps!

[Alexander]

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

Questions:

• 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.

[StrangeTech]

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

Notes:

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

[StrangeTech]

@Alexander

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

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.

[Alexander]

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.

[StrangeTech]

@Alexander

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.

Remember:

@StrangeTech

You don’t need to add the global class to any block

[adding additional characters to be above 20 character limit]

[Alexander]

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.

[StrangeTech]

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.

[Alexander]

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