'on demand' press75 theme: unclear text against backgrounds

  • Author
    Posts
  • #859542

    markjagdev
    Member

    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.

    #859802

    timethief
    Member

    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.

    #859806

    markjagdev
    Member

    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.

    #859807

    timethief
    Member

    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

    #859811

    markjagdev
    Member

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

    #859817

    timethief
    Member

    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.

    #859821

    markjagdev
    Member

    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! ;)

    #859822

    timethief
    Member

    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.

    #859824

    markjagdev
    Member

    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.

    #859825

    timethief
    Member

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

    #859928

    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.

    #859929

    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.

    #859938

    markjagdev
    Member

    @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

    #859955

    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;
    }
    #859956

    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;
    }
    #859957

    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.

    #859958

    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;
    }
    #859959

    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.

    #859960

    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.

    #859961

    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.

The topic ‘'on demand' press75 theme: unclear text against backgrounds’ is closed to new replies.