Custom css for normal "Headline Elements"

[l_eckardt]

Hello,
we are looking for a solution to create headlines in different sizes for the whole website.

To be more specific:
We want to have a h1, h2, h3… that, if necessary, can be adjusted and changed in one place.

We have posted in the forum before and found out that we need css for this.

What we have done so far:

1. we created a global css entry for the whole site:

h1, .h1 {
font-size:4.5em;
}
h2, .h2 {
font-size:4em;
}
h3, .h3 {
font-size: 3.5em;
}
h4, .h4 {
font-size: 3em;
}
h5, .h5 {
font-size: 2.5em;
}
h6, .h6 {
font-size: 2em;

2. we have used “Classic custom headline” headline element on the content page and set “Headling Level” and “Looks like”.

3. on the content page we have added the text element “Classic Text”. With this element we get the possibility to change the font size centrally in the “Typography” settings.

The Css works for us only with the “classic elements”. However, we would like to use the new “Headline” and “Text” elements instead of the Classic elements, as these offer us more setting options.

Is there a way to do this without the classicelements?
We would like to avoid that we now build the website with Classic Elements in combination with css and then, unnecessarily do without the Advanced Settings of the newer elements.

Thanks for your help!

[alexander]

Hi @l_eckardt,

Thanks for reaching out about this. We actually have some fairly strong CSS selectors on our Headline elements to avoid styling leaks from other systems changing those elements. You certainly can change them globally, but you’ll need to target a few more selectors. Try this custom CSS:

.x-text .x-text-content h1.x-text-content-text-primary {
  font-size: 4.5em;
}

.x-text .x-text-content h2.x-text-content-text-primary {
  font-size: 4em;
}

.x-text .x-text-content h3.x-text-content-text-primary {
  font-size: 3.5em;
}

.x-text .x-text-content h4.x-text-content-text-primary {
  font-size: 3em;
}

.x-text .x-text-content h5.x-text-content-text-primary {
  font-size: 2.5em;
}

.x-text .x-text-content h6.x-text-content-text-primary {
  font-size: 2em;
}

[l_eckardt]

Hello,

thank you!
This code works fr our Headlines.

Do you have a similar css code for the Body Copy? So that we can use the normal text element? The one you see in the CSreenshot.

Thanks a lot!

[marc_a]

Hi @l_eckardt,

You can use this CSS selector for a normal text element.

.entry-content .x-text p {
   font-size: 2em;
} 

or

.entry-content .x-text p {
   font-size: 2em !important;
} 

Hope that helps.

Thank you.