How to adjust size of h1, h2, h3 in pro theme

Hi there,

The design in dashboard is probably not from the theme. The best placement is style.css but you should add !important;, it’s because CSS has different loading order depending on where you place it. Adding !important when using style.css whille make sure that it will override other existing CSS no matter where it’s added.

Would you mind providing the site’s URL that has this issue? Maybe I could find something why it’s not taking effect.

Thanks!

1 Like

Hi Paul,

I added that to global CSS in my Pro Theme, but when I make size adjustments with it, it doesn’t reflect on my site.

Thanks

Hi there,

The design in dashboard is probably not from the theme. The best placement is style.css but you should add !important;, it’s because CSS has different loading order depending on where you place it. Adding !important when using style.css whille make sure that it will override other existing CSS no matter where it’s added.

Would you mind providing the site’s URL that has this issue? Maybe I could find something why it’s not taking effect.

Thanks!

@Rad and which css option/placement in x/pro is the last one in the css hierarchy?

What do you mean by last one? The last to be loaded is the page’s CSS. The means the page’s CSS would override all CSS. You might have syntax errors in your CSS that is why it doesn’t work. You can paste your CSS in http://csslint.net/ and it will scan it for errors.

Thanks.

@christian_y yes i meant the last css being loaded. so the pages css ist loaded last? even after the custom.css file in the child theme?
the css came from theme.co for h1, h2, etc. sizes. see further up this thread…
nice site you suggested :slight_smile: thanks!

Hello @iTurtle,

Thanks for writing in! Any custom CSS you have in the builder’s CSS editor for that page should take precedence over an element as long as the selector specificity is correct, as it is output directly on the page. Since the child theme’s custom CSS styles are loaded from an external stylesheet, the in-page CSS should take over even with the same selectors.

Cheers!

hello @kory, thanks for your explanation! does that also mean that the css of an element on a page overrides everything else?
if so: a h2 element on the page would override my h2 size in the global css (builder oder file in child theme). that would be unfortunate since i would have to use an !important or it would not work globally.
i really really wished that there where proper global font settings. all these css settings for just one element are in most cases useless to me. please make some global elements or something. thanks a lot! kai

1 Like

Hi there,

If you are using the V2 headline element, the CSS code suggested in this topic will mostly not work because the structure of the element will be different and it has a lot of built in option that will control the style of the headline element which will be given the higher precedence over the custom CSS not unless !important is add in the code.

However, if you will use the Classic Custom Headline element, the code should work fine and you could increase the selector specificity so that the CSS code will be given the high priority over the predefined CSS.

You can do this by updating the CSS code to:

h1 span,
.h1 span {
    font-size: 400%;
}

h2 span,
.h2 span {
    font-size: 285.7%;
}

h3 span,
.h3 span {
    font-size: 228.5%;
}


h4 span,
.h4 span {
    font-size: 171.4%
}

h5 span,
.h5 span {
    font-size: 150%
}

h6 span, 
.h6 span {
    font-size: 100%;
}

This code should have the higher precedence over the default CSS because it is more specific to the span tag that is in the heading element since the Classic Custom Headline element’s HTML look like this:

<h2 class="h-custom-headline h3">
    <span>Custom Headline</span>
</h2>
1 Like

@Jade thanks for your reply and css code!
i really would be interested in theme.co’s philosophy behind all this. why is there no working! global setting for body fonts and headline fonts? do you expect we set the styling in each element on each page separately? what would be the point of that? of course it would be good to be able to override the global stylings in a single element. but why not have a global setting first? that makes the v2 elements unusable for me.

2 Likes

Hi,

We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. Thanks!

1 Like

@paul.r what are your referring to? could someone please explain the global font settings in x and pro???
ps: i had another idea for improvement. why not make font size and color part of the font templates? this would solve many of the mentioned problems. that would be indesign for the web :wink:

1 Like

Hi,

I apologize for not providing more information.

Below are the current available settings that xtheme and pro have that pertains to font sizes and color.

  1. Global Font Settings

Xtheme
X > Launch > Options > Typography

PRO
PRO > Launch > Theme Options > Typography

Detials explanation for each settings can be found here

Please note that Content Font Size has higher priority than your Root Font Size

  1. Font Manager - https://theme.co/apex/forum/t/features-font-manager/101

  2. Color Manager - https://theme.co/apex/forum/t/features-color-manager/102

  3. Custom Headline size and color (Individual setting)

The only thing that is missing is the global font size settings for the heading h1,h2,h3,h4,h5…
thus we provided you with a custom css code to achieve this. This is also what I was referring to add as a feature request.

Thanks

1 Like

dear paul, thanks for explaining!

…and since the content font size in the text element can’t be inherited it always overrides the size of the root font size. so i wonder what the root font size is for? same applies to font weight.

1 Like

The root font size is applied to the HTML tag. That is where all text in your site is based on. If you increase the root font size, all of the em, rem and % based text will increase in size relative to the root font size.

To understand this best, you need to grasp the concept of modern responsive typography.
Here’s another one.

The Body font-weight applies to regular text in your site like the text in your text widget, regular blog post not created with Cornerstone, the Classic Text element and all of the text that will inherit the body font settings.

The Heading font-weight applies to regular headings like the post title, widget title and all the text that will inherit the following selectors h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6.

If you’re wondering why you need to setup V2 font size every time, this is because there is a plan for a template manager. Once this feature is realized, you will be able to create presets so you just have to select a preset and not set individually each time. Please read this news and I encourage you to join the discussion here.

Thanks.

1 Like

thanks christian,
i think i understand that by now.
but if i set a content font size (rem) in typography nothing changes in the old or new text elements (set to inherit). font manager on. root font size mode: scaling.
so what for is that content font size (rem) setting in typography?
thanks again! kai

Hi dear @iTurtle,

For more information regarding the REM value kindly check the articles below:

https://j.eremy.net/confused-about-rem-and-em/

The REM value will have a difference if you directly add a font size to the HTML tag yourself. Other than that the REM value in Typography settings will do nothing special.

Thank you.

hi christopher,
in the v2 text element i set the font size to 1em. is that what you mean with “add a font size to the HTML tag yourself”?
thanks, kai

Hey Kai,

I’m not sure what @christopher.amirian meant but going back to your reply:

“Content Font Size (rem)” will affect the sizing of all copy inside a post or page content area. It uses rems, which are a unit relative to your root font size. For example, if your root font size is 10px and you want your content font size to be 12px, you would enter “1.2” as a value. Headings are set with percentages and sized proportionally to these settings.

I just checked in the Theme Options and found it doesn’t work so I will post this to our issue tracker. If you need this setting, the Customizer way is the one that currently works.

Thanks for reporting.

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