abbyleebonny

@Alan-Squareflair I have used this code for one of my 7.0 sites but trying to do it on another of my sites and it is not working - it looks like the option to turn on "SOCIAL SHARING" in the Site Styles has been removed? 

Can you help me add the 'additional info' below the product description?

Site URL: https://www.mac.ac.nz/he-ngakau-maori-toku/te-whare-tapu-o-te-ngakau-maori-preorder

I have successfully used it here on this site: https://theguthealingprotocol.com/store/organic-grass-fed-beef-liver-capsules

Thank in advance

On 8/31/2020 at 2:14 PM, Alan-Squareflair said:

Yes, you can do this using jQuery. 

Add this to your PAGE HEADER CODE INJECTION— in the settings on your main product page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  window.Squarespace.onInitialize(Y, function(){  
  $('section.ProductItem-additional').appendTo('.ProductItem-details-share');
});
</script>

 

http://share.sqr.fr/SopdM2x+/Screen+Shot+2020-08-30+at+10.12.16+PM.png 

Notes:
1. this assumes you're not running jQuery on the site; if you are, you can just use the second script.

2. The template I'm using is MOJAVE in the Brine Family (7.0), although this should work for most 7.0 templates. 

3. You have to make sure that SOCIAL SHARING is turned on in the Design Styling area— as that's the container I'm using to hold the additional content. It's a little hacky, but it was the easiest way to make it happen.

http://share.sqr.fr/7CAmcyI+/Screen+Shot+2020-08-31+at+9.55.42+AM.png

 

I figured it out - turns out you can change simply change it to from 'icon' to 'text' by selecting 'EDIT SITE HEADER', I'm sure this must be an update I swear it wasn't there a few months ago...

Site URL: https://dekanstudios.com/home

Hi there 

I would like to change the cart bag/cart icon so it says "CART" with the cart quantity in brackets next to it, as in the screenshot "CART (01)" - this used to be an option, however in 7.1 I can't see an easy change - I have tried the custom-css below, however the cart quantity doesn't sit nicely next to the text "CART" on desktop or mobile.

Thank in advance!

This is the code I have used to get to where I am now with the out of line text and quantity:

//CART FROM ICON TO WORD//
   .header .header-actions-action--cart .icon {
    
      height : unset;
      width : unset;
      
      }
      
    .icon-cart-quantity {
    
      all : unset;
      
      }
      
    .Cart-inner .icon--cart { /* remove cart icon */ 
    
      display : none;
      
      }
      
  .Cart-inner { /* common settings */
  
    font-family : 'Univers+LT+55+Roman.ttf';
    color : #151515 ;
    font-weight : 400;
    line-height : 1.3;
    letter-spacing : 0.00;
    font-size : .8rem;
    vertical-align : middle;
    content: "CART";

    }
    
  // CART QUANTITY // 
  
    .icon-cart-quantity {
    
      background-color : ;
      padding : px;
      
      }
    
    body:not( .header--menu-open ) .header-actions .icon-cart-quantity {
    
      color : ;
         font-weight : 400;
    letter-spacing : 0.0em;
          font-size : .9em;
    margin-right : 0.5em;
      }
  
//CART TEXT//
  .Cart-inner:before {   /* cart text */
  
    content : 'CART';
    color : #151515;
    font-weight : 400;
    letter-spacing : 0.00em;
        font-size : .9em;
    margin-right : 0.em;
    
    }

Thank you so much @tuanphan - I've got another couple for you...

1. On mobile homepage I would like the title/menu nav etc to be white as you have helped me with but I would like it to be black once they have opened the menu. see screenshots attached.

2. Can I reduce the size of the menu "X" button so it is smaller (and black)?

3. I have uploaded a custom font, however on the site, including when I go from homepage to menu the custom font seems to lag and for a split second the allocated Squarespace font shows up before the custom font shows.

4. I would like to reduce the cart text and quantity size on mobile only so that it shows on the same line if i change it to .8em it fits on one line but is too small for desktop - I have used the code here to change the shopping car picture to the word 'cart' :

//CART FROM ICON TO WORD//
   .header .header-actions-action--cart .icon {
    
      height : unset;
      width : unset;
      
      }
      
    .icon-cart-quantity {
    
      all : unset;
      
      }
      
    .Cart-inner .icon--cart { /* remove cart icon */ 
    
      display : none;
      
      }
      
  .Cart-inner { /* common settings */
  
    font-family : 'Univers+LT+55+Roman.ttf';
    color : #151515 ;
    font-weight : 400;
    line-height : 1.3;
    letter-spacing : 0.00;
    font-size : .9em;
    vertical-align : middle;
    content: "CART";

    }
    
  // CART QUANTITY // 
  
    .icon-cart-quantity {
    
      background-color : ;
      padding : px;
      
      }
    
    body:not( .header--menu-open ) .header-actions .icon-cart-quantity {
    
      color : ;
         font-weight : 400;
    letter-spacing : 0.0em;
          font-size : .9em;
    margin-right : 0.5em;
      }
  
