Jump to content

How to change the background color of one page only with the header?

Recommended Posts

On 3/30/2022 at 3:40 AM, TheSquareSpacer said:

Please put the CSS into Custom CSS 
Please Go to Design > Custom CSS and Paste the code

 

The <style> code won't work in Custom CSS

On 3/30/2022 at 12:53 AM, usmanghani31 said:

I want to change the background color of a page and header. I added the code under advanced tab, but I can't see any preview. I'm attaching the picture. Please have a look and let me know how can I fix this.

Screenshot at Mar 29 15-01-24.png

Can you share link to page where you want to change background color, we can help easier?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
10 hours ago, tuanphan said:

The <style> code won't work in Custom CSS

Can you share link to page where you want to change background color, we can help easier?

https://gecko-goose-nln8.squarespace.com/partners

Here is the link of the page and the password is (juliebillie)

I want to change the background color of body and header of this page only. And I don't want other pages to be affected.

Edited by usmanghani31
password was not correct
Link to comment

Please go the Design > Custom CSS  and paste the following code
#collection-613a62ce36e9b74fa68969ab header {
    background-color: #fdc200 !important;
}

#collection-613a62ce36e9b74fa68969ab main {
    background-color: #fdc200 !important;
}

Get Our MultiCurrency Extension for Your Site (7.0 & 7.1)

Feel free to reach out for help and projects!

The Squarespacer Limited

Link to comment
5 hours ago, usmanghani31 said:

https://gecko-goose-nln8.squarespace.com/partners

Here is the link of the page and the password is (juliebillie)

I want to change the background color of body and header of this page only. And I don't want other pages to be affected.

Add to Design > Custom CSS

/* partners page background */
body#collection-613a62ce36e9b74fa68969ab {
.section-background, .page-section {
    background: transparent !important;
}
&, header#header {
   background-color: #fdc200 !important;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
15 hours ago, tuanphan said:

Add to Design > Custom CSS

/* partners page background */
body#collection-613a62ce36e9b74fa68969ab {
.section-background, .page-section {
    background: transparent !important;
}
&, header#header {
   background-color: #fdc200 !important;
}}

 

I added that code in custom css under design tab, but it's not working.

Link to comment
8 hours ago, usmanghani31 said:

I added that code in custom css under design tab, but it's not working.

Try edit page >> Add a Code Block under Co-conspirators text >> Add this code

<style>
.section-background, .page-section {
    background: transparent !important;
}
body, header#header {
   background-color: #fdc200 !important;
}
</style>

If it still doesn't work, add & keep the code, we can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

One more thing that I want to change the color of nav bar of the same page only. From white to black. In all other pages nav bar text color is white and on this page, I want it black. How can I do that?

I added that code but it's not working.

  /* Nav item color */
.main-nav ul li a {
    color: #000000 !important;
}

Link to comment
On 4/3/2022 at 3:57 AM, tuanphan said:

Try edit page >> Add a Code Block under Co-conspirators text >> Add this code

<style>
.section-background, .page-section {
    background: transparent !important;
}
body, header#header {
   background-color: #fdc200 !important;
}
</style>

If it still doesn't work, add & keep the code, we can check easier

I'm waiting for your reply.

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.