-
I’ve been struggling to figure out why my local library has a blue background color even though I cannot find any block in the entire pattern that has its background color set to blue. It’s showing blue on the editor and in the front-end, yet no block has blue specified anywhere! Nor is there any CSS I can find the customizer that specifies a blue background color.
Here is a link to the screenshot: https://postimg.cc/s1cy3Hwc
The URL can be found in the private details.
Thank you for any help!
— Aaron
-
Hi Aaron,
The site requires a username and password to access it. Could you provide those so I can take a look?
-
Sorry, the private information is updated.
-
Are you referring to the blue background in this section?
-
Yes.
-
Hello,
The .gb-element-99460fb4 container that is below the loop item container seems to have a global color of bg-cards. Have you checked this container block?
-
Hi,
Can you try clearing the cache? If that doesn’t work could you please provide site credentials so we could have a look for you? Please use the private section of your reply to post them. You can also install the Temporary Login Without Password plugin and send us a login link without using a password. Again, please, use the private area of your reply to send those details.
-
Clearing cache has no effect. I’ve placed credentials in the private details. Thanks.
— Aaron
-
Hello,
I can see the background color being applied to the underlying pattern. You can remove that color.
-
That screenshot is from the wrong pattern. You’re looking at the “Cards – Blue” pattern (which is supposed to be blue). The issue I’m having is with the “Cards – Gold pattern..
-
Ok, thanks for the correction.
I have a feeling that the
[am_card_label]shortcode creates a dark background color that covers the link area, that’s why you still see the blue background color in there. How is that shortcode being generated? -
I checked, and that shortcode is creating a
<div>with the “FREE” or “MEMBERS” text and the classam-card-label-regularoram-card-label-premium. Those style definitions are below and do include a background color, but it only applies to the “FREE” and “MEMBERS” label. When I remove that CSS entirely, the blue background is still there..am-card-label-regular { position: absolute; top: 10px; right: 10px; border: 1px solid var(--contrast-3); padding: 4px 6px; background-color: rgb(0,0,0,0.75); color: var(--accent-2-tags-text); } .am-card-label-premium { position: absolute; top: 10px; right: 10px; border: 1px solid var(--accent-1-labels-borders); padding: 4px 6px; background-color: rgb(0,0,0,0.75); color: var(--accent-1-primary); } -
The issue was caused by the Cards – Blue and Cards – Gold patterns sharing the same unique block ID:
.gb-element-99460fb4.Since the Cards – Blue pattern appears first above the fold, its styles are loaded first and end up affecting the Cards – Gold pattern as well because they share the same block ID.
I duplicated the Cards – Gold pattern and removed the original, allowing GB to generate a new unique block ID. That resolved the issue.
-
Excellent, thanks. It must have happened during the copy/paste of creating the second, mostly-identical pattern.
-
No problem!
- You must be logged in to reply to this topic.