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

creedon

Circle Member
  • Posts

    3,654
  • Joined

  • Last visited

  • Days Won

    38

Posts posted by creedon

  1. Create a code block and save it.

    Get the block id for the code block. You can use Heather Tovey's most excellent looking Squarespace ID Finder.

    Edit the code block and add the following replacing [enter block id here] with the block id.

    <!--
    
      begin code block text swap
      
      Version         : 0.1d0
      
      SS Versions     : 7.1, 7.0
      
      v7.0 Templates  : all
      
      Note            : the code is comprised of several tags. all are needed for
                        the full effect to work
      
      By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      -->
      
      <style>
      
        @keyframes swap {
        
          0% {
          
            content : var( --text );
            
            }
            
          25% {
          
            content : 'fears';
            
            }
            
          50% {
          
            content : 'doubts';
            
            }
            
          75% {
          
            content : 'limits';
            
            }
            
          }
          
        [enter block id here] {
        
          --duration : 4s;
          --word-count : 4;
          --text : 'yourself';
          
          }
          
        [enter block id here] p {
        
          /* enter property value pairs to style text here */
          
          text-transform : uppercase;
          
          }
          
        [enter block id here] p span {
        
          /* enter property value pairs to style swap text here */
          
          }
          
        [enter block id here] .sqs-block-content span::after {
        
          animation : swap calc( var( --duration ) * var( --word-count ) ) linear
                      infinite;
                      
          content : var( --text );
          
          }
          
        </style>
        
      <p>
      
        <!-- enter text here -->
        
        conquer
        
        <span>
        
          <!-- leave this empty -->
          
          </span>. <!-- need ending puncuation? put it right after the </span> -->
          
        </p>
        
      <!-- end code block text swap -->

    Let us know how it goes.

  2. 4 hours ago, iJizzy1 said:

    do you think it is possible to create an accordion in the product description of my shop?

    Yes. Usually what folks do is create their accordion in Addition Info in the product editor. Then if you want to move the accordion to a different location use Javascript to make the move.

  3. 4 hours ago, iJizzy1 said:

    this is exactly what I am trying to do! Would it be possible to get the code?

    This is a little bit involved because we are building code up in layers.

    Install the code from Store Product Details Natural Order Desktop.
      
    Install the code from Store Product Detail One Left Class Add.
      
    Install the code from Store Product Details Reorder Desktop. You'll want to set the CSS variables in this code thusly.

            --add-to-cart-button : 4;
            --description : 5;
            --price : 1;
            --quantity : 3;
            --variants : 2;
            

    Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

    <!--
    
      begin store product detail quantity right of variants
      
      Version       : 0.1d0
      
      SS Version    : 7.1
      
      Dependancies  : store product details natural order desktop
                      
                      store product detail one left class add
                      
                      store product details reorder desktop
      
      Notes         : the code is comprised of two style tags. both are needed for
                      the effect to work
                      
                      this effect should be installed after the following code,
                      order is important :
                      
                        store product details natural order desktop
                        
                        store product detail one left class add
                        
                        store product details reorder desktop
                        
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      -->
      
      <style>
      
        .ProductItem-details .ProductItem-details-checkout {
        
          --gap : 2rem;
          
          }
          
        </style>
        
      <!-- do not change anything below, there be the borg here -->
      
      <style>
      
        .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout {
        
          display : grid;
          gap : var( --gap );
          grid-template-columns : repeat( 5, 1fr );
          
          }
          
        .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout .product-variants {
        
          display : -webkit-box;
          display : -ms-flexbox;
          display : flex;
          
          -webkit-box-orient : vertical;
          -webkit-box-direction : normal;
          -ms-flex-direction : column;
          flex-direction : column;
          
          gap : var( --gap );
          
          }
          
        .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout > *,
        .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout .variant-option,
        .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout .product-price
        
          {
          
            margin : 0 !important;
            width : unset !important;
            
            }
            
        .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout > * {
        
          grid-column : 1 / 6;
          
          }
          
        @media screen and ( min-width : 433px ) {
        
          .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout .product-quantity-input {
          
            grid-column : 3 / 4;
            
            }
            
          .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout .product-variants {
          
            grid-column : 1 / 3;
            
            }
            
          .tweak-product-basic-item-text-alignment-left .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout .sqs-add-to-cart-button-wrapper {
          
            grid-column : 1 / 4;
            
            }
            
          }
          
        </style>
        
      <!-- end store product detail add to cart button right of quantity -->

    Let us know how it goes.

  4. Quote

     

    - Change the background color of the checkout button to white

    - Change the text within the checkout button to black

     

    Add the following to Design > Custom CSS.

    #cart .checkout-button {
    
      background-color : white;
      color : black;
      
      }

    This is for v7.1.

    I or others may be able to address your other issues.

    Let us know how it goes.

  5. Please tell us more about how site visitors are entering their email addresses? Are you using a form block?

    Please post the URL for a page on your site where we can see your issue.

    If your site is not public please set up a site-wide password, if you've not already done so.

    Post the password here.

    Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

    Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

    We can then take a look at your issue.

  6. This is not a solution but a proof of concept and is crude. Would something like the follwing do?

    What we have here is a gallery section and blank section with a text and button block.

    With the magic of CSS I've moved the "blank" section to overlap the gallery section. I added a little more CSS to add a white background with opacity set to 0.9 behind the text and button block. This effect is not perfect in this proof of concept because the gallery is a white background and mostly white images. With full width images like in your example the final effect I think would look much closer to your example.

    So to sum up I think you could achieve a similar effect on v7.1 as you have with the v7.0 site, with some CSS magic sprinkled in.

  7. I suggest adding a consignment tag to each consignment item.

    Then add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

    <style>
    
      .tag-consignment .ProductItem-details .product-mark.sold-out,
      .tweak-product-item-details-show-price .tag-consignment .ProductItem-details .product-price
      
        {
        
          display : none;
          
          }
          
      </style>

    This is for v7.0 using the Brine template family.

    Let us know how it goes.

  8. @jenthomson

    For these kind of loading issues you may want to consider using a MutationObserver. It is more complicated than a setTimeout but you don't have to estimate how long it will take for the element to show up and possibly miss or delay something happening.

    MO's are designed specifically for situations where you want to watch for a particular node to arrive on the DOM and then modify that element.

    Please see Search Page Input Aria-Label Attribute Add.

    Let us know how it goes.

  9. Please post the URL for a page or pages on your site where we can see your issue(s).

    If your site is not public please set up a site-wide password, if you've not already done so.

    Post the password here.

    Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

    Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

    We can then take a look at your issue.

  10. Could you describe in more detail what you want to accomplish? Are you wanting to use the assets from the zip file for use in building a Squarespace site? If yes, then one thing to keep in mind is that SS doesn't work like some older site builders where you'd upload HTML and media files up to a server. HTML files from your zip mostly likely will need to be heavily edited before they could be used in SS.

    Without being able to see the assets it is hard to be able to give more detailed advice. If the assets can be loaded into the browser it might be easier to get your SS site up in one window and the assets in another and copy and paste content from one to the other. This would be text mostly.

  11. Try removing or commenting the width lines from the following ruleset.

    @media screen and (max-width: 767px) {
        div#block-yui_3_17_2_1_1632498127837_3987 {
            /* width:50%; */
            margin: auto
        }
    
        div#block-yui_3_17_2_1_1632547780119_2976 {
            /* width: 50%; */
            margin: auto
        }
    
        div#block-yui_3_17_2_1_1632547780119_5587 {
            /* width: 50%; */
            margin: auto
        }
    }

    Removing the widths doesn't seem to cause a problem with the 2 up mobile layout.

    Let us know how it goes.

×
×
  • Create New...