Parameters in CSS

Hey,

I must be a total idiot for not getting this but I just can’t get my parameters to work in Global CSS. Using the blank stack I’ve created some global parameters to control some stack settings.

What is the correct way to output the value of a parameter in CSS? Nothing I do seems to work.

.class { width: {{dc:p:layoutDesign.siteWidth}}; } for example doesn’t work.

I think you might be experiencing the bug where a global parameter needs to be set before being used. So in your control if you change the parameter to something else, then back to your wanted value, it should output correctly. Let me know if that helps, this one slipped by me I’ll most likely have time to finish the bugfix next week. Have a great weekend!

Yes there’s definitely something funky going on there with entering values and them not properly coming through. Glad to know it’s not just me :sweat_smile:

One more thing I noticed is that when I apply my own parameters to .container.width and .x-container.max to control global site width, my values never get applied at all. I think they are being overridden by theme CSS.

You might be having another issue, I didn’t see any placement of the css issues. Right now I need to use isVar to get your example to work properly. Or using dc:g as your prefix. Does using {{dc:g:layoutDesign.siteWidth}} fix the issue? If you don’t use dynamic content the css works right?

I’ve checked and this is what I’ve found:

isVar is set to true, dc:p doesn’t work and outputs undefined CSS variables like --global-0, --global-1, etc. Using dc:g does work and correctly applies the values. Manually entering the values without dynamic content also works.

Edit: when I apply something like a color it works with either dc:p or dc:g, strange.