Custom CSS

  • OK, possibly I’m not really getting the whole block editor approach, but I do want to add custom CSS to Twenty Twenty-Two.

    So what’s the best way to go about this, in the absence of a Customize interface?

    Can you create a child theme? Do you add your rules to Style.css? Is there any recommended approach?

Viewing 15 replies - 1 through 15 (of 17 total)
  • Michael

    (@michael-luther)

    Hi Sergei,

    there is still a rest of the customizer with the ‘Additional CSS’ section. If you are using or trying out the new Twenty Twenty-Two theme, here’s how to get to the Customizer:

    1. Go to Apearance ? Editor
    2. Click on the WordPress icon at the top left corner of your screen.
    3. Choose ‘Template Parts’
    4. Choose ‘Header’ template
    5. Click on the ‘Site Logo’ area
    6. Open ‘Settings’ panel
    7. Under ‘Settings’ section click on ‘Site Icon settings’
    8. Voila, you are in the Customizer.

    Or in short – customize the following link:
    https://your-domain.com/wp-admin/customize.php

    I hope I could help you to solve your problem.

    Regards,
    Michael

    Thread Starter Sergeirichard

    (@sergeirichard)

    Thanks a lot, Michael. That certainly is well hidden!

    Can you tell me, does child theming still work as before?

    Great to know that the Additional CSS is still available. I’ve been struggling for days to get a block of 18 small images (with links to pages) to group close together, but haven’t been able to do it. The Tiled Gallery block will group the images together but it doesn’t allow links!
    Anyway, thanks for the info – they sure have hidden the Additional CSS though, haven’t they!

    The Customizer adds the Additional CSS styles to the <head> section, while the global styles for the theme are loaded in the <footer>.

    Therefore to override the style of the H1 element, for example, you will have to add “!important” to your style declarations.

    @johpg – Presumably that means the footer styles will normally override the custom CSS.. ?
    Thanks for the info.

    @andynick
    Correct, because the footer styles are loaded later in the document.
    So a H1 declaration added via the Customizer will get overridden.
    Therefore have to add “!important” to stop this happening.

    Another option is to use this plugin:
    https://www.ads-software.com/plugins/custom-css-js/

    This plugin allows you to select whether your CSS is added to the header or footer.
    If you select “footer” your styles will be added AFTER the theme styles, so will NOT get overridden.

    If you have a child theme and you add CSS to your child theme’s style.css, does it get loaded in the header or footer?

    • This reply was modified 2 years, 8 months ago by danquigley.

    @sergeirichard
    YES – child theming does still work as before

    @danquigley
    child theme style.css is added to the head section of the page

    Just a clarification regarding where I have referenced styles being added in the FOOTER of the page.

    By FOOTER, I actually mean the BOTTOM, or END of the page.

    If you view the page source of a page using the Twenty Twenty-Two theme and scroll to the bottom, you will see a </footer> tag.

    AFTER this tag, and before the </body> tag, you will see multiple <style> and <script> sections.

    This is where the global style settings for the theme are written.
    Because these are right at the bottom of the page, they override anything above them.

    So to override a global style setting via the Customizer, you have to add “!important” to the style declaration.

    Same with styles added via a Child theme’s style.css file.

    Sorry for any confusion and I hope this makes it clear.

    You don’t need to use !important, you could just make your rules more specific than the ones that at the bottom.

    That would prevent the footer CSS from “cascading”.

    For example, use body h1 instead of just h1

    I try to avoid !important wherever possible.

    Oliver

    Oliver @domainsupport

    For my example of changing the H1 element via the Customizer, using body h1 doesn’t work.

    It only works when I add !important

    Can you please provide a link to the affected page so I can take a look?

    More precise CSS will always override less precise CSS no matter where it is on the page unless the CSS is inline, inside the style attribute of the element. In this case !important is the only way to override it.

    Oliver

    @domainsupport

    https://messagexpress.com.au/fse/test-page/

    That test page is showing the H1 element with a font-family of “Source Serif Pro”.

    If I want to change the font-family for the H1 element site-wide (i.e. globally) to Arial via customize.php, I have to add this:

    h1 { font-family: Arial !important; }

    • This reply was modified 2 years, 8 months ago by johpg. Reason: add code tags 
    .entry-content h1 {
font-family: Arial;
}

    … (for example) should always override …

    h1 {
font-family: var(--wp--preset--font-family--source-serif-pro);
}

    … which is what is in your footer because its more specific.

    Take a read through this page which should help explain it probably better than I am ??

    Oliver

    @domainsupport
    I understand what you are saying re specificity.

    .entry-content is the wrong class to target.
    The correct one is wp-block-group

    So if you want to globally override the H1 font-family, either of these will work in the Customizer:

    .wp-block-group h1 { font-family: Arial; }

    h1 { font-family: Arial !important; }

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Custom CSS’ is closed to new replies.