Struggling to change font colour

Author Posts

SSUL August 23, 2021 at 10:21 am

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

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 August 23, 2021 at 12:41 pm

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 August 23, 2021 at 12:44 pm

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 August 23, 2021 at 12:56 pm

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 August 23, 2021 at 1:11 pm

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 August 23, 2021 at 1:25 pm

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 September 7, 2021 at 7:18 am

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

Sebastian September 8, 2021 at 9:16 am

Hey,

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

Thanks,
Sebastian

SSUL September 8, 2021 at 11:17 am

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 September 8, 2021 at 1:44 pm

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 September 15, 2021 at 12:44 pm

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 September 21, 2021 at 7:57 am

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 September 21, 2021 at 11:31 am

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

Sebastian September 21, 2021 at 2:39 pm

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.