CSS / HTML for changing text color in body

body, input, select, textarea, input[type="date"], input[type="time"], input[type="datetime-local"], input[type="week"], input[type="month"], input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, .image-navigation, .comment-navigation, .sidebar .widget a, .wp-playlist-light .wp-playlist, body .wp-playlist-playing, body .wp-playlist .wp-playlist-playing, body .wp-playlist .wp-playlist-playing .wp-playlist-caption, body .wp-playlist-current-item .wp-playlist-item-title, body .wp-playlist-item:hover, body .wp-playlist-item:focus, body .wp-playlist-item:hover .wp-playlist-caption, body .wp-playlist-item:focus .wp-playlist-caption, span.price ins, p.price ins {
   color: #FFFFFF;
}

It’s a wall of code, but to do it that’s what you need to add in.

Greetings,

I attempted to add the code, but it didn’t work. I addedd it in the additional CSS, and as I said it didn’t work.

Is that still in Additional CSS? I don’t see any additional CSS output to the pages. You could directly edit the style.css rule responsible (line 171), but it’s not recommended because theme updates will overwrite the change. You may need to flush your browser cache to see the effect of any changes. CSS files tend to be aggressively cached.

Re-added the code, and cleared my browsing history and still no change. You can take a look again

Yes, I see it now. I may have simply missed it last time. Oddly, it doesn’t show up in my browser’s element inspector tool. Its syntax appears correct, so it should appear. You might try this in Additional CSS instead:

p {
    color: #fff !important;
}

Interesting when I hit enter to add the extra code you sent me it changed the text to completely white except it didn’t change the footer text color. I was also wondering what the process would be for changing the link color in the body of the text since the links were already white I don’t want there to be confusion as to what is a link and what isn’t.

Add .site-info to the selector, as in

p, .site-info {
    color: #fff !important;
}

This should deal with link color, unless more specific rules override it

a {
    color: blue !important;
}

“blue” isn’t actually a good choice IMO, set it to any color you like. FYI, the links in the footer are #c1c1c1 if you want that kind of appearance.

I’m happy to help you with CSS, but you ought to try using your browser’s element inspector developer tool to help you work out these changes for yourself. It’ll be more productive than waiting for answers from us ?? It has a element picker function where you click on elements on the page. The picked element’s HTML is highlighted in the tool and all applicable CSS is shown as well. You can experimentally change the CSS, disable, or add other rules and immediately see the results. No changes will persist unless you copy the changes to the Additional CSS section.

Beware, as this tool allows your to endlessly tweak the appearance of various elements of your site, it can become a significant time suck to fine tune everything until it’s perfect. I find it rewarding and enjoyable, but it can take up a lot of time if you let it ??

Greetings,

Thank you for your assistance. FYI I have little to 0 knowledge as it pertains to CSS. I am a lot more about HTML than CSS. I don’t usually have to ask these types of questions as the Themes usually have a way to do this. This is the 2nd or third time in many years I have needed to ask questions about CSS. Lastly, I was wondering as it pertains to the link color change is there a way to exclude the color change for the hyperlinks of the different pages. e.g. Home, Bio ETC

Everyone here started from 0. Even with 0 knowledge you can likely effect some changes. There are all sorts of things you can adjust if you were so inclined. Themes cannot provide options for everything, it’s why the additional CSS section is provided. The tool will auto-suggest many valid values so you can almost guess at things and make progress. I think it’s worth the effort to at least try making your own changes. You can always come here if you get stuck. Or come here without trying, that’s fine too. For more detail on using the tool, it you’re so inclined, see https://zapier.com/blog/inspect-element-tutorial/ I won’t pester you any more about expanding your skill set, I’m sure you’re quite skilled in other things.

To use different colors on different pages, first lose the !important modifier from my previous a color rule. It’ll prevent us from overriding it with subsequent rules. Examine the page’s source HTML and find a unique HTML tag attribute (usually class or id) you can use as a specific selector for that page. Usually the body tag will have a distinct class like page-id-1234. Use the attribute value in a CSS rule placed below the generic a rule. For example:

a {
    color: blue;
}
.page-id-1234 a {
    color: green;
}

Note the . dot in front of class selector values, it’s important. If you can find a distinct ID attribute, it’s even better. ID attribute values are preceded with a # hash instead of a dot.

Thank you for your insight and suggestion to learn more about CSS on my own. At this time since its rare that I need this type of help it would not be a good use of my time to learn CSS more in depth. If it ever comes up where I would need it more frequently I would definitely consider it, but as I said its rare that I have to use CSS.