Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
ptytomas

Different color for title and blog content

Question

13 answers to this question

Recommended Posts

  • 0

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>

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


Link to post
  • 0
.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.


If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
Posted (edited)
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

Edited by ptytomas

Share this post


Link to post
  • 0

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.


If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
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

Share this post


Link to post
  • 0
Posted (edited)

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.

Edited by rwp

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
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!

 

Share this post


Link to post
  • 0

Making the font black:

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

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


If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

 


If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
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

Share this post


Link to post
  • 0

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

 


If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
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 🙂

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...