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

creedon

Circle Member
  • Posts

    3,623
  • Joined

  • Last visited

  • Days Won

    38

Community Answers

  1. creedon's post in How to place 2 images on opposite sides of the page? (visual example below) was marked as the answer   
    Even though you're not using a background image on that section, set the background image to full bleed.

    Add the following to Design > Custom CSS.
    [data-section-id="60c3a049a9e0ef1b010386eb"]:not( .full-bleed-section ) > .content-wrapper {   padding-left : 0;   padding-right : 0;      } Let us know how it goes.
     
  2. creedon's post in How to place 2 images on opposite sides of the page? (visual example below) was marked as the answer   
    Here is the basic effect. I set the content width of the page section to custom 100.

    You can of course put any block(s) you want in the middle area.
    Then I threw on some CSS to get the section to be full-bleed.

    Once you get the basic effect started and are happy with the direction it is going hit us up for the CSS.
    v7.1 has only one template. What SS calls templates for v7.1 are a starting point of colors and fonts.
    Please see Adding content with blocks - Add blocks to a page and Resizing blocks.
    Let us know how it goes.
  3. creedon's post in Changing sidebar content alignment was marked as the answer   
    Add the following to Design > Custom CSS.
    @media only screen and ( min-width : 801px ) { body.sidebar-position-left #headerWrapper { bottom : 40px; top : unset !important; } } This is for v7.0 using the Wells template.
    Let us know how it goes.
  4. creedon's post in How to create a hover filter for everything but the hovered item in galleries? was marked as the answer   
    First remove, save a copy somewhere, any previous attempts at this effect.
    Please see Page Section Gallery Hover on Everything But.
    Let us know how it goes.
  5. creedon's post in How can I add a line in a drop-down menu at a specific point? was marked as the answer   
    @Oceanliner_Designs
    Add the following to Design > Custom CSS.
    // begin menu item dividers, uses LESS syntax // desktop .Header-nav-item--folder:nth-of-type( 2 ) { // ships .Header-nav-folder-item:nth-of-type( 3 ), // lusitania .Header-nav-folder-item:nth-of-type( 5 ) // shipping lines { border-bottom : 1px solid; margin-bottom : 0.5em; padding-bottom : 0.75em; } } // mobile .Mobile-overlay-folder:nth-of-type( 2 ) { // ships .Mobile-overlay-folder-item:nth-of-type( 3 ), // lusitania .Mobile-overlay-folder-item:nth-of-type( 5 ) // shipping lines { border-bottom : 1px solid; margin-bottom : 0.5em; padding-bottom : 0.5em; } } // end menu item dividers This is for v7.0 using the Brine template family and is very specific to the poster's need. All the previous caveats apply. You'll need to remove the place holders first.
    Let us know how it goes.
  6. creedon's post in York/Jasper: Add Page Descriptions to Index Page was marked as the answer   
    These should get you started.
    #index-section-deartoyota .index-item-text-wrapper:after {   color : white;   content : '[enter description here between single quotes]';      } #index-section-toyota-rm .index-item-text-wrapper:after {   color : white;   content : '[enter description here between single quotes]';      } Just replicate the ruleset changing the id.
    index-section-toyota-javy-baez
    index-section-target
    index-section-welly
    index-section-cygnet-lake-1
    index-section-draft-design-house-1
    index-section-about-1
    Let us know how it goes.
  7. creedon's post in how to disable the 'posts X in Y' metadata at the beginning of each different category tag on an index? [RALLY] was marked as the answer   
    Add the following to Design > Custom CSS.
    .collection-type-blog.view-list .BlogList-filter {   display : none;      } This is for v7.0 using the Brine template family.
    Let us know how it goes.
  8. creedon's post in Localize "Type to search..." placeholder text on the Search Page was marked as the answer   
    Add the following to Settings > Advanced > Code Injection > FOOTER.
    <script>   $( ( ) => {        /*            begin change search page input placeholder text              Version       : 0.1d0              SS Version    : 7.0              Templates     : Brine ( Aria, Blend, Cacao, Clay, Fairfield, Feed, Foster,                       Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt,                       Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor,                       Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro,                       Pursuit, Rally, Rover, Royce, Sofia, Sonora, Stella,                       Thorne, Vow, Wav, West )                                              your template is not listed? then it is not currently                       supported                              Dependancies  : jQuery              By            : Thomas Creedon < http://www.tomsWeb.consulting/ >              */            const placeholderText = 'Ввет для поиска...';          // do not change anything below, there be the borg here          if ( location.pathname !== '/search' ) return; // bail if not search page          if ( ! ( 'MutationObserver' in window ) ) return;          const observer = new MutationObserver ( function ( mutations ) {            $.each ( mutations, function ( ) {                if ( ! this.addedNodes.length ) return;                  const $e = $( 'input', $( this.addedNodes [ 0 ] ) );                  if ( ! $e.length ) return;                  $e.attr ( 'placeholder', placeholderText );                  observer.disconnect ( );                  } );                } );            // start listening for changes in search input          observer.observe ( $( '.sqs-search-page-input' ) [ 0 ], {            childList : true              } );            } );        </script> Let us know how it goes.
  9. creedon's post in Redirect Add to Cart to External Retailer was marked as the answer   
    Please see the following.
    Let us know how it goes.
  10. creedon's post in Collapsible FAQ works in editing mode, but not public view was marked as the answer   
    The first time I loaded the page there was no collapsing going on. The second time I loaded the page I could see the collapsing effect.
    I wonder if this is yet another case of the curse of Ajax Loading. Could you try turning off Ajax Loading to see if the problem goes away?
  11. creedon's post in Style one character of a product title on the product page? was marked as the answer   
    Replace your text block with a code block and add the following.
    <p> <span style="color : red;"> ◉ </span> = limited edition prints available </p> Let us know how it goes.
  12. creedon's post in Styling a single product border on product page was marked as the answer   
    Use the following CSS.
    .ProductList-item:not( .tag-no-shadow ) .ProductList-outerImageWrapper {   box-shadow : 2px 2px 3px;      } This is for v7.0 using the Brine template family.
    Then add tags to the products you don't want shadow boxes on. You can of course change the tag name to anything you want. It just needs to start with tag-, in the CSS.
    Let us know how it goes.
  13. creedon's post in Can I have multiple 'Blog' page layouts in one site? was marked as the answer   
    The following solution requires the business plan or above.
    Add the following to Blog Settings > Advanced > Page Header Code Injection for the blog page you want in the stacked style.
    <script>   /*        begin change blog style from grid to stacked          SS Version : 7.0          Template   : Brine ( Aria, Blend, Cacao, Clay, Fairfield, Feed, Foster,                  Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke,                  Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer,                  Miller, Mojave, Moksha, Motto, Nueva, Pedro, Pursuit, Rally,                  Rover, Royce, Sofia, Sonora, Stella, Thorne, Vow, Wav, West )                                    your template is not listed? then it is not currently                  supported                       */          window.addEventListener ( 'DOMContentLoaded', ( ) => {            const classList = document.body.classList;              classList.add ( 'tweak-blog-list-style-stacked' )              classList.remove ( 'tweak-blog-list-style-grid' );              } );            /* end change blog style from grid to stacked */        </script> This is for v7.0 using the Brine template family.
    Let us know how it goes.
  14. creedon's post in Express checkout for certain products only was marked as the answer   
    Please see Redirect to Url After Add to Cart Button Has Been Clicked and SS Indicates.
    @Carrzer You can skip the first step in the Quick Install as you already have jQuery installed.
    Let us know how it goes.
  15. creedon's post in end anchor link at section was marked as the answer   
    No need to do this step as you already have jQuery installed. 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 each page where you want url fragments link to the top of a section.
    <script> $( ( ) => { /* begin add id attributes to sections SS Version : 7.1 Note : excludes header and footer sections */ /* the ids are added by position so for each section an entry must be added to sectionIds, if you don't want to add an id to a particular section, leave the id empty */ const sectionIds = [ '', 'about', 'contact', ] // do not change anything below, there be the borg here $( '#sections section' ).each ( function ( i ) { const sectionId = sectionIds [ i ]; if ( ! sectionId ) return true; $( this ).attr ( 'id', sectionId ); } ); // end add id attributes to sections } ); </script> This is for v7.1.
    You'll want to remove your code block.
    Let us know how it goes.
  16. creedon's post in Remove author, date and newer/older in Hayden (Bedford family) blogs was marked as the answer   
    Add the following to Blog Settings > Advanced > Page Header Code Injection for the blog page.
    <style>   .next-label,   .prev-label        {            visibility : hidden;              }          .next-label:before {        content : '>';     visibility : visible;          }        .prev-label:before {        content : '<';     visibility : visible;          }        </style> This if for v7.0 using the Bedford template family.
    You will need to remove the CSS selector for hiding the pagination of course. Also you may want to add some font properties to adjust size and such.
    Let us know how it goes.
  17. creedon's post in Automatically remove products based on age/date was marked as the answer   
    You might be able to use tags and some Javascript to hide products.
    You could do something like expire MMDDYY for a tag. Then Javascript would scan for tags beginning with expire and check the current date against the date parsed from the tag. If the current date is greater than the tag date then hide the product.
    The other approach might work as well. The tag would be date MMDDYY. The code would check to see if the current date is n number of days after the tag date. If so, hide the product.
    Would something like these work for your needs?
  18. creedon's post in How to add images to product description was marked as the answer   
    @elizamoraes
    I looked at a page with an icon on it on my ancient iPhone 5/iOS v10.x and the icon looked fine.
    If you scan down your installed code and find the line...
    width : 100px; /* width of images */ ...and make it look like...
    height : 100px; /* height of images */ width : 100px; /* width of images */ ...that may take care of the issue.
    Let us know how it goes.
  19. creedon's post in How to add images to product description was marked as the answer   
    @elizamoraes
    Replace my code in Store Settings > Advanced > Page Header Code Injection for the store page with the following.
    The poster has already done the follwing step. If you have not, 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> Replace the previous code in Store Settings > Advanced > Page Header Code Injection with the following.
    <!-- begin add images to product detail page based on tags SS Versions : 7.0, 7.1 v7.0 Templates : Brine ( Aria, Blend, Cacao, Clay, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Pursuit, Rally, Rover, Royce, Sofia, Sonora, Stella, Thorne, Vow, Wav, West ) your template is not listed? then it is not currently supported Notes : the code is comprised of several tags. all are needed for the full effect to work the images are added at the top of the product details area ( between title and price ) of the product detail page this effect is not active in SS Preview to test it use private browsing < https://bit.ly/3f6lhq2 >. --> <style> #tc-image-tags img { width : 100px; /* width of images */ } </style> <script> const tagImageUrlMap = { /* the format of each line is a tag as appears in the SS Product page interface and an image URL */ // '[enter tag here]' : '[enter image url here]', 'chanvre' : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591267971684-1IF105OEI4B6XI0W1GDI/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Fibre+de+chanvre', 'commerce-equitable' : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268308127-YQP0SA25LL1AADHITEF0/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/commerce+equitable', 'coton' : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591267886476-E5GICTULTY5MD5TYV4R4/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Coton+biologique', 'fabriqu-en-bretagne' : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268443787-B3T4GA6W5T3J42ZGRFU1/ke17ZwdGBToddI8pDm48kFBrwAqVMVe6YMvCRUfVHkV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UbX00RdHGEtHQ765vDpm33fR-nahLRdlIB57_C9H3YJiMW9u6oXQZQicHHG1WEE6fg/Fabrique+en+bretagne', 'fabriqu-en-espagne' : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1593073740143-Z91D2AHZCIS8LEZX08YJ/ke17ZwdGBToddI8pDm48kFBrwAqVMVe6YMvCRUfVHkV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UbX00RdHGEtHQ765vDpm33fR-nahLRdlIB57_C9H3YJiMW9u6oXQZQicHHG1WEE6fg/Fabrique+en+espagne', // 'fabriqu-en-europe' : '', 'fabriqu-en-france' : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268353403-E718QG323BR2BXDO9LV9/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/fabrique+en+france', 'fibre-ecologique' : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268001210-E6FPI5559JRED5WO9FCX/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Fibre+ecologique', 'fibre-recycl' : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1594238143847-J9EJA64CVP6SLXXY965B/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Fibre+recycl%C3%A9e', 'lin' : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591267922316-KC43DRIHFJX6NNVBIL3T/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Fibre+de+lin', 'unisexe' : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268157736-F20IPEFUQN7AZUAZ6MQA/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Unisexe', 'upcycling' : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268178661-YIQLD6FFLL4E5GA2Z15N/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Upcycling', }; </script> <!-- do not change anything below, there be the borg here --> <style> #tc-image-tags { display : -webkit-box; display : -ms-flexbox; display : flex; -ms-flex-wrap : wrap; flex-wrap : wrap; -webkit-box-pack : center; -ms-flex-pack : center; justify-content : center; margin-bottom : 25px; margin-top : 0; } </style> <script> $( ( ) => { if ( window.frameElement !== null ) return; // bail if in Preview if ( ! $( '.ProductItem' ).length ) return; // bail if not product detail const tags = $( '.ProductItem' ) .attr ( 'class' ) .split ( ' ' ) .filter ( clss => clss.startsWith ( 'tag-' ) ) .map ( ( tag ) => { return tag.slice ( 4 ); } ) .filter ( tag => tagImageUrlMap [ tag ] !== undefined ); const $imageTags = $( '<div id="tc-image-tags">' ); $.each ( tags, function ( i, tag ) { const url = tagImageUrlMap [ tag ]; $( '<img>' ) .attr ( 'src', url ) .appendTo ( $imageTags ); } ); $imageTags.prependTo ( '.ProductItem-details-checkout' ); } ); </script> <!-- end add images to product detail page based on tags --> This is for v7.0 using the Brine template family and v7.1.
    This code puts the images in a different place than the previous version. Also the layout is different, more suited to the product detail area.
    Let us know how it goes.
  20. creedon's post in Can the close button of the promotional pop-up be styled? was marked as the answer   
    Add the following to Design > Custom CSS.
    .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-close-button-style-icon .sqs-popup-overlay-close:before {   font-size : 48px;      } This is for a v7.0 site using the Brine template family.
    Let us know how it goes.
  21. creedon's post in Embedded Video Rounded Corners was marked as the answer   
    Try the following.
    #block-5475e0d2d0c890d2fc2c iframe {   border-radius : 25px;      } This is specific to the OPs need.
    You can of course change the 25px to suit.
    Let us know how it goes.
  22. creedon's post in Remove "from" in product prices with variants was marked as the answer   
    Please see Store Price Change.
    The OP doesn't need to do the initial step of the Quick Install instructions as they already have jQuery installed.
    This actually turns out to be harder than one might think. It's not just a matter of throwing some CSS at it. The way the structures are built and SS is manipulating those structures under the hood when variants are involved and one is changing menu selections makes this tricky. Basically the price text is being rebuilt on the fly when the user interact with variants.
    Let us know how it goes.
  23. creedon's post in Move Add to cart button beside Quantity input was marked as the answer   
    Please see Store Product Detail Add to Cart Button Right of Quantity.
    Let us know how it goes.
  24. creedon's post in Can't Edit Linked Product Page was marked as the answer   
    Yeah it takes a second or so for the code to make the title change. So what we can do is make the opacity of the title zero (hidden) at first, change the text, then bring the opacity up to 1 (visible).
    I have updated my change tag page title code post.
    Let us know how it goes.
  25. creedon's post in side by side buttons on mobile was marked as the answer   
    Add the following to Page Settings > Advanced > Page Header Code Injection for the size guide page.
    <style>   @media screen and ( max-width : 767px ) {        #page-section-601ead0b2fde0b5388e5d94c .sqs-row .sqs-row:nth-child( 3 ) {            display : flex;       justify-content : center;              }     }        </style> This is for v7.1 and specific the the OP's need.
    Let us know how it goes.
×
×
  • Create New...