Jump to content

Background color change on Column

Recommended Posts

Hi I'm looking to change the background color within a column (see below for an example) however it doesn't seem that I am able to do that within the confines of the current template. Is there a way to add a custom CSS code to make this work? 

Thanks in advance :) 

The Classes.jpg

Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Please give us the URL for the page where you want to change the column color.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Hi there, apologies - the site is still very much in the beginning draft stages, however this is the section I was hoping to address. 

Site information:
https://tangerine-iguana-kwg3.squarespace.com/
Password: MaintainS134!

Current state - doesn't have an option for alternating background color block options. 

The first instance is in the [Home] section of the site, while the other is in the [Shop] section of the site. 

Thanks a lot! 

s.

Screen Shot 2020-10-27 at 9.44.45 AM.png

Screen Shot 2020-10-27 at 9.38.27 AM.png

Screen Shot 2020-10-27 at 9.48.07 AM.png

Screen Shot 2020-10-27 at 9.47.28 AM.png

Link to comment

Add to Home > Design > Custom CSS

div#block-b88c1a14c4b2bb781c7e + .row>.span-4:nth-child(2) {
    background: orange;
}
div#page-section-5f92d38b6b423f1cda189894 .span-12>.row>.span-4:nth-child(2) {
    background: red;
}

 

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

Hi Tuanphan,

Thank you so much for providing the above! I tried the code however it looks like a portion of the column is changed in color and not the full height, any chance you could would advise me on what I could do to make sure the full height of the column is changed in color? 

Thanks a lot, appreciate all the help on this!

S.

Link to comment
On 10/29/2020 at 10:34 PM, Sera said:

Hi Tuanphan,

Thank you so much for providing the above! I tried the code however it looks like a portion of the column is changed in color and not the full height, any chance you could would advise me on what I could do to make sure the full height of the column is changed in color? 

Thanks a lot, appreciate all the help on this!

S.

Try this

div#page-section-5f92d38b6b423f1cda189894 .span-12>.row>.span-4:nth-child(2) {
    background: red;
}
[data-section-id="5f92d38b6b423f1cda189894"] .content-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
[data-section-id="5f92d38b6b423f1cda189894"] .content-wrapper .span-4 {
    padding-top: 20px;
    padding-bottom: 20px;
}

 

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
  • 2 years later...
3 hours ago, Artofkind said:

I am curious where you are finding these page section id's?

If you are not familiar with browser developer tools then try the following.

Check out Heather Tovey's most excellent looking Squarespace ID Finder.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.