Element CSS Context Scope

[Sheri17]

I have a button that I must set the background color of using CSS rather than in the builder settings. This is required for an effect to work.

I’m setting the color using {{dc:}} syntax to grab a meta value where the color for the category is defined.

It uses the color as expected when I put my {{dc:}} parameter into various color fields on the builder settings. Each button gets the color for its category.

The problem occurs when I put it in the element CSS on an archive layout. Instead of the CSS displaying the color associated with the button category, it’s using the color associated with the archive page itself. Where the CSS comes into play, all buttons are the same color as the color defined for the archive category instead of their own colors.

This is happening even though the button is inside a looper provider that should be limiting the scope of the possible values.

Should {{dc:}} values in the button element CSS return the value for the button, which is what I’d expect, or should it return a value as if it is just part of the page/layout itself, which is what is happening?

If element CSS scope isn’t limited to the element but rather to the page or layout, I can see this causing unexpected results whenever someone uses {{dc:}} parameters in their element CSS.

The parameter I’m using for all this is from an ACF field and it’s {{dc:term:meta key=“category_color”}}

[ruenel]

Hello Sheri,

Thanks for writing in!

The {{dc:term:meta key="category_color"}} dynamic content will display the Term Meta. If you have attached the color as a post meta, you should be using {{dc:post:meta key="category_color"}} instead.

We would love to check your settings if we can have access to it. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​

To know how to create a secure note, please check this out: How The Forum Works

Regards.

[Sheri17]

It is term meta. I have hundreds of posts and rather than assigning each one a color, which is what I thought I was going to have to do, I assign my colors at the category level. I assign several values that are global within a category, at the category level. It’s been quite wonderful and makes a few things much easier.

These term meta color assignments work everywhere. It’s even working in the CSS, just not the way I’d expect.

In my element CSS for my buttons, when they appear on an archive page, the css outputs the color for the archive page category, rather than the one for the button category. It’s definitely a scope issue.

Each button is a looper consumer within an All Categories provider. All the buttons are in their different category colors because the term meta setting is working properly in the builder, but the css effect, which should also be different colors, is using the one archive page color for all of them.

The site I’m developing is still on my local server so you can’t log in, but if you have a way for me to, I can output the page template and send you the .tco file.

[christian]

Hey Sheri,

We need to check your exact setup and not just the template. Please copy your site to an online test server and give us the information my colleague asked for.

Thanks.

[Sheri17]

Unfortunately I can’t do that right now. I’m working against a deadline. I changed my design to work around the issue for now. When I move the site to the server I’ll let you know and reference this question. We can look into it then.

[ruenel]

Okay then, please let us know when you have moved it to the testing server already.
Thanks.