Jump to content

Changing background colour on individual pages only - 7.0 Pacific template family - Horizon template.

Recommended Posts

hey there..
trying to change background colour on individual pages only:
7.0 Pacific template family
Horizon template.
Business account.

Site Styles>Main Content> Background colour  -  changes colour site wide.
How do i change the background of an individual page only?

page in question: https://www.bakerboyofficial.com/7-move

appreciate any assistance!

thanku!

Edited by neostar
Link to comment
14 hours ago, neostar said:

hey there..
trying to change background colour on individual pages only:
7.0 Pacific template family
Horizon template.
Business account.

Site Styles>Main Content> Background colour  -  changes colour site wide.
How do i change the background of an individual page only?

page in question: https://www.bakerboyofficial.com/7-move

appreciate any assistance!

thanku!

Do you use Personal, Business or Commerce Plan?

Background color for main content only or whole page (header, footer, main content)?

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
15 hours ago, tuanphan said:

Do you use Personal, Business or Commerce Plan?

Background color for main content only or whole page (header, footer, main content)?

On business plan, i would ideally like to know the options for 'whole page' and just 'main content'

appreciate the response.
thankyou!

Link to comment

For full page add the following to Design > Custom CSS.

/*

  Pacific template family whole page background color change
  
  Version         : 0.1d0
  
  SS Version      : 7.0
  
  v7.0 Templates  : Pacific template family
  
  Dependancies    : LESS
  
  By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */

#collection-617ca799b886ad6c40ad42f9 {

  &:not( .has-banner-image ).transparent-header #header, // header
  #siteWrapper, // main
  #footer // footer
  
    {
    
      background-color : red;
      
      }
      
  }

For the main section of a page add the following to Design > Custom CSS.

/*

  Pacific template family page main section background color change
  
  Version         : 0.1d0
  
  SS Version      : 7.0
  
  v7.0 Templates  : Pacific template family
  
  By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */

#collection-617ca799b886ad6c40ad42f9 #siteWrapper {

  background-color : red;
  
  }

You of course will want to change the background color for your needs.

For each page you will need to change the collection id. Check out Heather Tovey's most excellent looking Squarespace ID Finder for finding those ids.

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

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.