Changing the Background Color of Footer in Shopping Cart

Site URL: http://www.fadedera.com

Hi! I've changed the background of my site to a linear gradient. I've done this in each page's "Advanced" section using this code:

<style>
.section-background {
  background-image: linear-gradient(to right, #f0c7cf, #f5ced0, #f8d6d2, #fbded6, #fde6db);
  }
</style>

And also in the site "Custom CSS" section to prevent a white space from appearing above the footer on each page:

#siteWrapper {
    background-image: linear-gradient(to right, #f0c7cf, #f5ced0, #f8d6d2, #fbded6, #fde6db);
}

For some reason, when I load my shopping cart, the footer changes to a white background. This is driving me nuts.

Site password: fadedera

Any help is appreciated. Thanks so much.

Add to Home > Design > Custom CSS

body#cart footer.sections .section-background {
    background: pink;
}

THANK YOU SO MUCH

I replaced "pink" with the gradient, and it worked perfectly

body#cart footer.sections .section-background {
    background: linear-gradient(to right, #f0c7cf, #f5ced0, #f8d6d2, #fbded6, #fde6db);

On 11/20/2020 at 10:27 AM, fadedera said:

THANK YOU SO MUCH

I replaced "pink" with the gradient, and it worked perfectly

body#cart footer.sections .section-background {
    background: linear-gradient(to right, #f0c7cf, #f5ced0, #f8d6d2, #fbded6, #fde6db);

 

I see the images on product show 1/4. You can add slide arrows, user can navigation to view more images easier.

Add this to Home > Design > Custom CSS

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
.ProductItem .ProductItem-gallery-carousel-controls>div::after, .ProductItem .ProductItem-gallery-carousel-controls>div::before {
    border-color: black !important;
}
}

Hi @tuanphan I have tried and tried to change the style of the shopping cart section but can't seem to do it. I need the "x" icon and button to be mustard yellow (the same yellow used across the rest of the site.) Please may you help? How do I change the styles & design of the Cart page? Many thanks

On 3/18/2021 at 6:50 PM, sophieameliadesigns7 said:

Hi @tuanphan I have tried and tried to change the style of the shopping cart section but can't seem to do it. I need the "x" icon and button to be mustard yellow (the same yellow used across the rest of the site.) Please may you help? How do I change the styles & design of the Cart page? Many thanks

Can you share link to cart page?

Hi there, I was hoping someone could help me with a little bit of code too for my shopping cart? 

The shopping cart seems to use my "Accent Dark" colour theme, but I want it to be my "White minimal" theme if that's possible, or at least be able to change the background colour and font colours to a custom hex code. @tuanphan Could you kindly help? Thanks so much!

http://ouryard.squarespace.com
Password: garden

@lisanemetz

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Settings > Advanced > Code Injection > FOOTER.

<script>

  $( ( ) => {
  
    /*
    
      change cart footer theme class
      
      SS Version : 7.1
      
      */
      
    const themeClass = 'white';
    
    // do not change anything below, there be the borg here
    
    const themeClasses = [
    
      'black-bold',     // Darkest 2, Black Bold
      'black',          // Darkest 1, Black Minimal
      'bright-inverse', // Bright 1, Accent Bold
      'bright',         // Bright 2, Accent Minimal
      'dark-bold',      // Dark 2, Dark Bold
      'dark',           // Dark 1, Dark Minimal
      'light-bold',     // Light 2, Light Bold
      'light',          // Light 1, Light Minimal
      'white-bold',     // Lightest 2, White Bold
      'white'           // Lightest 1, White Minimal
      
      ]
      
    if ( ! $( '#cart' ).length ) return;
    
    const i = themeClasses
    
      .indexOf ( themeClass );
      
    themeClasses.splice ( i, 1 );
    
    $( '#footer-sections .page-section' )
    
      .attr ( 'data-section-theme', themeClass )
      
      .addClass ( themeClass )
      
      .removeClass ( themeClasses.join ( ' ' ) );
      
    } );
    
  </script>

This for v7.1.

Let us know how it goes.

@lisanemetz

You'll probably want to add the following to Design > Custom CSS to invert the color of the logo.

/* dark logo for cart */

#cart #block-yui_3_17_2_1_1612702035527_8978 {

  filter : invert( 1 );
  
  }

This is for v7.1 and specific the the poster's need.