How do I change “:hover” effects in 5.9 (FSE/Global styles)

  • I have customised the default Twenty Twenty-Two theme using Full Site Editing and Global Styles.

    I want to change the style of links when mouse hovering (i.e. what is targeted in CSS with the :hover selector). “Global styles” allow me to set some properties of links (color, size, etc.) but not the hover effect. I would like to disable Twenty Twenty-Two’s punctuated underlining and change the colour instead.

    My question is: What the best way to do this is in this new world of FSE/Global styles? With the Customizer, I would have added some “Additional css”. FSE does not AFAICT allow for “Additional css”.

    – Is it doable by editing theme.json directly? I have read up on it but still don’t really get how to do CSS-via-JSON.
    – Would it make more sense to file a request for hover effect to be included in the Global Styles UI for links? Or is that up to the theme developer to implement?
    – Or does this call for a child theme? I would like to avoid it, as it feels like FSE/Global styles is pushing towards not needing to child theme for minor touch-ups.

    EDIT: I am aware that I can add CSS classes to blocks under Advanced block settings. That leaves both the question of where I input custom classes and how to target the :hover selector.

    • This topic was modified 2 years, 11 months ago by brokkr.
Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi There,

    You can achieve your goal by doing something like this

    #site-content a:hover {
    text-decoration: none;
    color: #ec407a;
}

    Add this CSS in your style.css

    Thread Starter brokkr

    (@brokkr)

    Hi Yadav,

    Yeah, I know what the CSS is. The point is that to make that change permanent, I would need to resort to child themes (or find some way to add old-school “additional css” on top of the theme’s css). And as I said, that does not feel like the right solution anymore.

    • This reply was modified 2 years, 11 months ago by brokkr.

    +1 for this question. I’m currently trying to build my first block theme (recognizing that FSE is absolutely nowhere near being ready, but I’m trying not to paint myself into a corner).

    I’m also trying to wrap my brain around why it’s useful to put any CSS into theme.json when there’s so much it can’t do, such as this: I can put the base link color into theme.json, but nothing for the :hover, :focus, :active, :visited etc. states. Sites have been having links change color on hover for, like, 20 years now, so it’s not like this is a really obscure thing for me to expect to be able to do.

    I’m leaning more and more towards the idea of defining my CSS variables in theme.json but keeping all of the actual CSS code in a regular CSS file.

    It doesn’t help that the documentation (at least, any that I can find) is so lacking at this point. It’s nearly impossible to know what can or can’t go in theme.json other than by trial and error.

    I think ultimately I’m dealing with a philosophical problem… there are a lot of features that are still in development/beta that are being rolled into WP core, and I’m coming to this expecting things that are in core to be functionally complete (more-or-less, anyway), when they absolutely are not.

    • This reply was modified 2 years, 10 months ago by room34.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How do I change “:hover” effects in 5.9 (FSE/Global styles)’ is closed to new replies.