Wordpress Font Issue

Juneberry

Reputable
Jul 8, 2019
249
57
43
29
New Jersey
FP$
844
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

Up-and-Coming Sensation
Jan 20, 2019
374
151
58
ellimccale.com
FP$
1,475
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.
 

Elli

Up-and-Coming Sensation
Jan 20, 2019
374
151
58
ellimccale.com
FP$
1,475
Oh! Sorry, quick CSS lesson then:

css-syntax.png


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):

CSS:
.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:

 

Elli

Up-and-Coming Sensation
Jan 20, 2019
374
151
58
ellimccale.com
FP$
1,475
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).
 

Elli

Up-and-Coming Sensation
Jan 20, 2019
374
151
58
ellimccale.com
FP$
1,475
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:

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