Global Theme Options overwritten by Element Defaults

[Xtremefaith]

I have set up a custom stack so that I can create the fields I need because the default font manager did not have all the expected options I was hoping for. So far this is looking great as you can see from my screenshot below.

Now the problem is, any time an element has a field with the default value set to inherit this works perfectly (ie. font family, font size, etc.), but unfortunately anytime the element has its own default value it supersedes the global values I’m trying to manage here (ie. color, line-height, etc.).

Is there anyway around this? My client would really like to just set the typography in one place and have it enforced globally. If I try to elevate my stack’s CSS by adding important! then it makes the components values unusable and I don’t think that is a good practice either. Would be nice if I could just set the respective default values to by {{dc:theme:<keys>}}

Appreciate any help with this.

[tristup]

Hi Nicholas,

Thanks so much for reaching out.

Just to clarify, values set directly through Elements are designed to override the Global values. This provides more precise control, allowing you to customize individual elements as needed—without impacting your overall global design settings.

If you’d like an element to follow the global values, I’d recommend using the inherit option.

Hope it helps.
Thanks

[Xtremefaith]

Hey Tristup,

I understand that, but just placing the Element on the page overrides the Global without ever setting it to do so. How should I make all headers? How can I tell them all to follow the globally defined typography instead of assuming the out-of-the-box typography that doesn’t even start with the site’s set standard?

It’s like, why have global design settings if 1) you can’t even set your component to follow them, and 2) you have to manually configure everyone of them to leverage the global setting. When it comes to some parameters (ie. color), there is no “inherit” option.

Don’t mean to be a downer, but as I’m preparing for setting up and managing several sites, this is very limiting. If any of my clients were to use Cornerstone themselves they would need additional training to not break the branding standards I’m trying to uphold. Hope this use case or explanation helps understand why this is needed.

Nick

[christian]

Hey Nick,

We’re sorry for the confusion. I just want to share first a bit of a history about the Global Typography. In the past, Cornerstone was a simple plugin and it used the Classic Elements like the Classic Headline element. Those Classic elements get they’re setting from the Global Typography. The Global Typography is also used by default template or what you see out of the box when you create pages and post without the use of any of Cornerstone builder.

So it is true that the v2 or non-classic elements are not connected to the Global Typography. But, we have the Element Manager where you can create your own Element defaults or Components. For example, you can create your own Headline Component then use it on many pages. Once you edit the component, changes will be applied to all pages. This requires extra steps but you will not limited only to one global setting. With this, you are able to create unlimited headline global styles and more.

Hope that helps.

[Xtremefaith]

@christian very helpful information, thanks for that I’ll give it all a try and see what it does for me.

[ruenel]

You are most welcome, Nicholas.