Option to inherit headline size from theme stack

[SoBeGuy]

For V2 Headline elements, there’s currently no option to inherit the font size from the theme stylesheet. Instead, each H1, H2, etc… needs to be set manually. This is extremely frustrating and I don’t understand why you designed it this way. I’ve never seen this approach used in any other theme and it makes no sense. The whole point of applying CSS to headline tags is to be able to globally adjust the headline sizes. With the V2 Headline elements, if you later decide you want to change the font size for H1, you’d have to manually update every single H1 on the site. This is crazy!

I’ve seen tons of other users complaining about this issue on the forum and it seems your standard reply is to advise people to use presets. Well, presets are great, but they don’t update the applied elements globally, so if you apply the same preset to all your H1 elements and then later want to change the font size, you’d still have to go through and update every H1 manually.

I know how to write CSS and of course I could create a custom stylesheet, but then I’d have to create a separate class for each headline element, like .h1-custom, because if you use the built-in classes, your CSS will be overridden by the element-level CSS, which means you’d have to use !important tags, which would then make it impossible to set the font size at the element level. Again, this is nuts! I don’t want to have to manually apply a custom CSS class every time I create a headline element. The page builder is supposed to make your life easier, not harder.

There’s an extremely simple solution, which I’m sure your development team could implement in about 15 minutes. In the Text Format section, where you specify your font size, simply add an “Inherit” option to the units selector. So the user would click on the PX or EM button and in the popup list, there would be an option for “Inherit”. This would work exactly the same way that the margin settings work, where you can select Auto instead of entering a unit for your margins. The Inherit option should be the default and once it’s selected, the font size would automatically be inherited from the theme style sheet.

[lely]

Hi Brad,

Thank you for taking the time and giving detailed information. I understand your concern and I will submit this as feature request. This will be discuss again by developers taking consideration your suggestion. We can’t promise it can be implemented right away but rest assured it will be considered.

[christian]

Hey Brad,

Since you know CSS, I just want to add in here that controlling all V2 Headline’s Font Size is actually easy. You just need to override the Base Font Size of the Headline element globally by putting this code in Theme Options > CSS.

#cs-content .x-text-headline {
    font-size: 10px;
}

You just need to leave the Primary and Secondary Text Font Size to 1em and you’re now able to control all of the V2 Headline’s Font Size globally. You might already know why you must leave it to EM. If not, EM is actually works like inherit in the sense that it take into account parent elements’ font sizes. For more details, please see how EM works at https://www.w3schools.com/cssref/css_units.asp

If you later need to scale the Primary and Secondary Font Size per page, you’ll still be able to do it because they have separate font size controls.

If you want to target H2 V2 Headlines add this.

#cs-content .x-text-headline h2 {
    font-size: 10px;
}

If you want to target the Headline Primary Text you change it to this:

#cs-content .x-text-headline .x-text-content-text-primary {
    font-size: 10px;
}

My goal of showing that is to let you know that it’s possible. For the rest of the setup, you can use the browser’s inspector to get the classes or target elements which I’m sure you already know.

As you can see, there are several setup scenarios that you can make with the V2 Headline and it might not be feasible to turn them all into options. Maybe translating that CSS to an option or having a Global Font Size for each headline level might help but please just note that though our development team will discuss this, we can’t guarantee that every feature request will be implemented because more options could mean adding bloat and we also need to factor in many scenarios and adding an option could cause conflict. I’m correcting Lely’s response.

Hope that helps.

[SoBeGuy]

Hi Christian,

Thank you for the additional info. It’s good to know that it’s possible to override the default headline sizes, but this is really more of a hack than an actual solution. The reason I say this is because changing the base font size will affect ALL headline elements of the corresponding class, even ones that have been specifically set to a different size.

For example, suppose I use an H1 on my home page here area and set the size to 4em, because I want it to be extra large. Now at some later point, I want to increase the global H1 size. Using your approach, my home page H1 would now become larger, even though I specifically set it to a certain size. I know I could work around that by using a custom class or inline styles, but the problem is, we’re piling workarounds on top of workarounds to solve a problem that shouldn’t exist in the first place.

Every other theme I’ve ever seen has allowed the developer to specify font sizes for headline elements. Therefore, it’s surprising and disappointing that your Pro theme, which is the most advanced and customizable theme I’ve ever used, lacks this simple and basic functionality.

[SoBeGuy]

Also, please don’t take this the wrong way…I think your products and support are both amazing and I’m not trying to be insulting, but I chuckle every time a developer mentions “feature bloat” as a reason to not implement a certain feature. If this were a simple little free theme with few settings, the feature bloat argument might make sense. However, Pro is a sophisticated and rather expensive commercial theme. The whole reason people buy it is for the feature bloat! We want features that make it faster and easier to develop complex websites. Hand-coding CSS is a waste of time, particularly for something as basic as headline sizes.

90% of the time, what people call “feature bloat” is actually poor UI design. For example, instead of creating collapsible sections to organize all the settings, the developer creates one huge settings page, making it difficult for people to find the setting they’re looking for. The Pro UI does not suffer from this problem. It’s well-designed, organized and efficient. It certainly wouldn’t hurt to add more settings, as the good UI design makes it easy to find what you’re looking for. In this case, I described an elegant way to implement the feature, by adding Inherit as an option in the font-size setting. This would have zero impact on the UI and would not introduce any so-called feature bloat.

[christopher]

Hi Brad,

Thank you for your detailed explanation and your take on this. I checked the case and my colleague is already added this to the issue tracker as a feature request.

Thank you.