'on demand' press75 theme: unclear text against backgrounds

I am editing my website http://www.evolutionarycities.com and have just started using css editor out of necessity re: 'on demand' press75 theme.. The text against different backgrounds rarely shows up well.

Firstly I think this is because the default text is a light grey color. I managed to change some of the text to black which you can view on my website. I used the following code:

body {
color:#000000;
}

I also changed the links to a bright cyan using this code:

a:link,a:visited {
color:#E0FFFF;
}

As you can see there is still alot of text which is of a certain type that is still light grey! How do I find out the code for changing this to a clearer color?

Secondly I think the difficulty reading the text whether I go with the light cyan or black - just as an extreme dark i.e. black doesn't show up on dark backgrounds, the cyan doesn't show up on bright backgrounds.. so I started looking round for a way to make all text have a partially opaque/transparent box underneath the text to overcome this issue. I don't know if this is possible under custom design css on wordpress.com but learning from anyone here the css code for that kind of edit would be hugely appreciated. It seems a waste of a potentially great theme to have to stick to a uniform background in order to see the text :/

Thanks timethief. That's totally fine, I am working on some other bits n pieces so I didn't expect a reply on the weekend or so soon. Really interested to learn from others with much better CSS skills than I & look forward to the support in the coming days. Enjoy the rest of your weekend guys.

P.S. re: theme support
This is jst to let you know that if you require themes support in the future, your theme is a premium theme and we Volunteers answering questions on this forum have no asscess to or knowledge of how they are designed to operate. When you purchased your premium theme what came with that purchase was support directly from the theme designer in the Premium Theme Support Forum. There is a link for the specific Premium Theme support forum under Appearance -> Themes in your blog’s Dashboard

It is actually Monday morning 00:35 in London... The weekend was yesterday for me! Anyway, and as you know, I am totally fine with waiting a few days or however long it usually takes to resolve these queries.

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:

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:

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:

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:

I started looking round for a way to make all text have a partially opaque/transparent box underneath the text to overcome this issue. I don't know if this is possible under custom design css on wordpress.com but learning from anyone here the css code for that kind of edit would be hugely appreciated.

You can do this with a CSS3 rule. Note that CSS3 is new and not supported by all older browsers. There are some rules you can add that will try to help with that though. Here is an example of setting the background of the post content area to back with a transparency of 40%:

@designsimply this is brilliant! The 40% transparent background works very well. I had a think about the colours I want to use on the text for the sidebar and the main section. I want to use light cyan (#E0FFFF) and turquoise (#4EE2EC) for the dark sidebar and black headers and dark green (#254117) for the 'post date, categories & comments'. On each post and page I want the title header to be black. I also think light cyan on the text that is shaded by the 40% transparent background works best in the darker areas of the lighter main section. To change the sidebars light cyan and turquoise I added the other text in the first css codes you shared for all the grey shades - that had the keyword 'sidebar' making these changes:

I know by doing this I probably made some mistakes, as this is my first lesson in css!! It has been a little frustrating because while your code worked very well and responded to my edits the first time I previewed it, I think after I saved it, further edits weren't showing up in preview, so I didn't know whether my changes were taking effect or not :/ I cleared a day or two worth of my history and this seemed to help, but it has left me uncertain, and your help confirming the changes/corrections to this css code I post would be invaluable. Thanks for working on this so much already :)

The other thing I wanted to see successfully implemented is the links to not be in cyan but in black and changing to turquoise when hovered over. Is that an easy edit?

I want to use light cyan (#E0FFFF) and turquoise (#4EE2EC) for the dark sidebar and black headers.

I'm not completely sure which parts of the text you want light cyan and which you want turquoise based on this description. If you wanted the headings turquoise and the text and links light cyan in the sidebar only, then you could do something like this:

To make the post meta, including the post date, categories & comments, on the On Demand home page, posts, and pages dark green, first find the "li.date" selector in your current custom CSS and remove that selector from the list. Then add this:

It has been a little frustrating because while your code worked very well and responded to my edits the first time I previewed it, I think after I saved it, further edits weren't showing up in preview, so I didn't know whether my changes were taking effect or not :/

I think what happened in this case is you picked something you thought would be easy but it really wasn't as simple as it looked because of how many different shades of gray the theme you picked was using in so many different places. It takes time to sort something like that out, especially when you're new at it!

If you aren't already using something like Firebug for Firefox or the built in web inspector that comes with Chrome or Safari, then I'd recommend checking them out. They let you right-click on elements on the page and it shows you all the relevant CSS that is applied to that thing you clicked on. Then once you get the hang of how some of the rules affect each other, you'll see how it all comes together.

It also might be helpful to break down the questions into smaller pieces.

That color code isn't valid because it's using a capital letter "O" instead of a numerical zero "0" for the 2nd character, and that's why it wasn't working. That could have been what was causing some of your frustration earlier. Watch out for typos like that and if you find something that isn't working, try a simpler test on something you know should work and then copy and paste the color code instead of re-typing it.

The other thing I wanted to see successfully implemented is the links to not be in cyan but in black and changing to turquoise when hovered over.

That should be easy enough. Just go through the rules you have at this point, separate out any selectors that have a:link and a:visited in them that you'd like to change, put them into one block, and change the color code to #000000. Then repeat that for any selectors that have a:hover in them, and change the color code to #4EE2EC.

Brilliant!!!! It all worked perfectly :) Later I will have a go at the separating out the a:link and :hover sections. I had a brief go but wasn't successful. Could you give me one or two examples and I will follow that for the others? I would love to get all links in black and cyan (sidebar and main) to go turquoise, and all links in turquoise in the body text of posts/pages to be cyan and go turquoise. I am really impressed with your skills, I am also asking the designer of the theme for help and he hasn't been able to help me so far :/ I am glad I have wordpress support & you designsimply helping me make my site better, thanks :)

I would love to get all links in black and cyan (sidebar and main) to go turquoise, and all links in turquoise in the body text of posts/pages to be cyan and go turquoise.

I think you may need to break it down even more, partly because you have so much custom CSS already and you've requested a bunch of things at once that it's easy to get it confused. For example, what you wrote above sounds to me like you want to make all links in the sidebar black, but that will make them unreadable since your current sidebar background is nearly black already.

So, let's break it down into smaller pieces. Here's a small example showing how to change all of the sidebar link and link hover colors in the On Demand theme:

Sorry for being unclear before, I meant all the sidebar text to turn from cyan to turquoise when hovered over. This now works with your edit. Thank you. Re: the other edits, I have spent over 30mins attempting to follow this logic for the other things I need to change but no success :/ Can you help me?

1. I need the hyperlinks on the main page for the titles (currently black) and category descriptions (currently green) of each post to change from their current colour to turquoise when hovered over.
2. I need the hyperlinks in the body text of each post/page to turn turquoise when hovered over.
3. I noticed that when I use the quotation mark symbol for quoting in a post that the text quoted is published as black not light cyan - my current colour for posts and pages body text. What would the css be for turning quoted text from black to light cyan?

3. I noticed that when I use the quotation mark symbol for quoting in a post that the text quoted is published as black not light cyan - my current colour for posts and pages body text. What would the css be for turning quoted text from black to light cyan?