Where is CSS for Body border-width: max(1vw, 0.5rem) Stored?

Inspector shows the following CSS and I’d like to know where it can be edited from within WordPress.

Hi @xizor on the TT3 theme CSS is within the theme.json file, however, how the styles are defined is different as compared to the classic themes. I would suggest reading the article below to get more information about CSS on block themes:

Moving Core block styling to JSON

However, you can still change CSS code by adding it to the additional CSS section in your site editor. To access the additional CSS section open Global Styles then click on 3-Dots that appear on the top-right. You will then see the option to access the Additional CSS section for your site.

TT3’s ‘Theme.json’ does not contain the CSS for any of the following:

• ‘Body’ tag
• ‘.home’ class selector
• ‘.page-template-default’ or ‘.page’ selectors

@thelmachido , thank you for your prompt reply. Unfortunately, this answer appears to be incorrect.

I still am unable to locate the appropriate Editor Styles setting that enables modification of TT3’s default white ‘Body’ tag border.

I could use custom overriding CSS, but this is a brute force solution. Where has TT3 placed this CSS if not in the theme’s “Theme.json” file?

I still am unable to locate the appropriate Editor Styles setting that enables modification of TT3’s default white ‘Body’ tag border

Hi @xizor what exactly are you trying to achieve with the CSS, this information might help provide you with the information you need.

Hi @xizor

It sounds like you have activated the “Whisper” style variation, as that is the only one that has a body border.

With a block theme like Twenty Twenty-Three, the styling is not stored as CSS, but it is defined in either the theme.json file or one of the style variations .json files.

The built-in WordPress CSS generator then builds the CSS styling from what is defined in the .json file.

You can see in the theme’s /styles/whisper.json file from line 534 to line 538 the following that is defining the body border:

"border": {
    "color": "var(--wp--preset--color--tertiary)",
    "style": "solid",
    "width": "max(1vw, 0.5rem)"
}

There is currently no way to edit this in the site editor, so you have some options:

• Switch to a different style variation (will remove the border)
• Reset the styles to the theme default (will remove the border)
• Override the body border with custom CSS (remove or edit the border)

Thanks @uxl , that’s the info I was looking for, right down to the line number. Perfect.

For future searchers, I also found this bit of documentation on theme.json, Top Level Styles.

“Styles found at the top-level will be enqueued using the?body?selector.”

https://developer.www.ads-software.com/block-editor/how-to-guides/themes/theme-json/#top-level-styles

• This reply was modified 1 year, 4 months ago by Dave Loebig.