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.
- The topic ‘How do I change “:hover” effects in 5.9 (FSE/Global styles)’ is closed to new replies.