Dynamic data in Element’s Customize > Elements CSS

[ddoligalski]

I am trying to use dynamic content in an Element CSS, but it is not rendering correctly.

(If I drop the same dynamic call in the associated text element content, it comes through great.)

I note a prior forum post with the same problem from June 2022, where you said that dynamic content is not yet working in Element CSS. Is this still the case??

[tristup]

Hi @ddoligalski,

Thanks for reaching out.
The Dynamic Content can be used in the Element CSS as shown in the given screenshot.

If it is still not working, there might be something else as a reason behind it, and we need to investigate it further. I would suggest you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[ddoligalski]

Hi!

I am still having issues with this. Here’s what I am trying to accomplish:

This is for a website of poetry. Poetry is difficult to work with on a website due to its often-odd formatting, on a per-poem basis. In most cases, websites encapsulate the poem in <pre> tags, and add  s to move things over. Really ugly, especially in mobile.

So my approach: I defined a custom post type ‘poem’. In it I am including the poem as the main content, using an html block. I have a custom field poem_css which is to contain the needed css to apply to the rendered poem html.

In Cornerstone, I have a single layout ‘Poem’ which includes a text field for the poem content, and in its Element CSS I have {{ post.meta({"key":"poem_css"}) }} to bring in the CSS. My problem here is that the CSS doesn’t appear to be pulled in and applied. The same CSS works if I add it to a regular CSS sheet, but I love the idea of encapsulating it in the post.

(Currently I have the same post.meta in the text field as well to see it rendering.)

This is different from your example in that the entire CSS payload is coming from the custom post field rather than CSS atoms. Not sure if that’s the problem, or something else.

I have one poem defined with this approach, here: https://davidd937.sg-host.com/poem/a-night-in-alaska/

The format should look like it is currently rendered here: https://thebluebirdword.com/a-night-in-alaska-by-ellen-skilton/

Thoughts?

I will attach creds.

-Dave

[tristup]

Hi @ddoligalski,

I have checked your meta value and found that the class with the style has been added. You need to add only the value and then pull it like the following.

$el .rightcol { margin-left: {{ post.meta({"key":"poem_css"}) }} }

NOTE: the added values are stored in the global variables which can’t store multiline, multiple values. If you want to add multiple values, you can add multiple meta fields for each values and pull it as shown.

Hope it helps.
Thanks

[ddoligalski]

@tristup

NOTE: the added values are stored in the global variables which can’t store multiline, multiple values. If you want to add multiple values, you can add multiple meta fields for each values and pull it as shown.

Ah, that’s precisely what I am looking for. The problem with individual values is that each poem has it’s completely different set of CSS properties.

I’d suggest to your dev team to allow for this… it would be great to allow both the content and the CSS styling for it to be in a post. (Or, even better if I am dreaming… allow a full cornerstone block with formatting to reside in a post’s field.)

Meanwhile, I will make do with a more complex style sheet holding all the different stylings for each poem.

Thanks anyway!!

-Dave

[tristup]

Hi Dave,

I will check with our development team regarding this, and if possible, we’ll add it as a feature request so it can be considered for a future update.

Thanks