Jump to content

Different color for title and blog content

Recommended Posts

  • Replies 13
  • Views 1k
  • Created
  • Last Reply

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
.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.

Link to comment
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!

title.png

Color.png

Link to comment
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! 

How it is.png

How I want it.png

Link to comment
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!

 

Link to comment

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?

 

efa9aed4-4728-4f7d-8769-0b283db7c309.jpg

8dbc8d11-568c-4755-81c8-2d9121bcdfd6.jpg

Blog page.png

Link to comment

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

 

Link to comment
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 

Screenshot 2020-06-29 at 18.53.43.png

Link to comment
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 🙂

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.