Global CSS text styles to override default Pro element styles?

Support
#1

Is it possible to set global styles for elements like headings and paragraphs using style.css or another method, which can be overridden in the pro page builder on an individual basis?

I have recently started using Pro after using X for some time, and have found the lack of any styling to heading elements and the requirement to style each one individually to be extremely repetitive and inefficient.

It would be nice to be able to add elements without having to style them individually, having them adhere to a default global style unless otherwise configured. Then, the editor’s individual inline styles could be applied to override global styles.

I found that I can apply global styles to h1 elements with the following selector:

#x-root h1.x-text-content-text-primary

But then this prevents me from overriding the style in the Pro page builder, as the selector is more specific than the styles applied through a heading element, which are applied to a wrapper div around the heading. Example: .e64-5.x-text is the class to which styles are applied for a heading on one of my pages. This is a div three parent levels above the h1 it styles, and thus less specific than my selector.

You can see this at the URL below, on the heading “Get Your Next Tattoo from a Fine Artist in His Private Studio”:

http://dev-cjk-tattoo.pantheonsite.io/

Is there a way to achieve what I’m trying to do with Pro?

It would be a huge relief to find that I can set default styles for certain elements and configure styling on individual elements only as needed.

Thanks

#2

Nevermind, I realized that the solution to my problem is quite obvious. The “Presets” setting was staring me in the face. :grin:

#3

Glad to hear that. :slight_smile:

#4

I have this same problem. I would like to set global settings for h1, h2 style etc. How do you do this? How do the presets neatly enable this? Or is it better to use CSS? Thanks

#5

Hi Chris,

Could you please try following this thread (https://theme.co/apex/forum/t/managing-all-those-text-and-headline-presets/37011) and see if that helps.

Thanks!

#6

Can you point me to this setting? :slight_smile:

#7

Hello @flashfog,

Thanks for asking. :slight_smile:

You can first design the element in Cornerstone builder and then save the same as preset. You can access the preset from X > Templates. To help you get started I have recorded a screencast. Please take a look.

Thanks.

1 Like
#8

Hi Than you!

My question was regarding default for tools, so that you don’t have to apply the pre-set over and over, which is only one step better than what originally started the post.

Can an element be made to default to a specific preset? that would really make the original poster happy, specially if you can create instances of each element with the presets already in place.

example
-text:default (no presets)
-text :body
-text: quote
-text:microcopy

-headline:L1
-headline…

you get the picture.

thanks

#9

Hi @flashfog,

You can always set the default in Theme Options > Typography but elements have it’s local styling to if you’re not going to choose Inherit in its setting. But if you’re referring to a specific feature of builder’s element like primary text and such, then it’s not possible. The default is always the first set when you add that element in the builder.

But if you’re trying to make a preset as default, you can then go to Pro > Templates then click the Cog (gear) icon and click Template Manager. Then set your default presets.

Thanks!

#10

but i do’t use pro!

#11

Hello @flashfog,

Thanks for updating the thread. :slight_smile:

It’s not limited to Pro Theme. You get the same option in X Theme as well. Here is a screencast that you can take a look.

Thanks.

#12

this is great. THANK YOU!

#13

You are most welcome. :slight_smile:

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.