How preset default values for text S,M,L,…

Different px values are accepted, but the bottom alignment is still a little below the line. See?https://snipboard.io/sZM4Wh.jpg?.?

Hi @marc7 on my site making the vertical alignment assigned to the bottom makes the subscript sit on the same line as the rest of the text.

There are other options you could try, you could replace bottom with unset, additionally, this page shows some of the vertically aligned options you can try if that doesn’t work. You only have to replace the bottom or baseline with the other options given.

Reason was to avoid that added CSS in the standard theme.json file would be overwritten during an update.

Any code you add to the Additional CSS section won’t be removed when you update your theme, its ok to add it there.

Changing ‘bottom’ into ‘unset’ works 100% !!! Wow. Thank you for this tip !!!

I also added the CSS to adjust the text sizes (my original question).
In the theme.json file, this works very well. I have now added this code in this ‘Additional CSS section zone’, but this does not overrule the values of the theme.json file. How could this be? You can see the content in this file. I don’t know if it means anything but all the text is highlighted in red.

Hi @marc7 –

Changing ‘bottom’ into ‘unset’ works 100% !!! Wow. Thank you for this tip !!!

Great, glad to hear!

I also added the CSS to adjust the text sizes (my original question).
In the theme.json file, this works very well. I have now added this code in this ‘Additional CSS section zone’, but this does not overrule the values of the theme.json file. How could this be?

It’s possible that the CSS you’ve added in the Customizer needs to be more specific (“specific” in CSS terms) in order to do the override properly. If you’re able to provide a link to your site and show me an example of an override that’s not working as expected, I’ll be glad to take a look directly.

Hi Kathryn,

I added a test page on the website. https://www.edithvandriessche.be/test/
This page shows the font sizes as specified in the theme-json file.
In the Customizer, I changed the values of Small and Medium from 0.8 to 1.8 rem and from 0.9 to 1.9 rem. So that should produce a much larger font on the test page, but it doesn’t. So the command in the Customizer does not override the values in the json file.

I added a copy of the CSS structure in the Customizer in the previous post, but I don’t know if that’s enough for you?
Do you have access to the Customizer on my website or can I give it to you so you can see what it contains?

Thanks for creating the test page for me to look at, @marc7 ??

I see the issue – you’ve added JavaScript in the custom CSS editor in the Customizer, instead of CSS. The following is JavaScript code, and cannot be used in the custom CSS editor:

"fontSizes": [
{
  "fluid": {
    "min": "1.75rem",
    "max": "1.8rem"
  },
  "size": "1.8rem",
  "slug": "small"
},
{
  "fluid": {
    "min": "1.85rem",
    "max": "1.9rem"
  },
  "size": "1.9rem",
  "slug": "medium"
},
{
  "fluid": {
    "min": "0.9rem",
    "max": "0.95rem"
  },
  "size": "0.95rem",
  "slug": "large"
},
{
  "fluid": {
    "min": "0.95rem",
    "max": "1rem"
  },
  "size": "1.rem",
  "slug": "x-large"
},
{
  "fluid": {
    "min": "1.15rem",
    "max": "1.2rem"
  },
  "size": "1.2rem",
  "slug": "xx-large"
}
]		

(The “J” in theme.json stands for JavaScript – more info about JSON just in case you’re interested.)

If you use a browser inspector you can see the CSS classes that are being generated on the front end. So these are the classes that can then be targeted with custom CSS overrides in the CSS editor:

Like this, for example:

.has-xx-large-font-size {
  font-size: 3rem !important;
}

Repeat this for each size you’d like to override.

Normally it’s a best practice to avoid using !important in custom CSS, but it’s necessary here to override an !important already in use elsewhere.

Hi Kathryn,

I added the code you provided.
In this print screen you can see what I entered.
Unfortunately with no result. I’m still missing something somewhere probably.

==> correction:
Online, a difference can be seen.
But during the formatting of the page or blogpost, you only see the values as specified in the theme.json file. You have to open the “example” to see the result.
This is very confusing. When working on the layout, you actually have no idea of what you are doing.
What a mess.
So wouldn’t creating a child theme be a better solution in the end?
And (if so) is there a video somewhere that goes through step by step how to do that?

Honestly, I did not expect that moving websites to TwentyTwentyThree would require so much programming know-how to include these simple basic features.

By the way: how can I open that ‘browser inspector’?

Looking forward to your help.
Marc

• This reply was modified 1 year, 8 months ago by marc7.

Online, a difference can be seen.
But during the formatting of the page or blogpost, you only see the values as specified in the theme.json file. You have to open the “example” to see the result.

Custom CSS is only applied to the front end (public side of a site). It’s not applied in the editor view (back end).

Honestly, I did not expect that moving websites to TwentyTwentyThree would require so much programming know-how to include these simple basic features.

I understand. I do think for most folks, choosing the font size from S, M, L, etc. works just fine “out of the box,” with no need to change the sizes that those designations correspond to. So this isn’t actually a common request, and something that theme developers would be more inclined to want to do, which is why a bit more technical skill is required.

By the way: how can I open that ‘browser inspector’?

It depends on your browser, but in most browsers, if you right click on a web page, you can choose “Inspect” and it opens up the browser inspector. It looks a bit different in each browser but generally works in similar ways.

So wouldn’t creating a child theme be a better solution in the end?
And (if so) is there a video somewhere that goes through step by step how to do that?

You’re welcome to go that route, sure.

I recommend using the Create Block Theme plugin to create a child theme. Here’s a tutorial you might find helpful:

https://learn.www.ads-software.com/tutorial/streamline-your-block-theme-development-with-create-block-theme/