Wordpress Font Issue

[Juneberry]

For some reason, I can't adjust the color of fonts in widgets that are on my blog. It doesn't blend in at all and is barely legible. Does anyone know how to change the color of a widget when using a theme that it doesn't fit with?

Also sorry if this is the wrong area, I was stuck between here and software.

 

[Elli]

Is the widget created by a plugin? If so, plugins often come with their own styles. You can overwrite them in your theme's stylesheet by using the same selector, and adding your preferred styles.

To find the selector, use your browser's inspect tool by right-clicking on the element, then selecting "Inspect" from the context menu.

Once you have the selector, you can go to Appearance > Theme Editor > styles.css (make sure the theme you're wanting to edit is selected from dropdown in the top-right). Scroll to the bottom of the code area, and add your custom styles.

Then click "Update File" under the code area.

 

[Juneberry]

What do I do if I don't know how to style?

 

[Elli]

Oh! Sorry, quick CSS lesson then:

This is basically exactly what you'll be doing, but instead of "p" as the selector, it will be the widget elements. You will use the property "color" to set the text color in your widget.

All CSS declaration blocks begin with a selector ("p" in this example, which is the paragraph tag), followed by an opening curly brace, styling properties, and end with a closing curly brace as shown in the syntax above. This is another example of a declaration, which uses a class as the selector (classes start with a period):

.class-name {
  background-color: white;
  color: black;
}

All styling properties contain a property name, a colon, a property value, and a semicolon to end the line. There are lots and lots of properties, with multiple values each.

If you'd like a more in-depth explanation, I recommend HTML Dog:

CSS Tutorials | HTML Dog

www.htmldog.com

 

[Juneberry]

I see! I'm a little worried since I usually destroy things when editing code, but with this I'm sure to succeed safely!

 

[Elli]

As long as you're careful to use the syntax above and add your new styles at the bottom of your stylesheet, you shouldn't break anything too badly. Nothing you can't undo, anyway.

If you run into trouble, let me know with a link to your site and I can help you out (others can, as well).

 

[overcast]

Check your WordPress theme's style.css. You can also override those styles.

 

[Juneberry]

I tried about ten times yesterday and had no luck. @Elli can you take a look, or someone else?
Link is here

 

[Elli]

Great! Which widgets are you trying to change, and how? I can provide the CSS for it.

 

[Juneberry]

The subscribe thing. The part that says how many people are already following/subscribed is too dark to read on my theme.

 

[Elli]

Interestingly, there is some CSS attempting to style this, but it doesn't have a valid color value. Hard to say what's generating it without snooping around in your dashboard (which I won't ask to do), but if you add this to the styles.css file for your current theme, it should make all paragraphs for your sidebar widgets white:

#secondary .widget p { color: white !important; }

 

[Juneberry]

It still seems to only work on paragraphs, and not on the particular part...

 

[Elli]

Hmm, I'm seeing it. Can you try clearing your cache and refresh?

 

[Juneberry]

Aha! It did work! Thank you for that reminder, and for fixing my issue for me

 

[Elli]

You're welcome!