Different color for title and blog content

Site URL: https://www.tradeway-global.com/blog/why-it-pays-to-visit-the-factory

Hi there,

I want to customise my blog posts. I want the title to be in a color and the rest of the content to be in a different color, as you can find in the attached screenshots. Right now, if I change the color, the whole post will change colors.

Thank you

Add this to Home > Design > Custom CSS (affect all posts)

.blog-item-title h1 {
    color: red !important;
}
.blog-item-content-wrapper * {
    color: green !important;
}

If you want to apply to certain post, edit post > Add Code Block > paste this code

<style>
  .blog-item-title h1 {
    color: red !important;
}
.blog-item-content-wrapper * {
    color: green !important;
}
</style>

.blog-item-wrapper article.entry {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

.blog-item-wrapper .blog-item-top-wrapper {
    padding-left: 4vw;
    padding-right: 4vw;
}

.sqs-block-content {
    padding-left: 4vw;
    padding-right: 4vw;
}

.blog-item-wrapper .sqs-block.html-block.sqs-block-html {
    background-color: antiquewhite;
    color: black;
}

#footer-sections .sqs-block.html-block.sqs-block-html {
    background-color: #2a3617;
    color: white;
}

Give that a go....... I think that's what you are looking for, we might have to do some more tweaking.

3 hours ago, rwp said:

.blog-item-wrapper article.entry {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

.blog-item-wrapper .blog-item-top-wrapper {
    padding-left: 4vw;
    padding-right: 4vw;
}

.sqs-block-content {
    padding-left: 4vw;
    padding-right: 4vw;
}

.blog-item-wrapper .sqs-block.html-block.sqs-block-html {
    background-color: antiquewhite;
    color: black;
}

#footer-sections .sqs-block.html-block.sqs-block-html {
    background-color: #2a3617;
    color: white;
}

Give that a go....... I think that's what you are looking for, we might have to do some more tweaking.

Yes, that's exactly what I was looking for. However, there's still some tweaking I would like to do, can you help me?

When I added a photo to my post, the photo is still under the green background, I would only the title to have the darker green background. I did a really quick photoshop concept to illustrate what I am talking about.

Secondly, All of the text is in black, except for the first sentence, which is in h2 size. I would like it to also be black. 

Thank you so much for your help, I really appreciate it!

Unfortunately, I can't access that blog post anymore.

Can you provide a link to another one?

Please add in the CSS I provided so we can tweak it from there.

21 minutes ago, rwp said:

Unfortunately, I can't access that blog post anymore.

Can you provide a link to another one?

Please add in the CSS I provided so we can tweak it from there.

Hey there! I really apologize for taking the link offline. Here is the link for the blog post.

https://www.tradeway-global.com/blog/why-it-pays-to-visit-the-factory

So basically, with the default settings, the background is in a beige tone, I want the title part to be in green.

Thank you for your help and for your time! 

Unfortunately, the only way I know how to do it is to have the background be green and then turn the rest tan.

If you can put the code in that I provided, so I can see the issues, we can probably straighten it out.

28 minutes ago, rwp said:

Unfortunately, the only way I know how to do it is to have the background be green and then turn the rest tan.

If you can put the code in that I provided, so I can see the issues, we can probably straighten it out.

Ok, I have just done that. So now we need to figure out how to get the text that says "Here are the 17 reasons" in black and then get the background of the photo in tan.

Once again, thank you very much!

Making the font black:

.blog-item-content-wrapper .preFade.fadeIn {
    color: black;
}

can you send me a screen shot after you add that?

Yes, that solved the issue! Thank you very much! Here's the screenshot from another one of my scheduled blog posts.

Now my last question is, on the blog page, where it shows all my blog posts, I want the background to be tanned. This is the page that I am talking about https://www.tradeway-global.com/blog . You will find a screenshot for what I want to do.

Thank you!

12 minutes ago, rwp said:

Making the font black:

.blog-item-content-wrapper .preFade.fadeIn {
    color: black;
}

can you send me a screen shot after you add that?

Try this, its acting a bit weird on my end, but sometimes it works when the code is actually in place.

.blog-basic-grid.collection-content-wrapper {
    background-color: tan;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.blog-basic-grid--container.entry.blog-item.is-loaded {
    padding-left: 4vw;
    padding-right: 4vw;
}

19 hours ago, rwp said:

Try this, its acting a bit weird on my end, but sometimes it works when the code is actually in place.

.blog-basic-grid.collection-content-wrapper {
    background-color: tan;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.blog-basic-grid--container.entry.blog-item.is-loaded {
    padding-left: 4vw;
    padding-right: 4vw;
}

 

For the sake of simplicity, I decided to give up on changing the colours of the blog posts. However, I still want the grid to be in another color. As of now, I am only using the following code:

.blog-basic-grid.collection-content-wrapper {
    background-color: #f2f6ea;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

I want the text to be in black instead of white. If I can get that working, that will be perfect already. Thank you 

Add in these 3 things

.tweak-blog-basic-grid-width-inset .blog-basic-grid {
    max-width: unset !important;
}

.blog-title.preFade.fadeIn {
    color: black;
}

.blog-date.preFade.fadeIn {
    color: black;
}

49 minutes ago, rwp said:

Add in these 3 things

.tweak-blog-basic-grid-width-inset .blog-basic-grid {
    max-width: unset !important;
}

.blog-title.preFade.fadeIn {
    color: black;
}

.blog-date.preFade.fadeIn {
    color: black;
}

 

That's perfect! Works like a charm, thank you for your help 🙂