Dynamic CSS and workflow

[jstovallcollaborative]

Hi there,

Ok, so I’m definitely missing something with the element CSS setup. Let me explain and maybe you can point me towards the right documentation?

In previous version of X/Cornerstone, we would establish our page templates (home, inner, contact, whatever else), and, as needed, duplicate those. That meant targeting most of the page elements via CSS was possible, as we’re duplicating the same pages and so can make sitewide changes. In fact, we’d often do the basic content implementation with the page builder, and then put the finish on everything (tweak colors, fonts, space, etc) via CSS in the customizer.

With the new version, this is obviously different. I’m struggling to figure out how to achieve the same efficiency, and the $el dynamic element is throwing me. For example, on my current project, I just want to make all h1 items a particular font…and it’s not working.

Can you offer any advice? I’m happy to tackle the learning curve of going through documentation, but I’m not sure where to look.

Thanks very much!

[nabeel]

Hi there,

Thanks for writing around! We’ve explained it in detail in our changelog, please go to https://theme.co/changelog/#theme-pro-2-0-0 and scroll down to the ELEMENT CSS: DYNAMIC, USER-GENERATED STYLING section.

Hope this helps!

[jstovallcollaborative]

Thank you! I’ve read through all of that, and it was really helpful. We’ll use the template manager in our next build, which will be a big improvement to our overall workflow.

I do still have a question, though. What if I want to make a sitewide change to an element? For example, if I want to change the color of all h1s throughout, I’m still not clear how to do that. The example at your link looks like focused on a particular page, hence my confusion. Should I still be able to use this in Customizer–>Custom–>Edit Global CSS?

.h1
{
color: #000000;
}

My CSS seems not to be affecting elements as I expected, so I’m trying to figure that out.

This is already very helpful, thank you!

[thai]

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

h1, .h1 {
color: #000000 !important;
}

Let us know how it goes!