Unable to change the background color of blog posts page to white and text to black

[Jiwya]

I  tried to edit the theme such that the background color was white and text color was black, This worked for the headings but not the body of the text. Both in the main blog posts page as well as the individual blogs

[websensepro · Accepted solution]

@Jiwya , try this 

<style>
.article-card__excerpt, .article-card__info, .full-unstyled-link {
    color: black !important;
}
.card--card.card--media>.card__content {
    background: white !important;
}
article.article-template {
    background: white !important;
}
.article-template__title, .caption-with-letter-spacing, .share-button__button, .share-button__fallback button, .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in p {
    color: black !important;
}
</style>

[Jiwya]

@websensepro can you assist here?

[websensepro]

Hi @Jiwya ,

<style>
  .main-blog.page-width.section-template--18454066528491__main-padding {
    background-color: white !important;
  }

  h1.title--primary.scroll-trigger.animate--fade-in {
    color: black !important;
  }
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[Jiwya]

Under which section should I put this code? base.css or theme.liquid?

[websensepro]

Just like you pasted the code for the previous query. You can paste the code for this in the same manner

[Jiwya]

The background of the page did change to white, but here's the problem:

The body of the text is not changing to black, even after setting the black color in the theme:

And when I go inside each blog: the background is still black with white text

What I want for is complete white background and black text for both the blog posts main page and each individual blog

[websensepro]

@Jiwya ,

Try this: 

<style>
.article-card__excerpt, .article-card__info, .full-unstyled-link {
    color: black !important;
}
.card--card.card--media>.card__content {
    background: white !important;
}
</style>

[websensepro]

@Jiwya , please let me if you need my assistance if it don't work. 

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[Jiwya]

Can you provide an alternate code that only works for the blog page and does not affect the entire website?

[websensepro]

@Jiwya try this:

<style>
.article-card__excerpt, .article-card__info, .full-unstyled-link {
    color: black !important;
}
.card--card.card--media>.card__content {
    background: white !important;
}
article.article-template {
    background: white !important;
}
.article-template__title, .caption-with-letter-spacing, .share-button__button, .share-button__fallback button, .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in p {
    color: black !important;
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[Tech_Coding]

Hello @Jiwya 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
   .main-blog .card__content h3 a, .h5, p, .article-template h1.article-template__title, span, p {
       color: #000 !important;
   }
   .card.article-card.color-background-1.gradient, .main-blog.page-width.section-template--18454066528491__main-padding, article.article-template {
          background: #fff !important;
    }
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Jiwya]

This code is working but the headings on the individual blog pages are still remaining white. Also, when I add this code it messes up the other colours of the entire website.

[Tech_Coding]

Please remove the code that I gave you, I will provide you another code.

[Tech_Coding]

Hello @Jiwya 
Sorry for my mistake that I did and Please add this code

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
   article.article-template {
      background: #fff !important;
   }
   h1.article-template__title {
       color: #000 !important;
   }
   article span.circle-divider.caption-with-letter-spacing time {
      color: #000 !important;
   }
   article .article-template__content.page-width p, h2 {
       color: #000 !important;
   }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[BSS-TekLabs]

- Here is the solution for you @Jiwya 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
.article-card__excerpt, .article-card__info, .full-unstyled-link {
    color: black !important;
}
.card--card.card--media>.card__content {
    background: white !important;
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSS-TekLabs]

<style>
article.article-template {
    background: white !important;
}
.article-template__title, .caption-with-letter-spacing, .share-button__button, .share-button__fallback button, .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in p {
    color: black !important;
}
</style>

[BSS-TekLabs]

[BSS-TekLabs]

Finnal code @Jiwya 

<style>
.article-card__excerpt, .article-card__info, .full-unstyled-link {
    color: black !important;
}
.card--card.card--media>.card__content {
    background: white !important;
}
article.article-template {
    background: white !important;
}
.article-template__title, .caption-with-letter-spacing, .share-button__button, .share-button__fallback button, .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in p {
    color: black !important;
}
</style>

[Jiwya]

This page is working fine, but when I open the blog. I want that page to be white background and black text:

This page under the blog tab

[BSS-TekLabs]

<style>
.article-card__excerpt, .article-card__info, .full-unstyled-link {
    color: black !important;
}
.card--card.card--media>.card__content {
    background: white !important;
}
article.article-template {
    background: white !important;
}
.article-template__title, .caption-with-letter-spacing, .share-button__button, .share-button__fallback button, .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in p {
    color: black !important;
}
</style>

please try this code @Jiwya 

[Jiwya]

Thank you. Could you also help with aligning the font to left for the blog page?

[BSS-TekLabs · Accepted solution]

<style>
.article-card__excerpt, .article-card__info, .full-unstyled-link {
    color: black !important;
}
.card--card.card--media>.card__content {
    background: white !important;
}
article.article-template {
    background: white !important;
}
.article-template__title, .caption-with-letter-spacing, .share-button__button, .share-button__fallback button, .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in p {
    text-align: left !important;
    color: black !important;
}
</style>

Can you try this code @Jiwya 

[websensepro · Accepted solution]

@Jiwya , try this 

<style>
.article-card__excerpt, .article-card__info, .full-unstyled-link {
    color: black !important;
}
.card--card.card--media>.card__content {
    background: white !important;
}
article.article-template {
    background: white !important;
}
.article-template__title, .caption-with-letter-spacing, .share-button__button, .share-button__fallback button, .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in p {
    color: black !important;
}
</style>

[Jiwya]

Thank you. Could you also help with aligning the font to left for the blog page?