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

creedon

Circle Member
  • Posts

    3,671
  • Joined

  • Last visited

  • Days Won

    38

Community Answers

  1. creedon's post in Lightbox form: How to add form field placeholders? was marked as the answer   
    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 Page Settings > Advanced > Page Header Code Injection for the contact page.
    <script>   $( ( ) => {        /*            add placeholder text to first and last name fields in "Get in touch!"       form for v7.1 site.              SS version : 7.1              */            const dataFormId = '601ced4f7050527e47ff6076';     const firstNamePlaceholderText = 'first';     const lastNamePlaceholderText = 'last';          // do not change anything below, there be the borg here          let $form = $( '[data-form-id="' + dataFormId + '"]' );          $( '.first-name input', $form )            .attr ( 'placeholder', firstNamePlaceholderText );            $( '.last-name input', $form )            .attr ( 'placeholder', lastNamePlaceholderText );            } );        </script> Let us know how it goes.
  2. creedon's post in CSS not displaying on website was marked as the answer   
    I think the problem is that you have several \n] (newline or return and right bracket) character sequences in your CSS. Obviously they aren't being flagged by the Custom CSS field but do cause the LESS processor to choke.
    Replace the bad sequence with the character ]. After I did that here the LESS processor seemed OK. I put the fixed CSS in place here locally and things were looking good.

    Let us know how it goes.
  3. creedon's post in How to create section above Header? was marked as the answer   
    Would the announcement bar do for your needs?
  4. creedon's post in Site has grey 'gap' on right side on Mobile was marked as the answer   
    I don't have a solution but one thing I noticed is that your CSS is contributing to the issue somewhat. Turn it all off again. Then set the max height for the logo to 60px instead of 67.

    The problem went away for me.
    Part of the problem at 67 is that it is all crammed in there and it appears the right padding for the mobile logo image is 50px getting pushed outside the viewport.
  5. creedon's post in Is there a way to increase size of the dates on calendar? was marked as the answer   
    Add the following to Design > Custom CSS.
    .yui3-squarespacecalendar .marker-daynum {   font-size : 16px;      } Let us know how it goes.
  6. creedon's post in Cart Icon disappear on Miller template was marked as the answer   
    Does it show if you search for cart?

    Per chance do you have express checkout enabled?

    That gets rid of the cart altogether in Site Styles.
  7. creedon's post in Adding a custom background to a page/section in 7.1 - Trouble with code was marked as the answer   
    Add the following to Design > Custom CSS.
    :not(.has-background) [data-section-id="5f6202a7242abe11d0086eec"] .section-background { background-color : #DFDBE5; background-image : url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E"); } This is for a v7.1 site and specific to the OP's needs.
    Let us know how it goes.
  8. creedon's post in How can i keep the "add to cart" button text saying "added" once someone clicks on it? was marked as the answer   
    Add the following to Design > Custom CSS.
    #block-yui_3_17_2_1_1612857583760_17486 .cart-added .sqs-add-to-cart-button-inner {   visibility : hidden !important;      } #block-yui_3_17_2_1_1612857583760_17486 .cart-added .sqs-add-to-cart-button-inner:before {   content : 'Added';   visibility : visible !important;      } Let us know how it goes.
     
  9. creedon's post in how to change the top padding for the carousel on my index page without affecting the other pages was marked as the answer   
    This is a start. Others please feel free to contribute.
    Add the following to Design > Custom CSS.
    #collection-5d9eb3727ec40569f73dddd1 .Index-page:first-child .Index-page-content { padding-bottom : calc( 60px / 2 ); } #collection-5d9eb3727ec40569f73dddd1 .Index-page:first-child [class*=sqs-col] .sqs-block { padding-left : 0; padding-right : 0; } @media screen and ( min-width : 641px) { #collection-5d9eb3727ec40569f73dddd1 .Index-page:first-child .Index-page-content { padding-top : 0; } } Let us know how it goes.
  10. creedon's post in How to Reduce Banner on Mojave Template to remove white space was marked as the answer   
    Add the following to Design > Custom CSS.
    /* reduce space at top of about us page */ #collection-5f8630135253a74bf871f821 .Index-page:first-child .Index-page-content {   padding-top : 50px;      } This is for a v7.0 site using the Brine template family and specific to the OP's needs.
    Let us know how it goes.
  11. creedon's post in Background change color on scroll - help! was marked as the answer   
    My bad. I messed up the instructions. I've updated my previous post.
  12. creedon's post in Changing Product Breadcrumb Label? was marked as the answer   
    Has your Store page been online for some amount of time? If not you could go to Store Settings and change the name of your store from store to shop.
    If your Store page has been online for some amount of time you may not want to do this as that could effect your SEO rankings.
    We really need to know more about your situation before giving further advice.
  13. creedon's post in Adding dividers to navigation on mobile templates 7.0 & 7.1 was marked as the answer   
    Building off of @tuanphan's code.
    Replace the previous code with the following.
    .header-menu-nav-item {   border-bottom : 1.1px solid grey;   display : inline-block;   margin-left : 4vw;   padding : 0;   width : 90vw;      } Let us know how it goes.
  14. creedon's post in Website Logo link for Members was marked as the answer   
    Add the following to Settings > Advanced > Code Injection > FOOTER.
    <script> $( ( ) => { /* change url of logo when member is logged in to site SS Version : 7.1 */ const url = '/home-1'; // do not change anything below, there be the borg here if ( ! ( 'MutationObserver' in window ) ) return; const observer = new MutationObserver ( function ( mutations ) { mutations.forEach ( function ( mutation ) { if ( ! mutation.removedNodes.length ) return; observer.disconnect ( ); let $e = $( mutation.removedNodes [ 0 ] ); if ( $e.hasClass ( 'auth' ) ) return; $( '.header-title a' ).attr ( 'href', url ); } ); } ); // start listening for changes in element with class user-accounts-text-link observer.observe ( $( '.user-accounts-text-link' ) [ 0 ], { childList: true } ); } ); </script> Normally I would have updated my original code post but in this case I think there is an instructive element to the process.
    I've done the best I can in testing as on my test site I don't have full access to member areas functionality. SS please consider allowing full access to member areas on non-published sites, like many of your other features that are considered premium. Help the developers to help you. Not that I expect SS to read this but if you do, there you go.
    As long as the new code is not causing any problems, please leave it in place so I can examine it, if it doesn't work.
    Let us know how it goes.
  15. creedon's post in Why is my Homepage Blank on a 768px Browser? was marked as the answer   
    Remove, make a copy somewhere, or comment out the following CSS.
    @media only screen and (max-width: 768px) { body:not(.sqs-edit-mode) section[data-section-id="5fff1e1e7f507d702792c87b"] { display:none !important; visibility: hidden !important; opacity: 0 !important } body.sqs-edit-mode section[data-section-id="5fff1e1e7f507d702792c87b"] { opacity: .5 !important } } @media only screen and (min-width: 768px) {     body:not(.sqs-edit-mode) section[data-section-id="5fedd1a50db4f45ccb5e94ae"] {         display:none !important;         visibility: hidden !important;         opacity: 0 !important     }     body.sqs-edit-mode section[data-section-id="5fedd1a50db4f45ccb5e94ae"] {         opacity: .5 !important     } } Add the following CSS.
    /* HOME - HIDES HEADER SECTION 1 FROM MOBILE BUT LEAVES IN EDIT MODE - ESSENTIALLY, THIS CSS CODE WOULD ONLY RUN IF THE SCREEN SIZE OF THE DEVICE IS 767px OR LESS */ @media only screen and ( max-width: 767px ) {   body:not( .sqs-edit-mode ) section[data-section-id="5fff1e1e7f507d702792c87b"] {        display: none;          }        body.sqs-edit-mode section[data-section-id="5fff1e1e7f507d702792c87b"] {        opacity: 0.5;          }   } /* HOME - HIDES HEADER SECTION 2 FROM DESKTOP BUT LEAVES IN EDIT MODE - ESSENTIALLY, THIS CSS CODE WOULD ONLY RUN IF THE SCREEN SIZE OF THE DEVICE IS GREATER OR EQUAL TO 768px */ @media only screen and ( min-width: 768px ) {   body:not( .sqs-edit-mode ) section[data-section-id="5fedd1a50db4f45ccb5e94ae"] {        display: none;          }        body.sqs-edit-mode section[data-section-id="5fedd1a50db4f45ccb5e94ae"] {        opacity: 0.5;          }   } Alternately you could add the CSS to Page Settings > Advanced > Page Header Code Injection for each page where you want to achieve the effect.
    <style>      /* HOME - HIDES HEADER SECTION 1 FROM MOBILE BUT LEAVES IN EDIT MODE - ESSENTIALLY, THIS CSS CODE WOULD ONLY RUN IF THE SCREEN SIZE OF THE DEVICE IS 767px OR LESS */      @media only screen and ( max-width: 767px ) {        body:not( .sqs-edit-mode ) section:nth-child( 1 ) {              display: none;              }            body.sqs-edit-mode section:nth-child( 1 ) {            opacity: 0.5;              }     }        /* HOME - HIDES HEADER SECTION 2 FROM DESKTOP BUT LEAVES IN EDIT MODE - ESSENTIALLY, THIS CSS CODE WOULD ONLY RUN IF THE SCREEN SIZE OF THE DEVICE IS GREATER OR EQUAL TO 768px */      @media only screen and ( min-width: 768px ) {        body:not( .sqs-edit-mode ) section:nth-child( 2 ) {            display: none;              }            body.sqs-edit-mode section:nth-child( 2 ) {            opacity: 0.5;              }     }        </style> The issue was that the two rule-sets were both set to display no section at 768px.
    Let us know how it goes.
  16. creedon's post in How do I remove the hero image on mobile from my home page? was marked as the answer   
    Add the following to Design > Custom CSS.
    @media screen and ( max-width: 767px ) { [data-section-id="5f5e8390d7bf523730ec3fc7"] .section-background { display: none; } } Alternately you can put the code in Page Settings > Advanced > Page Header Code Injection for the page.
     
    <style>   @media screen and ( max-width: 767px ) {        [data-section-id="5f5e8390d7bf523730ec3fc7"] .section-background {            display: none;              }            }        </style> Let us know how it goes.
  17. creedon's post in Help with custom css font to apply to item categories in the 'Shop' was marked as the answer   
    Add the following CSS.
    .collection-type-products .ProductItem-details .product-price, .ProductItem-nav-breadcrumb, body:not( .button-style-default ) .sqs-add-to-cart-button, .nested-category-children   {        font-family : COPPERPLATE;          } Let us know how it goes.
  18. creedon's post in How can I make two buttons appear next to each other in the same row? was marked as the answer   
    Add the following to Design > Custom CSS.
    @media screen and ( max-width: 767px ) { #page-section-5ff8a6bb15099227a9193870 .row:first-child .row:first-child { display: flex; justify-content: space-around; } #page-section-5ff8a6bb15099227a9193870 #block-yui_3_17_2_1_1608238474701_6930 .sqs-block-button-element { width: 65.7344px; } } Let us know how it goes.
  19. creedon's post in How to add - add to cart button on products was marked as the answer   
    Try disabling Express Checkout.
  20. creedon's post in Toggle Content Not Displaying Content was marked as the answer   
    It appears as though the new page 3 has no blocks with content to show or hide.
  21. creedon's post in Limit Character Count on Forms was marked as the answer   
    Please see Form Text Field Max Length.
    The dialog you show in your post is not available for easy modification (it's not on the DOM initially) so we have to use a MutationObserver to watch for the dialog to become available. Once it is available we can add the maxlength attribute to the text field to limit the number of characters to 250.
    Let us know how it goes.
  22. creedon's post in Customizing Order of Product Category List was marked as the answer   
    Add the following to Store Settings > Advanced > Page Header Code Injection for Objects.
    <style>   /*        Store Categories Reorder          Brine template family          */      /* desktop */      @media only screen and ( min-width: 641px ) {        .ProductList-filter-list {            display: -webkit-box;       display: -ms-flexbox;       display: flex;              -webkit-box-orient: vertical;       -webkit-box-direction: normal;       -ms-flex-direction: column;       flex-direction: column;              }     }        /* mobile */      @media only screen and ( max-width: 640px ) {        .ProductList-filter-dropdownToggle-checkbox:checked~.ProductList-filter-list {            display: -webkit-box;       display: -ms-flexbox;       display: flex;              -webkit-box-orient: vertical;       -webkit-box-direction: normal;       -ms-flex-direction: column;       flex-direction: column;              }     }        .ProductList-filter-list-item:nth-child( 5 ) {        -webkit-box-ordinal-group: 13;     -ms-flex-order: 12;     order: 12;          }        </style> This is for a v7.0 site using a Brine family template.
    This one is fairly simple as we only need to move one category to the end of the list.
    Jewelry is more complicated so I start with my magic table.
    Category                Natural Order   New Order   Group Order All                     01              01          1 Bracelets               02              05          1 Earrings                03              03          1 Fashion Jewelry         04              07          1 Fine Jewelry            05              08          1 Gold                    06              09          1 Necklaces               07              04          1 Pins + Clips & Others   08              06          1 Rings                   09              02          1 Silver                  10              10          1 Add the following to Store Settings > Advanced > Page Header Code Injection for Jewelry.
    <style>   /*        Store Categories Reorder          Brine template family          */      .ProductList-filter-list {        /* natural order 01, no need to define this doesn't change order */     /* natural order 02 */ --scr-new-02:  5; --scr-new-group-02: 1;     /* natural order 03 */ --scr-new-03:  3; --scr-new-group-03: 1;     /* natural order 04 */ --scr-new-04:  7; --scr-new-group-04: 1;     /* natural order 05 */ --scr-new-05:  8; --scr-new-group-05: 1;     /* natural order 06 */ --scr-new-06:  9; --scr-new-group-06: 1;     /* natural order 07 */ --scr-new-07:  4; --scr-new-group-07: 1;     /* natural order 08 */ --scr-new-08:  6; --scr-new-group-08: 1;     /* natural order 09 */ --scr-new-09:  2; --scr-new-group-09: 1;     /* natural order 10 */ --scr-new-10: 10; --scr-new-group-10: 1;          }        /* desktop */      @media only screen and ( min-width: 641px ) {        .ProductList-filter-list {            display: -webkit-box;       display: -ms-flexbox;       display: flex;              -webkit-box-orient: vertical;       -webkit-box-direction: normal;       -ms-flex-direction: column;       flex-direction: column;              }     }        /* mobile */      @media only screen and ( max-width: 640px ) {        .ProductList-filter-dropdownToggle-checkbox:checked~.ProductList-filter-list {            display: -webkit-box;       display: -ms-flexbox;       display: flex;              -webkit-box-orient: vertical;       -webkit-box-direction: normal;       -ms-flex-direction: column;       flex-direction: column;              }     }        /*        begin reordering          [natural order] is the natural order that elements display on the page                     without any intervention          repeat one of the following structures for as many categories you want to     reorder          new order            .ProductList-filter-list-item:nth-child( [natural order] ) {                -webkit-box-ordinal-group: calc( var( --scr-new-[natural order] ) + 1 );         -ms-flex-order: var( --scr-new-[natural order] );         order: var( --scr-new-[natural order] );                  }              new order group            .ProductList-filter-list-item:nth-child( [natural order] ) {                -webkit-box-ordinal-group: calc( var( --new-group-[natural order] ) + 1 );         -ms-flex-order: var( --new-group-[natural order] );         order: var( --new-group-[natural order] );                  }              */        .ProductList-filter-list-item:nth-child( 2 ) {        -webkit-box-ordinal-group: calc( var( --scr-new-02 ) + 1 );     -ms-flex-order: var( --scr-new-02 );     order: var( --scr-new-02 );          }        .ProductList-filter-list-item:nth-child( 3 ) {        -webkit-box-ordinal-group: calc( var( --scr-new-03 ) + 1 );     -ms-flex-order: var( --scr-new-03 );     order: var( --scr-new-03 );          }        .ProductList-filter-list-item:nth-child( 4 ) {        -webkit-box-ordinal-group: calc( var( --scr-new-04 ) + 1 );     -ms-flex-order: var( --scr-new-04 );     order: var( --scr-new-04 );          }        .ProductList-filter-list-item:nth-child( 5 ) {        -webkit-box-ordinal-group: calc( var( --scr-new-05 ) + 1 );     -ms-flex-order: var( --scr-new-05 );     order: var( --scr-new-05 );          }        .ProductList-filter-list-item:nth-child( 6 ) {        -webkit-box-ordinal-group: calc( var( --scr-new-06 ) + 1 );     -ms-flex-order: var( --scr-new-06 );     order: var( --scr-new-06 );          }        .ProductList-filter-list-item:nth-child( 7 ) {        -webkit-box-ordinal-group: calc( var( --scr-new-07 ) + 1 );     -ms-flex-order: var( --scr-new-07 );     order: var( --scr-new-07 );          }        .ProductList-filter-list-item:nth-child( 8 ) {        -webkit-box-ordinal-group: calc( var( --scr-new-08 ) + 1 );     -ms-flex-order: var( --scr-new-08 );     order: var( --scr-new-08 );          }        .ProductList-filter-list-item:nth-child( 9 ) {        -webkit-box-ordinal-group: calc( var( --scr-new-09 ) + 1 );     -ms-flex-order: var( --scr-new-09 );     order: var( --scr-new-09 );          }        .ProductList-filter-list-item:nth-child( 10 ) {        -webkit-box-ordinal-group: calc( var( --scr-new-10 ) + 1 );     -ms-flex-order: var( --scr-new-10 );     order: var( --scr-new-10 );          }        /* end reordering */      </style> This is for a v7.0 site using a Brine family template.
    Let us know how it goes.
  23. creedon's post in Excerpt link color was marked as the answer   
    Let's take this one first. When you put the code in Page Settings > Advanced > Page Header Code Injection did you wrap it in a <style> tag?
    <style> /* This section controls the color of links in Excerpts in any Summary layout */ .summary-excerpt a { color: #2D4977 !important; } </style>  
  24. creedon's post in Hiding a Section on Desktop only was marked as the answer   
    Replace your previous attempt with the following.
    @media screen and ( min-width: 641px ) {   [data-section-id="5ee40ec1389cec341acf59b8"] {        display: none;          }   } Let us know how it goes.
  25. creedon's post in How to reduce top padding on a specific text block? was marked as the answer   
    Add the following to Design > Custom CSS.
    /* begin reduce padding between gallery and following text block */   #collection-5f8009dc24abb73cd090d44a .gallery-block {        padding-bottom: 0;          }        #collection-5f8009dc24abb73cd090d44a .sqs-block-html {        margin-left: 1em;     padding-top: 0.25em;          }        /* end reduce padding between gallery and following text block */ This is for a v7.0 site using the Wells template.
    You can change the numbers to suit.
    Let us know how it goes.
×
×
  • Create New...