Struggling to change font colour

Author Posts

SSUL

Hi there,

I had initially installed Microthemer to make my blog posts font white when clicked on (not on the home page) but there was an issue recently and we had to deactivate all plugins. However, I can’t seem to change it back to the same settings now. Could you please assist? Thanks


Sebastian

Sure, I’m happy to help. If you can send me a link a blog post that should be white I will check the CSS Microthemer is applying to your pages and see if I can suggest a fix. If you updated your theme, the HTML code may have changed, which would require an update to the CSS. Or, it may be something else…

Cheers,
Sebastian


SSUL

Thanks, Sebastian. So the website is communityonfriday.net, and I basically need the content of all the blog posts to be white because it’s not readable in the current color on the current background.


Sebastian

Thanks, I can see that your theme now applies the following CSS style:

p {
    color: #5d5d5d;
}

This sets all paragraphs to a mid grey color. It overrides the white color you have set on the #primary element, which would normally cascade down to paragraphs, if it were not for the presence of the style rule above that specifically sets color on paragraphs.

To fix this, you need to update the selector code for your “Primary” selector. Change it from:

#primary

To:

#primary, #primary p

You can edit selectors via the selectors menu at the top left.

I hope that helps!

Cheers,
Sebastian


SSUL

It does, thank you! It worked on the blog posts, but not the sliders on the side widgets of the page. Do you know why that is?


Sebastian

Ah, I see your theme also sets color in the sidebar. And also, the white is applying to your home page summaries. So I have an updated selector for your to use. Replace as you did before but use:

body:not(.home) #primary, 
body:not(.home) #primary p,
#secondary *

This targets main text and paragraphs, but not on the home page, and anything inside the sidebar.

Cheers,
Sebastian


SSUL

Thanks a lot Sebastian! That worked with everything except the mobile site, no idea why. Would I need to edit the same selector?


Sebastian

Hey,

Could you post a link to the page where the text is the wrong color on mobile?

Thanks,
Sebastian


SSUL

Sure Sebastian, it’s basically any blog post (http://communityonfriday.net/looking-at-water-through-the-lenses-of-kerbala-part-one/) I also have screenshots but not sure how to share them here, if you need them


Sebastian

Ah, I see now that your site loads different styles for actual mobile phones, rather than for smaller screen sizes using media queries. So when I checked in Chrome on my laptop, by shrinking the window, I didn’t see the white background that I now see on my phone.

Do you have a particular plugin that enables this functionality? If so, you could try tweaking the settings / disable it. It’s hard to say what CSS you need to change, as I can’t inspect the code of the page using my phone.

Cheers,
Sebastian


SSUL

You were right, it was another plugin that had changed the theme of the mobile site to one with a white background. Thank you!

However, the selector I changed initially seems to have worked on everything except when you search for something on the website (http://communityonfriday.net/?s=patience). You can see the blog post title, then a gap, then continue reading, but if you highlight the gap there’s actually text in white there


Sebastian

Hey, sorry I thought I had already replied to this. Do you want to make the white background transparent, or the currently invisible white text darker?

Thanks,
Sebastian


SSUL

No worries, Sebastian. I’d prefer to make the current white font darker so it can be seen


Sebastian

OK, this can be accomplished by updating your selector yet again to:

body:not(.home) #primary, 
body:not(.home):not(.search-results) #primary p, 
#secondary *

By adding :not(.search-results) you exclude the primary section on the search results page.

You must login or register to reply to this topic.