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

How can I change the content background color on only one page using CSS?

Question

19 answers to this question

Recommended Posts

  • 1

You may have to force a little harder by adding "!important" to that element. It's likely that the BG color is set in the template, which means you need to override it. (like...)


.collection-51fe6273e4b018cc005790bd #content { 
     background-color: #ffffff !important; 
}

Or try dropping #content


.collection-51fe6273e4b018cc005790bd { 
      background-color: #ffffff !important; 
} 



Edited by alanhouser

Share this post


Link to post
  • 2

Just figured it out on my own with some experimenting for those who want to know:


.collection-[id] #content { background-color: [your color #]; }

Edited by Fox

Share this post


Link to post
  • 1

This works for me on Marquee : to change the background colour of 1 page contained within the index page;


[data-url-id="YOUR PAGE URL HERE"] .content-inner { background-color: #4068b1 !important; }
[data-url-id="YOUR PAGE URL HERE"] .content { background-color: #4068b1 !important; }

The page URL is the suffix to the domain including the forward slash eg /my-page

Share this post


Link to post
  • 0

Try something else in the space after background-color: instead of #ffffff

For example, I used on my site background-color: rgba(0,0,0,0.7)

If you don't know the color code you want go to the style editor and where you choose font colors pick the color you would use for desired background and find the color's code there.

If that doesn't work do you have other css for backgrounds that may be overriding the new code you put in?

Share this post


Link to post
  • 0

Can't see any overriding new code. Tried different colours but to no avail.

Will give it a shot another day, man. Can't seem to find a solution.

Share this post


Link to post
  • 0

Hey, that doesn't work either. What I have realised, though, is that header code injection doesn't work from the back-end. If I go to the page using the viewer, use Style Mode and then implement CSS via the editor then the changes seem to be implemented.

However, I've only managed to change the background colour for the specific block of text by using:


#block-3d9d13198a3472b9fb32 { 
 background-color: #ffffff; 
 padding: 20px;
}

This still leaves the div container (?) background unchanged, though.

Edited by zurask

Share this post


Link to post
  • 0

I am also trying to get specific pages to change color on Marquee with no luck. I am using the CSS editor in the style editor, and have tried all variations:

.collection-52c9d299e4b0b674fecf2804 #content { background-color: ##60dca0 !important;

or

.collection-52c9d299e4b0b674fecf2804 { background-color: ##60dca0 !important;

and with and without !important; Perhaps marquee handles the pages differently?Or I'm doing something else wrong?

thanks!!

Share this post


Link to post
  • 0

@onkelkbh Since this post is specifically asking about background and you are asking about font color, you should consider opening a new question. I am going to remove you answer as this post is almost 3 years old.

Share this post


Link to post
  • 0

@Anderswaltz afirm to @nonesuch's suggestion, for subpages within the index page you need to add css to index>advanced (the index page which is acting as a parent and any code in the index advanced field will flow into the subpages) . Target the subpage using its data-url-id

Example from my site, I am targeting two subpages from within the index page:


<style>
.parallax-item[data-url-id='mission'] div.title-desc-inner h1,
.parallax-item[data-url-id='mission'] div.title-desc-inner p {
  display: none !important;
}
[data-url-id="summary"] h1.page-title, 
[data-url-id="summary"] .page-desc, [data-url-id="summary"] .page-desc a  { 
  color: #333 !important;
}
</style




Share this post


Link to post
  • 0

Hi there, I would really like a solution to this problem as well, but none of the above seems to work for me. Maybe because I use a different template? I'm using Alex, does anybody have an idea?

My question is also here:https://answers.squarespace.com/questions/150634/alex-template-different-background-color-for-each.html

Share this post


Link to post
  • 0
Posted (edited)

Hi @Fox, I made a video tutorial for you on how to Change The Content Background Color. Hope this helps! https://www.askquesty.com/post/change-background-color

Edited by AskQuesty
Initial Revision

Have Squarespace questions/task and need help today? **You can hire us here.** Our answers are on-demand, video recorded, and only cost between $5 to $25. Estimates are free, 100% satisfaction guarantee, and trusted by hundreds of small businesses.

Share this post


Link to post
  • -1

The best solution I found is to go into the page settings in admin, lick on advanced and enter the blow in the page header code injection:


<style>

#main { background-color: #ffffff; } 

</style>

This will change the background color of only this page.

Share this post


Link to post
  • -1

its really simple .


<style>
 .parallax-item[data-url-id='mission'] div.title-desc-inner h1,
 .parallax-item[data-url-id='mission'] div.title-desc-inner p {
   display: none !important;
 }
[data-url-id="summary"] h1.page-title, 
 [data-url-id="summary"] .page-desc, [data-url-id="summary"]{ 
  background-color: #333 !important;
}
 </style>


Edited by squarespaceExpo
Initial Revision

Hello, I'm Rahul– I answer questions Get in touch at squarespaceexpert639@gmail.com

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