Jump to content

How can I change the background color for just one section on a page, without changing the theme?

Recommended Posts

I'm not sure about doing this with pure CSS (my quick attempts didn't work very well) but you can achieve this with custom Javascript along these lines:

<script>
  var sections = document.getElementsByClassName('section-background');
  sections[0].style.backgroundColor = 'blue'; //this will change the 1st section background
  sections[1].style.backgroundColor = '#fff'; //this will change the 2nd section background
  //sections[3]... is next section
</script>

I've left some comments in there, but basically you've got an array called "sections" and you just pick which section you want (index starts at 0 not 1) and set the backgroundColor to whatever color you'd like.

Edited by mess_cal
Fixed comments
Link to comment

It wold help if you could tell us which section of the page you want to target and what color you want the background to be. We can then be more specific.

In general there are often multiple ways you can target an element.

2006788367_ScreenShot2020-11-09at4_50_28PM.thumb.png.90d327866973cb6bc0c11097f4eb7338.png

Following are just a few that can be used to target the same element.

/* using the id of the element */

#yui_3_17_2_1_1604968259975_121 .section-background {

  background-color: red;
  
  }
/* using the data-section-id attribute of the element */

[data-section-id="5edec3dce16d4b242eb30c0c"] .section-background {

  background-color: red;
  
  }
/* using the position of the element */

.page-section:nth-of-type( 3 ) .section-background {

  background-color: red;
  
  }

 

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
  • 1 month later...
  • 1 month later...

@preflight

Please post the URL for your site.

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

@preflight

Remove your background image and any previous CSS related to this effect.

Add the following to Design > Custom CSS.

body:not( .has-banner-image ).transparent-header #header,
#home-1-section

  {
  
    background-color: #D92026;
    
    }

Let us know how it goes.

Edited by creedon
version 2

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
  • 4 months later...

@E-L-G

Add the following to Design > Custom CSS.

#collection-583a6f20b8a79b774fb31694 #pageWrapper {

  background-color : black;
  
  }

This is for v7.0 using the Ishimoto template.

Let us know how it goes.

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
  • 2 years later...
  • 6 months later...

This approach may help some people too, who want to change the section background on one specific section:

 

Add this to a single page under “Advanced > Code Injection” and change the ID selector and hex colour.

<!-- Change Background Colour On One Section Only -->

<style>

section[data-section-id="66321cd19bd7127f1900ef66"] .section-background {

background: #F8A07E !important;

}

</style>

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.