I have noticed the addition of the Global Parameters options via the dev toolkit, which I think came in a few versions ago, and as far as I could find from looking at the codebase, they should work in much the same way as regular element parameters, and are accessed using the Dynamic Content code format of {{dc:g:__key__}} but that doesn’t seem to work for me. Am I doing something wrong, or is this a beta / in development feature that isn’t wired up yet?
So it’s partial a development feature / hidden feature. I was adding in a keybinding for opening the element parameters when I added the current Global Parameters. I guess this has been around since all of 6 so I left it in the key binding.
You’ll use the same Dynamic Content as parameters though. So instead of g it’s p. I have only done a few tests, but it worked fine using them in Global CSS. Let me know if there are any instances where it doesn’t work right.
Hi Charlie,
Fantastic, yes I can see it working now.
Where I was trying it out was actually in the global theme options section, specifically to set the site width and site max width using the global parameters options, to then be able to do some advanced things with grid layouts across the site and be able to update the site width easily and globally later down the line.
I’ve tried now to set up variables in the Global CSS to then pull into the theme options, but it looks like there’s some different processing of those options going on so it isn’t working.
Potentially quite a niche use-case, and i guess might also be covered by the upcoming stack changes, but I though I’d detail the experiments a bit in case a solution could be worked into Pro.
Thanks!
Great! So internally it creates variable so doing something like var({{dc:p:theme_color}}) isn’t needed and might even cause issues. It does that to change the actual variable it creates by the breakpoint values. If I followed correctly I think that’s what you’re doing? Send me a screenshot too that’d help me see what you’d like to do with Theme Parameters.
What I’m trying to achieve is a having the site width be a global parameter that can then be used in calculations for creating grid layouts and columns, though this approach definitely has other benefits.
Here’s how I’ve got it set up at the moment:
As you can see, I have set the global parameter Site Width to 50%, which is correctly being pulled in to the --global-site-width CSS variable. If I then try to set the site width theme option to calc( var( --global-site-width ) ) it adds the % afterwards, which invalidates the property and defaults back to the styles for any base .x-row element of auto.
This is what I have put in the theme option for Site Width:
This gets output in the html / css as:
Notice the added %
Which if we replace the var with the computed value of 50% then it is invalid CSS:
A similar situation arises with the Site Max Width option, except it appears to force-add a px to the end of the value, regardless of what is in there, which invalidates any custom variable or parameter being put in.
This strikes me as a minor bug in the processing of the theme options fields here, which seem to be storing the value separate from the unit, then adding % or px in output on top of whatever was in the field.
Hope this makes sense and sheds some light on what was occuring
Cheers
2 Likes
So I don’t think you need a percentage sign after the calc statement is the real issue. I do have another request for a unit-less slider for parameters so It’s definitely on our mind and a useful feature. Doing something similar to the screenshot worked for me. It didn’t need the + 50px part, but I just wanted to demonstrate the calc func.
The syntax linting errors around DC and CSS variable stuff will be fixed in 6.3 too. Little annoying to see the red dots everywhere.
2 Likes
Yes, the % sign after the calc is causing the issue, however in the case of the site width theme option, I am not adding the % sign in, it is being added by extra processing in the theme files.
I have managed to find the culprit: in the file pro/framework/functions/frontend/generated-css/variables.php, on lines 22 and 23 (as well as throughout this file for other theme options), the x_layout_site_width option is being coerced into %, and the x_layout_site_max_width is being coerced to px. This seems to add the % on the end of whatever the theme option is actually set to, which is adding the % outside of the calc().
I realise this is pretty old and core functionality within the Pro ecosystem, so changes may well be too tricky to implement and keep backwards compatible. The solution I can think of now would be to use the global parameters in a bit of global css overwriting the x_layout_site_width option with the global param one.
If it is fixable, especially within the new blank or base stacks being developed for one of the upcoming major versions, then I would think enabling the use of dynamic content throughout the theme options panel (as I can see in the variables.php file there are many other values that are being coerced into specific units) would be valuable.
Alternatively, could these theme options be accessible via dynamic content in a format such as: {{dc:option:site-width}} or {{dc:option:body-font-sze}} etc. etc?
Just some thoughts on the niche issue I came across!
Cheers again,
Okay I gotcha. So when using the two new stacks, none of that generated-css is going to be used so you won’t have to worry about that overwriting your own styles. The baseline will just be the default element styles and container styles similar to Cornerstone Standalone. And if you are using the starter stack it has a Typography and Layout section similar to the current stacks, but it’s setup where anyone could create a new stack controls via parameters or through a PHP filter.
Yes, the theme-options will be easily accessible through Dynamic Content, I’ve named {{dc:theme:x_body_etc}}, but I might alias to option as well.
Thanks for trying this out, feel free to send more things my way!
2 Likes
Thats amazing! Can’t wait to get my hands on this new functionality. The blank stacks especially will be awesome to play with, and I love that the addition of :theme: or :option: Dynamic Content is already on the cards.
Great stuff!
1 Like