Jump to content

How Customize cart page, hide header, footer, sections, change color and Button.

Recommended Posts

Hello Squarespace Community, 

I searched yesterday for hours and been able to put a lot of CSS code together through this forum, I startet to make manually a multi language web site in three languages, I´m nearly finish with this and I just need some small adjustments maybe you can help me with that? I also wanted to put all together throughout my search yesterday and it might help other users. 

here is my Website to have a look Website 

I need help with the header as I hide several pages the other pages got a bigger space in between.

On my cart Section I would like to get the background of my page menu in the header in a the same color as the rest.

Also like to change the outline and filling color on the checkout and the button in the header.

Thanks a lot 🙏

Here is the code what I did to hide different sections on my cart page and customize it:

 Change color on the background:

/* Cart page - background color */
body#cart 

background-color:#FAF5F3;
}

 

Change color of the fonts in the header:

/* Cart page - font color */
body#cart .header-announcement-bar-wrapper * {
    color: black!important;
}

change color on the checkout Button:

button.cart-checkout-button{
    color: black !important;
}
 

/* Cart page - change color of product and price */
body#cart div#sqs-cart-root *:not(.cart-checkout-button) {
    color: black !important;
}

Hide pages only in the header on the cart section / page:

/* Cart page - header only english */
body#cart
 body#cart [href="/about-1"] 
  {display: none;}
   body#cart [href="/about-2"] 
  {display: none;}
   body#cart [href="/contact-me-1"] 
  {display: none;}
   body#cart [href="/contact-me-2"] 
  {display: none;}
   body#cart [href="/sprache"] 
  {display: none;}
 body#cart [href="/sprk"] 
  {display: none;}

Remove the other footer only in the cart section:

/* Cart page - remove footer */
body#cart 

section[data-section-id="63e3acb1f0ee796016e1196f"]
  {display:none;}
section[data-section-id="63e3acb4de2b0e5ae653ad5b"]
  {display:none;}
  }

 

Skjermbilde 2023-02-09 kl. 15.21.01.png

Skjermbilde 2023-02-09 kl. 15.21.15.png

Link to comment
  • 3 weeks later...
On 3/1/2023 at 12:53 AM, AlexRobins said:

Don't know what you mean? Enable on my website? Its still enabled I just like to change the black background 

I meant I don't see it now. Can you enable it? Maybe you disabled it

image.thumb.png.994094db9d9736d03c5ecbd87bb3ebec.png

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

@tuanphan Similar question... 

How do I change the drop down menu under 'About' to be the dark blue #001840?

 

Site: https://vocalcombattechnique.squarespace.com/

Pw: battle

Current code that I hack & slashed from above...

/* Cart page - background color */
body#cart 
{ 
background-color:#001840;
}
/* Cart page - font color */
body#cart .header-announcement-bar-wrapper * {
    color: white!important;
}
/* Cart page - change color of product and price */
body#cart div#sqs-cart-root *:not(.cart-checkout-button) {
    color: white !important;
}
body#cart .header-announcement-bar-wrapper .header-nav-folder-item * {
    background-color: #001840!important;
  padding: none;
}

 

Link to comment
On 9/6/2023 at 11:26 AM, NadineS said:

@tuanphan Similar question... 

How do I change the drop down menu under 'About' to be the dark blue #001840?

 

Site: https://vocalcombattechnique.squarespace.com/

Pw: battle

Current code that I hack & slashed from above...

/* Cart page - background color */
body#cart 
{ 
background-color:#001840;
}
/* Cart page - font color */
body#cart .header-announcement-bar-wrapper * {
    color: white!important;
}
/* Cart page - change color of product and price */
body#cart div#sqs-cart-root *:not(.cart-checkout-button) {
    color: white !important;
}
body#cart .header-announcement-bar-wrapper .header-nav-folder-item * {
    background-color: #001840!important;
  padding: none;
}

 

Add this code under

body#cart div.header-nav-folder-content {
    background-color: #001840 !important;
}
body#cart div.header-nav-folder-content span.header-nav-folder-item-content {
    color: white !important;
}

 

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
  • 4 weeks later...
On 9/30/2023 at 10:56 PM, Daniel97 said:

Is there a way to move the empty cart text and button to the middle of the page, and maybe add an empty cart image?

You mean add it in navigation position or page content or?

image.thumb.png.9bcc332a733cef83c79cac3c67e70cc4.png

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

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.