Need help? Check out our Support site, then


'on demand' press75 theme: unclear text against backgrounds

  1. Hi guys

    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 in advance for all the help!
    mark

    The blog I need help with is evolutionarycities.com.

  2. Hello there,
    Though Staff do provide support for CSS editing it is Sunday so they may not get to this thread until after the weekend.

  3. 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.

  4. Hope you have a great weekend too. :)

    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

  5. oops yeh thanks for the heads up I will copy-paste my query in the premium theme support forum. Cheers

  6. I'm so sorry I confused you. :( The Premium Themes Support Forum is for themes related issues and there you get lhel form the theme designer.

    This CSS forum is where Staff help those who need CSS editing assistance, regardless of whether or not the theme is a premium theme or a free theme.

  7. No worries timethief, you didn't steel too much of my time as it happens.. in fact you may have saved me some. By posting in two forums I should, in theory, get an answer for this quicker! ;)

  8. I'll bet you won't get an answer more quickly because I don't believe theme designers and Staff are hanging around on weekends, but you could be right.

  9. 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.

  10. Ah .. it's Sunday 4:44PM on this little island of the far west coast of Canada and it's time to make dinner. :)

  11. 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.

  12. 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%:

    .post-content {
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
    background:rgba(0,0,0,.4);
    }

    I found this example at http://css-tricks.com/rgba-browser-support/ and you will see a list of browser support information there as well.

  13. @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:

    .post-content {
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
    background:rgba(0,0,0,.4);
    color:black;
    }
    a:link,
    a:visited,
    a:hover,
    #header-left p,
    #header input#s,
    p.gallery-description,
    #footer-content h3 {
    color:black;
    }
    p.gallery-description
    #sidebar h3 {
    color:#E0FFFF;
    }

    body,
    #sidebar input#s,
    #author,
    #email,
    #url,
    #comment {
    color:#E0FFFF;
    }

    li.date,
    #footer-content p,
    #footer-content a {
    color:#254117;
    }

    a.continue,
    #submit,
    #paginate a,
    #paginate .page-numbers {
    color:#C35817;
    }

    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:#254117;
    }

    blockquote {
    color:black;
    }

    li.comments,
    li.comments a:link,
    li.comments a:visited {
    color:#254117;
    }

    li.comments a:hover {
    color:black;
    }

    #sidebar a:link, #sidebar a:visited {
    color:#EOFFFF;

    }

    li.date,
    .widget,
    .widget_twitter .timesince,
    .widget_flickr a,
    #footer-content p,
    #footer-content a {
    color:#4EE2EC;
    }

    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?

    Thanks again
    mark

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

    #sidebar h3, #sidebar h3 a:link, #sidebar h3 a:visited {
        color: #4EE2EC;
    }
    
    .widget_twitter .timesince {
        color: #E0FFFF !important;
    }
    
    #sidebar a:link,
    #sidebar a:visited,
    #sidebar p,
    .widget_twitter {
        color: #E0FFFF;
    }
  15. and dark green (#254117) for the 'post date, categories & comments'

    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:

    .post-meta {
        color: #254117;
    }
  16. On each post and page I want the title header to be black.

    Add this:

    .post-details h2 {
        color: black;
    }

    Note this rule affects all post titles including the home page, posts, and pages.

  17. 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.

    Try something like this:

    .post-content,
    .post-content a:hover {
        color: #E0FFFF;
    }
    
    .post-content a:link,
    .post-content a:visited {
        color: #4EE2EC;
    }
  18. I know by doing this I probably made some mistakes, as this is my first lesson in css!!

    You're doing great! Hang in there.

  19. 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.

  20. When I checked your code, I found that you had the following saved:

    #sidebar a:link, #sidebar a:visited {
    color: #EOFFFF;
    }

    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.

  21. 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.

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

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

    #sidebar a:link,
    #sidebar a:visited {
        color: COLOR_ONE;
    }
    
    #sidebar a:hover {
        color: COLOR_TWO;
    }

    Replace COLOR_ONE with the link color you want and COLOR_TWO with the hover link color you want, then add the result to the bottom of your Appearance → Custom Design → CSS page.

  24. 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?

    Thanks again
    mark

  25. Sorry quick correction: on point #2 the hyperlinks in the body text are currently turquoise. I need them to be cyan and turning to turquoise when hovered over.

  26. 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?

    Sure! And breaking it down into smaller questions like you've already started to do will make it much easier to help you! :)

    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.

    Here's the CSS to change post titles on the home page from black to turquoise on hover:

    .post h2 a:link,
    .post h2 a:visited {
    	color: black;
    }
    
    .post h2 a:hover {
    	color: Turquoise;
    }

    Here is the CSS to change the post meta data links including categories and tags to green for the links and turquoise for the link hover color:

    li.categories,
    li.tags,
    li.categories a:link,
    li.categories a:visited,
    li.tags a:link,
    li.tags a:visited {
    	color: #254117;
    }
    
    li.categories a:hover,
    li.tags a:hover {
    	color: Turquoise;
    }

    Note that the "Turquoise" color name might be slightly different than the "#4EE2EC" color code you were using before. You can pick which one you like best.

  27. 2. I need the hyperlinks in the body text of each post/page to turn turquoise when hovered over.

    Sorry quick correction: on point #2 the hyperlinks in the body text are currently turquoise. I need them to be cyan and turning to turquoise when hovered over.

    .post-content a:link,
    .post-content a:visited {
    	color: LightCyan;
    }
    
    .post-content a:hover {
    	color: Turquoise;
    }
  28. 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?

    blockquote {
    	color: LightCyan;
    }
  29. Everything works perfectly! Massive thank you for your help I am taking this all on board and learning what you have taught me here. :)

  30. please i need help
    i have on demand theme
    and i wanna move the header logo to the center of my blog
    please help me guys

Topic Closed

This topic has been closed to new replies.

About this Topic