Page headers and CSS priorities

[paulvanderheijden]

Hello,

I am very new to the X theme and I have some issues with styling text using the Headline and Text element:

1. I changed my template from Default to Blank No Container. As expected, the page title was removed from the page template. Now I want to add one manually. What is the default method?

2. Re 1: I added a Headline element and selected H1 in the setup section. I get “< h1 class=“x-text-content-text-primary”>Short and Sweet Headlines are Best!” and apparently the x-text class overrides everything. How should I handle this?

3. What also strikes me: if I add a text element, the text color is automatically set to black even if I don’t select any color. It overrides the text color settings in the Customizer screen (which is gray). Is that normal?

Hope you can help me. Cheers, Paul

[rad]

Hi @paulvanderheijden,

Thanks for writing in.

1. You’ll have to add your headline element manually within the builder.

2. What do you mean by x-text class overrides everything? You mean the font styling? Please provide more details and screenshots.

3. Yes, it’s normal. The headline only inherits the font, but it has its own local styling that you’ll need to utilize.

Thanks!

[paulvanderheijden]

Hi Rad,

Thanks for your reply.

Re 2: I meant that I have defined a H1, .h1 in my global CSS but none of the settings (font size, all caps, color) are being applied. Is the better alternative to add a regular Text element and add my < h1> in the text myself?

Where can I find information on when the global/local CSS is being prioritised versus the adjustment you make in the web interface versus the base template? I am working on a site with a lot of pages so I want to maximise the use of classes.

[rad]

Hi @paulvanderheijden,

Still a bit confusing to me, you mean you wish to use text element and style it as h1?

As for CSS prioritization, you must add !important to styling value. Example,

.selector {
color: #000 !important;
}

This will override the styling for that selector regardless of placement.

Thanks!