//CART TEXT//
  .Cart-inner:before {   /* cart text */
  
    content : 'CART';
    color : #151515;
    font-weight : 400;
    letter-spacing : 0.00em;
        font-size : .9em;
    margin-right : 0.5em;
  }

Ah thank you so much @tuanphan - works perfectly. It works on mobile too, however it doesn't change the hamburger colour to white on mobile, could you please help me with come code so the hamburger is white on the homepage on mobile.

Thanks a bunch.

Site URL: https://dekanstudios.com/home

Hi there - I would like to change the colour of my logo and navigation menu but only on my homepage - on both mobile and desktop.

I have added a custom font to my css so that my logo is the 'font' rather than uploaded a logo image - hope that makes sense.

Thanks in advance

Site URL: https://dekanstudios.com/home

Hi there 

Could you please help me with custom css to move my announcement bar to the bottom on the screen?

Thanks in advance.

On 3/6/2022 at 8:47 PM, Jia said:

Hi, add this code to custom css. Let me know how it goes 🙂 

h1 a, h2 a, h3 a, p a {
  text-decoration: none !important;
}

h1 a:hover, h2 a:hover, h3 a:hover, p a:hover {
  text-decoration:underline;
}

Hi @Jia - I tried your code and while it removed the underline from links it doesn't have the underline when the mouse is hovered over the links. Do you have any suggestions?

website: www.dekanstudios.com/home

11 hours ago, tuanphan said:

Add this to Design > Custom CSS to align both

footer.sections .newsletter-block .newsletter-form-body {
    display: flex;
    align-items: flex-end;
}
footer.sections .submit-wrapper {
    padding-bottom: 0px !important;
}

 

Thank you so much for your help  @tuanphan - when we have tried to make the cart button white with a black border it has affected what the newsletter button in the footer looks like... we had used code to turn the footer button into a black line, however changes to the cart checkout button have changed the newsletter button to white text with white outline instead of the black under line like the email address 'box' has - are you able to help?

This is the code we have for footer and cart checkout button.

.checkout-button {
    background: white !important
}

div.item-quantity input, button.checkout-button {
    border: 1px solid black !important;
}

footer.sections input[type="text"] {
    background: transparent;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}footer.sections input[type="text"] {
    border-color: black;
}
footer.sections input[type="text"]::placeholder {
    color: black !important;
}
/* Footer Join button */
footer.sections .sqs-block-newsletter .newsletter-form-button {
    background-color: transparent !important;
    border-bottom: 1px solid;
}

footer.sections .newsletter-form-field-wrapper {
    padding: 0 !important;
    margin-right: -5px;
}
footer.sections .field-error {
    background-color: white !important;
    color: black !important;
}

footer.sections .newsletter-block .newsletter-form-body {
    display: flex;
    align-items: flex-end;
}
footer.sections .submit-wrapper {
    padding-bottom: 0px !important;
}
 

23 hours ago, tuanphan said:

Add to Dsesign > Custom CSS

div.item-quantity input, button.checkout-button {
    border: 1px solid black !important;
}

 

Thank you @tuanphan - that's amazing! Are you able to please help me, I have set my purchase buttons to 'outline' with black text, however when I hover over it the whole button turns black... Do you have custom css so that when it is hovered over the border and text remain black but the background turns from my site colour to white?

18 minutes ago, tuanphan said:

Try this CSS

footer.sections .newsletter-form-field-wrapper {
    padding: 0 !important;
    margin-right: -5px;
}
footer.sections .field-error {
    background-color: white !important;
    color: black !important;
}

 

Thank you - the colours worked but the email address line and join line still go out of alignment - any ideas how to fix that?

@tuanphan - is there a way to keep the email address line and join line inline with each other is someone happens to *not* enter their email address? And to also change the colour of the red/pink pop up that says "Email address is required" to white background with black writting?

@tuanphan - you're amazing! Thank you!

Hi there @tuanphan  - thanks so much for getting back to me!

The link is here: https://dekanstudios.com/shop/p/sol-diffuser

Hi there, thanks for this, I have been able to change the colour of my "checkout" button with the above code... wondering if I can get help for creating a black outline around my checkout button and the box which shows the quantity? Also for making the lines around the item and the words "item, quantity and price" on my shopping cart page black? 

Site URL: https://dekanstudios.com/

Hi there, can I please have help with custom css to change the 'newsletter button' in my footer to an underline in my footer?  I would also like 

Thanks in advance.