Forget Rings, One CSS Selector to Rule All Styles

Actually my title and featured image went a little off track. This is not about one powerful CSS feature… it’s all of them.

Now I know that most people run shrieking at the sight of HTML, and me talking about CSS just ends up sounding like this.

And I am far from being a CSS judo master, but I use it almost daily, and usually I end up looking up something and add it to my sack of tricks. There is a lot you can learn just by playing.

Your friend here is the web browser inspector – if you do not know how to pry this open, look for some instructions on how to do so in your preferred browser.

The cool thing is you can experiment with changing CSS settings, add new ones, heck even change the HTML content. In the old days, we would make some changes, upload to a server, reload, cry, rinse, repeat. In working on new themes, sites, I spend a lot of time poking around the inspector.

This comes in to play even more now that WordPress has added a Custom CSS pane to the Customizer, which means you can add stuff to override what’s in your theme, just by putting some CSS in a box.

One of the most useful things you can do is hide stuff, let’s say there is some piece of a footer, or a button you don’t want to see, all you need to do is (a) use the web inspector to find the container for the thing, hopefully it has a #id or a unique way to select it, and then, try things like:

Once it works in the inspector, then jump over to your WordPress site, pop open that Additional CSS pane in the Customizer, paste it in to try it out. The beauty of the Customizer is that you can see the changes in real time, but better– nothing is done on your site until you save the changes. So you can experiment here too.

Being able to do this imbues you with heroic powers AND YOU DO NOT HAVE TO TOUCH CODE (some will argue that CSS is code, well I say pffffffffft).

Here is a simple one. I’ve been making a lot of use of the lovely simple Hamilton theme by Anders Noren.

As a hub for a series of other sites for my November Fellowship Down Under, I created a Hamilton powered theme for the multisite top of the heap at https://cog.dog/roo:

Yeah, that’s my silly mug (from 2007) in the background, I did that in the Customizer using the Background image pane. But on interior pages, it was hard to read:

I open the browser inspector and find where the CSS is defined for the main body selector:

The body selector has a whole whacksock of class selectors – it’s the .custom-background one that does the background image. I have an idea, so I copy all that CSS.

The idea is also noting that it also applies the home selector only on the home page. Now I can take advantage of that via my own CSS incantation.

I return to the Customizer, and remove the setting for Background Image, removing it. Poof. I disappear.

Then I open the Additional CSS pane, and insert:

Now I am back on the scene:

While still in the customizer, I can link to an interior post, and SHAZAM! There is no background image.

I have made a specific selector with body.home that comes into play only for the body on the home page. You might notice I also added another selector to make the title text on all pages stand out a little more:

This came from inspecting the element, and noting it was set in the default theme to be 400; I experimented with higher values.

This is the tiniest tiny example, but a modest command of CSS, and then, searching on the rest, can help you wear that Ring of #div.Power.

Featured Image: I used some Photoshop trickery to add some new script to Day 175…One Ring flickr photo by bandita shared under a Creative Commons (BY-SA) license

 Share this barking on social media

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon