0,00 USD

No products in the cart.

Saturday, February 27, 2021
0,00 USD

No products in the cart.

Changing Your Widget Title Colors (and finding the right CSS selector to edit CSS)

Zip is slowly, slothfully, changing the colors for his website. But he finds that he can't change the widget titles in the customizer. Here's how to style widget titles using CSS, including adding background images and custom CSS classes.

Home » Street Art » Changing Your Widget Title Colors (and finding the right CSS selector to edit CSS)
0
(0)

Zip is in the process of editing the colors for his new website. But the WordPress customizer, he finds, doesn’t have any selections to enable him to change the colors of the widget titles. This is not unusual! Many themes don’t have editing widget title colors as an option. To do it, he’ll have to find the correct CSS selector, so this is an excellent time to go over that as well. So here’s more information about styling widget titles with CSS, including adding background images and custom CSS selectors.

Styling widget titles with CSS

Let’s learn a bit about CSS. If you make changes like these, be sure you are using a child theme so your changes don’t get overwritten when you do a theme update.

Find The Correct CSS Selector

Zip wants to change the widget title. Most sites have something like .widgettitle for the CSS selector for the widget title. However, this selector can vary with each theme.

We right-click the element we want to change and then choose “Inspect” from the menu. Doing so opens the developer console. You can also open the console using F12. The console pictured above is in Chrome. Firefox and Edge also have consoles, but it is my opinion that Chrome works better for this. My spouse argues with me about this, but he does not need actually to use the developer console. He just likes to argue.

There, we see that the CSS selector is .widget h3. However, if we hover over that, we can see over the widget title itself that it has another selector: .widget-title. I could not capture a screenshot of this.

Test a change to see if you have the correct selector

It’s pretty easy to find the correct CSS selector for the widget title. However, sometimes finding the right selector can be confounding! I like to test a small change initially, such as color or font weight just to see if I’ve chosen the correct selector.

You can actually test a change right in the developer console! For instance, in the photo above where it says text-transform: uppercase if I change uppercase to none, I can see that the title is no longer all caps. I know I’ve found the right selector.

However, sometimes changes to CSS can affect things in ways you don’t intend. In this case, I’m concerned that using .widget h3 as my selector will affect any h3 heading I might ever choose to put in a text widget.

I decide to try .widget-title as the selector and find out that works as well. I feel more confident that this will affect only my widget titles.

Edit Your CSS

CSS consists of a selector and different variables within brackets, each separated by a semicolon. Zip thinks that he wants to give his widget titles a red background, white text, and a bit of rounding at the corners. He also wants the text centered and a bit bolder.

So, you would use the following rules to affect these elements:

background colorbackground: (hex color or color word here for basic colors)
text (font) colorcolor: (hex color or color word here for basic colors)
rounded cornersborder-radius: (expressed pixels)
Align text to centertext-align: center
Make the text heavier (or lighter)font-weight: (expressed as either bold on in points, number only)

Putting all that together in a CSS statement that will affect his widget titles would look like:

.widget-title {background: #b00a38; color: white; border-radius: 10px; text-align: center; font-weight: 500;}

Did it work?

Yes, you can see that it did. Zip’s only complaint is that he initially tried setting the font-weight to 700 and it didn’t work. That’s likely because we don’t have a font that strong installed for this particular font. We’ll address that later as we haven’t come to fonts yet in this series.

Here’s a tip: When entering your CSS make a comment at the top. Adding some text in /**/ will not get processed. If you enter a lot of CSS this can help a great deal if you need to find it later. For instance, Zip’s going to enter /*change the font color and image for the tabbed widget*/ above his CSS so he can find it easier if he has to edit it in the future.

How will I know if I have written my CSS wrong?

It depends on what you mean by “wrong.” If your CSS is entered incorrectly — that is, you missed brackets or your syntax is otherwise messed up — the CSS area will alert you by coloring it red and adding a little red circle with a white x. That’s fortunate; I recall when it didn’t do that.

But what if I want to stick an image behind or next to my widget titles?

OK, suppose Zip wants to add a little blue star (for example) behind his widget titles. He’d have to do upload an image to his media and copy its URL, then do something like this:

.widget-title {background-image: url(https://www.slothverse.com/wp-content/uploads/2020/08/Copy-of-sloth-background-retro.png); color: white;}

That star image is so tiny, he can barely see it! But if you’re going to use a background image, you need to use come other variables as well:

  • background-size: either cover or contain. Cover will cover the entire background with the image, contain will contain the entire image in the available space.
  • background-repeat: repeat or no-repeat.
  • background-position: where you want your background positioned. right, left, center? Left center, for instance will center your background vertically and place it to the left horizontally.

So, for instance, Zip adds the following:

.widget-title {background-image: url(https://www.slothverse.com/wp-content/uploads/2020/08/Copy-of-sloth-background-retro.png); color: black; background-size: contain; background-repeat: no-repeat; text-align: center; background-position: left center; }

And gets this:

Hmmm. He sort of likes having a little image, but isn’t sure about the star. It’s something he might play around with a bit more.

But What if I Want to Give Every One of My Widgets a Different Image Next to it?

OMG! We’re picky now, aren’t we? This is supposed to be a beginning tutorial! There’s a way to do that, but it involves being able to give each widget its own CSS selector.

Zip wants to stick sloths by some widgets, stars by some, planets by some… Do I recommend this? I don’t know. It could add some loading time to load all of those little images for every widget.

But if he wants to, he can install the widget CSS classes plugin.1 After configuring its settings, if he adds a widget, he’ll now find a CSS class area at the bottom of every widget he adds:

Enter a CSS class (without the dot) and make sure it’s something unique that’s not going to be duplicated elsewhere.

So the selector he’ll want to edit to affect only his widget titles will be .planet-widget .widget-title. If I just choose .planet-widget as my selector, my image will be applied to the background of the entire widget.

To Zip, the image looks too tiny, though, so we’re adding some 20px of padding here by using padding: 10px. Now our image will fill that space.

Here’s what Zip added:

.planet-widget .widget-title {background-image: url(https://www.slothverse.com/wp-content/uploads/2020/08/Copy-of-Copy-of-sloth-background-retro.png); color: black; background-size: contain; background-repeat: no-repeat;  background-position: right center; padding: 20px; color: #b00a38; font-weight: bold;}

And here’s the result:

Of course, he’ll have to apply the CSS class planet-widget to any widget where he wants this style applied. And he’ll have to give other widgets a unique CSS class if he wants a different style applied.

And how does it look on mobile? We check, and it actually looks OK on the phone! Make sure you check changes like this on various devices to ensure they look the way you want.

So now that he’s learned about tyling widget titles with CSS, Zip has some work to do to make sure the rest of his widgets have some similar styling. Oh, no…now Zip is eyeballing those icons. He probably wants to make those each a different color, too:(

How many hot cups of coffee does this post or page deserve?

Click on an icon to rate it.

Average rating: 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Care to share?

We are sorry that you found this post to be like a weak cup of decaf.

Let us improve this post!

Tell us how we can improve this post?

References and Footnotes
  1. You can read about how to add a plugin here.[]
Cheryl
Cherylhttps://www.caffeinejournal.com
Cheryl is a former Occupational Therapist and WordPress enthusiast who became a writer in some parallel universe and occasionally, but infrequently, publishes things in this one. She writes two blogs (or is it three) which she won't quit because she knows that blogs, in her case, are like a hydra and if she cuts one off two more will take its place. When she's not doing that, she enjoys hiking, cycling, kayaking (formerly fast, now ebike), messing around with Adobe illustrator, making assorted things, meditating (though she wouldn't call that "like," and reading. She normally doesn't speak about herself in the third person, but she sometimes uses "we" in the royal sense while writing this blog. She lives in Poulsbo, WA with her spouse, her youngest adult daughter, a very old mutt, and a Siamese cat.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You may also be interested in:

Sloth Sets up Google Site Kit

Zip has installed Google Analytics and also configured it via Google Tag Manager. Let's take a look at Google Site Kit, its advantages and disadvantages, and how to install it.

Let’s Setup Google Tag Manager

So, Zip set up GA4 for some reason. Since we're talking about analytics, let's go ahead and install Google Tag Manager and set up some pageview tags.
Share via
Liked it? Follow us on social media!
Thanks for sharing!
If you found this post worth sharing, consider following us on social media (if you don't already).
And if you have something you would like to share, consider submitting a post. Find out more here.
Send this to a friend