• Resolved sarahnorthway

    (@sarahnorthway)


    An update broke our old theme so I’m customizing the new default theme Twenty Twenty-Five. We use the <pre> tag in a bunch of old historical posts to lay out text with spaces, and our old theme used “overflow-x: auto” to prevent pre tags from running text off the right side of the screen and breaking the site on mobile.

    There is a block named “preformatted” under Appearance > Editor > Styles > Style Book but modifying it does not change <pre> tags in our old posts, so I guess that’s something else.

    I think I just want to add this globally:

    pre {
    overflow-x: auto;
    }

    But I can’t find where to make global additions to the css for the entire site for this default 2025 template. Help?

Viewing 12 replies - 1 through 12 (of 12 total)
  • lisa

    (@contentiskey)

    if you are are you looking for the “additional css” area when using a block theme like twentytwentyfive — try a link formatted like this: yourwebsite.com/wp-admin/customize.php

    • This reply was modified 1 year, 2 months ago by lisa.
    Thread Starter sarahnorthway

    (@sarahnorthway)

    Excellent, thanks for that link, it has the field I was looking for.

    Clicking the “Customize” button in Appearance > Themes seems to have been replaced with the new block editor (/wp-admin/site-editor.php) which I guess doesn’t have a way to set custom global css.

    Directly modifying the theme’s style.css file also works as a fallback.

    On Twenty-Twenty-Five theme:

    1. Appearance > Editor (site editor)
    2. Styles > Edit styles (pencil icon)
    3. Click on Styles menu icon (⋮) > Additional CSS

    There you can set custom CSS for the whole site.

    For me, there is no pencil icon to Edit styles. I click on the Styles menu and there is no way to Edit the Styles.

    See the screenshot: https://tinyurl.com/2csb7hd7

    @tonyzeoli I was on WordPress 6.7.x. Things have changed since then.

    On WordPress 6.8.1 running Twenty Twenty-Five theme, click:

    1. Appearance > Editor (site editor)
    2. Page > Open any page
    3. Click on the styles icon (◐)
    4. Styles > More (⋮) > Additional CSS (check my screenshot)

    P.S.: Once you started adding this global additional CSS and saved it, it won’t be so hard to find… You could then just go: Appearance > Editor (site editor) > Styles…

    NOTE: You can also add custom CSS to specific blocks. That’s not so hard to find. But that’s another story.

    @tonyzeoli You could also just go to:

    1. Appearance > Editor (site editor)
    2. Open command palette (Ctrl+K) 🔍
    3. Search for “Customize CSS”

    Every time I come back to WordPress it feels like they rearrange or hide things in the site editor. It’s so frustrating to find help when every instruction tells you to click places that don’t exist anymore.

    @brentrambo Did you read it all ? Did you read my 3 last posts from 2 weeks ago ? Just scroll up or click here. That’s an update, tested on WordPress 6.8.1.

    @sebastjava I guess I touched a nerve. Yes, I read all of your posts. I simply made a comment that WordPress keeps changing things rather than settling how Gutenberg exists; I wasn’t saying I couldn’t find “additional CSS.”

    I totally agree with @brentrambo … The way it’s designed is so counter-intuitive and it almost makes me think WordPress has done this by design to make it difficult for users. This isn’t something new either — there are plenty of “free” or cheap software / services that deliberately make it not user-friendly so that they pay for support or their premium services.

    Why on earth would someone think that going into a page is going to edit the global custom CSS? I think the average person would believe going into a specific page and editing the CSS would only affect that page. It feels like either they’re doing this purposely or whoever was in charge of UX is an idiot.

    Why would you not make a button to edit settings for the entire site with the rest of the options that edit the entire site? Why make the user click on a specific page first?

    There are so many WP issues like this all the time that boil down to confusing ways to access options — it’s the main reason I’m even searching on these forums in the first place.

    simongarrett

    (@simongarrett)

    I also agree: hiding “Additional CSS” from the global Styles page until additional CSS has been added in a different way that appears to be editing a page (rather than making a global change) is not user friendly. Thank goodness I found this thread or I’d still be going round in circles.

    Block themes and full site editing are great, but there are a lot of rough edges at the moment, and the lack of stability really doesn’t help.

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Where is custom global CSS in twentytwentyfive?’ is closed to new replies.