The text against different backgrounds rarely shows up well.
That makes sense if the background color is lighter. The best way to change all of the text showing up as a specific color is to check the theme stylesheet, search for all the selectors that use that color, and then add a new rule to your custom CSS with just those selectors to set a new color for them. I'll walk through an example:
First, I checked the On Demand original stylesheet (it's linked on the Appearance → Custom Design → CSS page).
https://s-ssl.wordpress.com/wp-content/themes/premium/on-demand/style.css?m=1333189900g&minify=false
I see that the body rule sets the color to #555 there. So I copied all of the places "color: #555" is set and I came up with the following way to change all of those settings from "#555" to black at once:
body,
#navigation .menu li ul a:link,
#navigation .menu li ul a:visited,
#sidebar input#s,
#author,
#email,
#url,
#comment {
color:black;
}
Now, there are a few things to consider in your case. First, if you check the On Demand theme stylesheet, you'll see that it uses a ton of different shades of gray such as #444, #555, #666, #777, #888, #999, #AAA, #CCC, etc. So to change the text color in this theme, you need to update the CSS for every one of those cases. In addition, in your case, your background image is light behind the content area but it's still dark behind the sidebar. That means you will need to change just the selectors that affect the content area and not the sidebar. In cases where the content area and sidebar elements are using the same color for the same kind of selector, you may need to add a more specific rule overriding the color for just the sidebar n some cases. This is because your background image is light or dark in different areas and that's different compared to how the theme itself is setup. It's totally doable to change all of these colors, it will just take a little work. So, continuing with the example above, here is all of the CSS I found using the gray color shades I mentioned above:
a:link,
a:visited,
a:hover,
#header-left p,
#header input#s,
p.gallery-description,
#sidebar h3,
#footer-content h3 {
color:#444;
}
body,
#navigation .menu li ul a:link,
#navigation .menu li ul a:visited,
#sidebar input#s,
#author,
#email,
#url,
#comment {
color:#555;
}
li.date,
.widget,
.widget_twitter .timesince,
.widget_flickr a,
#footer-content p,
#footer-content a {
color:#666;
}
a.continue,
#submit,
#paginate a,
#paginate .page-numbers,
.nav-previous a,
.nav-next a {
color:#757575;
}
#navigation .menu li ul a:hover,
li.categories,
li.tags,
li.categories a:link,
li.categories a:visited,
li.tags a:link,
li.tags a:visited,
.comment-meta a,
div.reply a {
color:#888;
}
blockquote {
color:#999;
}
li.comments,
li.comments a:link,
li.comments a:visited {
color:#AAA;
}
li.comments a:hover {
color:#CCC
}
The navigation in your site is still dark, so you probably want to leave any selectors that mention navigation out. Same goes for mention of the navigation, featured posts, sidebar or widgets. I removed mentions of those things and added a new rule to make sidebar links gray still (because your sidebar area has a dark background), and I came up with this:
a:link,
a:visited,
a:hover,
#header-left p,
#header input#s,
p.gallery-description,
#footer-content h3 {
color:black;
}
body,
#author,
#email,
#url,
#comment {
color:black;
}
li.date,
#footer-content p,
#footer-content a {
color:black;
}
a.continue,
#submit,
#paginate a,
#paginate .page-numbers {
color:black;
}
li.categories,
li.tags,
li.categories a:link,
li.categories a:visited,
li.tags a:link,
li.tags a:visited,
.comment-meta a,
div.reply a {
color:black;
}
blockquote {
color:black;
}
li.comments,
li.comments a:link,
li.comments a:visited {
color:black;
}
li.comments a:hover {
color:black;
}
#sidebar a:link, #sidebar a:visited {
color:#AAA;
}
Note that this CSS is specific to the background image currently being used at http://evolutionarycities.com/ which has a lighter color for the content area and a darker color for the sidebar.
Try it out and see what you think. Note that if you change the background image, you may need to adjust the CSS accordingly, especially if the sidebar background color is different.
designsimply
mrkcollection