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 7.1 navigation links to vertical was marked as the answer   
    This is not a solution. I think Javascript is going to be the only way to get to where I think you are trying to go.
    If you're going CSS only the following may get you a little closer.
    @media screen and ( min-width : 641px ) { .header-nav-item:first-child, .header-nav-item:last-child { position : fixed; top : 35%; } .header-nav-item:first-child { left : 2vw; -webkit-transform : rotate( -90deg ); -ms-transform : rotate( -90deg ); transform : rotate( -90deg ); } .header-nav-item:last-child { right : 2vw; -webkit-transform : rotate( 90deg ); -ms-transform : rotate( 90deg ); transform : rotate( 90deg ); } }  
  2. creedon's post in Can't Edit Linked Product Page 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 Store Settings > Advanced > Page Header Code Injection for the store page.
    <!-- begin change tag page title SS Version : 7.1 the code is comprised of a several tags. all are needed for the full effect to work --> <style> .nested-category-title { --opacity-transition-duration : 0.5s; } </style> <script> const tag = 'SALE'; const title = 'For Sale'; </script> <!-- do not change anything below, there be the borg here --> <style> .nested-category-title { opacity : 0; transition : opacity var( --opacity-transition-duration ); } </style> <script> $( ( ) => { const getSearchParameter = ( key ) => { let data = { hasKey : false, value : null } if ( location.search ) { const searchParams = new URLSearchParams ( location.search ); data.value = searchParams.get ( key ); if ( data.value !== null ) data.hasKey = true; } return data; } const tagSearchParameter = getSearchParameter ( 'tag' ); if ( ! tagSearchParameter.hasKey ) return; if ( tagSearchParameter.value != tag ) return; $( '.nested-category-title' ) .text ( title ) .css ( 'opacity', 1 ); } ); </script> <!-- end change tag page title --> This is for v7.1
    Let us know how it goes.
  3. creedon's post in Can't Edit Linked Product Page was marked as the answer   
    If you've not already done so, 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 Store Settings > Advanced > Page Header Code Injection for the store page. This will be in addition to the code from the previous post.
    <script>   $( ( ) => {        /*            begin hide tag page categories              SS Version : 7.1              */            const tag = 'SALE';          // do not change anything below, there be the borg here          const getSearchParameter = ( key ) => {            let data = {                hasKey : false,         value : null                  }                if ( location.search ) {                const searchParams = new URLSearchParams ( location.search );                  data.value = searchParams.get ( key );                  if ( data.value !== null ) data.hasKey = true;                  }                return data;              }            const tagSearchParameter = getSearchParameter ( 'tag' );          if ( ! tagSearchParameter.hasKey ) return;          if ( tagSearchParameter.value != tag ) return;          $( '.nested-category-children' ).css ( 'display', 'none' );          $( '.products.collection-content-wrapper .nested-category-title' )            .css ( 'margin-bottom', '37px' );            /* end hide tag page categories */          } );        </script> This is for v7.1.
    Yep. It's virtually the same code as in the previous post. The question in my mind was to do it like this? Or, post user code with a callback function in it? I opted for the more verbose but hopefully more understandable code from the user perspective.
    Let us know how it goes.
  4. creedon's post in Display product tags on product page was marked as the answer   
    As bangank36 mentioned you can get the tags from within the page.
    let tags = $( '#productWrapper' ) .attr ( 'class' ) .split ( ' ' ) .filter ( clss => clss.startsWith ( 'tag-' ) ); Let us know how it goes.
  5. creedon's post in Custom code BUTTONS was marked as the answer   
    @JujuG
    I just tested including a product block of an item in the additional info area of that same product item. It worked a treat! I turned off all the options except the Add To Cart button.
    I didn't test if you could achieve the same layout you have but I suggest giving it a go. Unless of course I've totally misunderstood what you want.
    Let us know how it goes.
  6. creedon's post in Redirect To a Specific Page Depending on Form Dropdown was marked as the answer   
    In the thread you cite I have updated my October 19, 2020 code post.
    Install that code and replace selectFormFieldName and optionUrlMappings.
        const selectFormFieldName = 'Length of Dues';          const optionUrlMappings = {            /*                the format of each line is a select field option as entered in the SS         form block interface and the post-submit redirect URL for the option                  */                // '[enter select field option here]' : '[enter url here]',              '1 Month'  : '/1-month',       '6 Months' : '/6-months',              // last or only item doesn't get a comma at end of line              '1 Year'   : '/1-Year'              }        Let us know how it goes.
  7. creedon's post in Reduce linespacing in footer's social links block? Also in a footer text block was marked as the answer   
    Nothing inherently wrong with negative margins. If it works. It works! 🙂
  8. creedon's post in How to add variant text below product image? 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 Store Settings > Advanced > Page Header Code Injection for the store page.
    <!-- begin add product item variant text to corresponding image as badge SS Version : 7.1 the code is comprised of a style and script tag. both are needed for the full effect to work --> <style> .tc-ProductItem-variant-image-title { background-color : black; bottom : 2%; color : white; font-family : 'Amatic SC'; font-size : 24px; font-weight : 600; left : 0; /* use to push the badge right */ padding : 0 0.5em; position : absolute; } </style> <script> $( ( ) => { const imageIdTileMappings = { } $.each ( Static.SQUARESPACE_CONTEXT.product.variants, function ( i, v ) { imageIdTileMappings [ v.mainImage.id ] = v.mainImage.title; } ); $( '.ProductItem-gallery-slides-item' ).each ( function ( ) { let $this = $( this ); const dataImageId = $this.attr ( 'data-image-id' ); const title = imageIdTileMappings [ dataImageId ]; if ( title == undefined ) return true; $( '<div class="tc-ProductItem-variant-image-title" />' ) .text ( title ) .appendTo ( $this ); } ); } ); </script> <!-- end add product item variant text to corresponding image as badge --> This is for a v7.1 site and is specific to the OP's needs.
    I couldn't find a clean way to add the title per your posted image. I ended up adding it as a badge in the lower left corner of the image.

    Let us know how it goes.
  9. creedon's post in Underlining Portfolio Links was marked as the answer   
    Give the following a go.
    #collection-603dfe8230a75a35a9d38ea5 .portfolio-hover-item:hover {   text-decoration : underline 1px;      } This is for v7.1 and specific to OP's need.
    You can play with the 1px (px is pixels) to increase the thickness of the underline. If you want to make the underline permanent remove :hover from the first line.
    Let us know how it goes.
  10. creedon's post in Embedding Video into Block was marked as the answer   
    Create a code block on your page where you want the video to appear and put your code in there.
    Creating a code block is like adding any other block to your page, just scroll down the dialog until you find the code block and click on it.

    Let us know how it goes.
  11. creedon's post in Reduce linespacing in footer's social links block? Also in a footer text block was marked as the answer   
    Add the following to Design > Custom CSS.
    /* remove bottom padding from footer social block */ #block-31fb3bf90520f064ca03 {   padding-bottom : 0;      } This is for v7.1 and specific to the OP's needs.
    Hit us up if you need more space removed from elsewhere.
    Let us know how it goes.
  12. creedon's post in centre store title and reduce + x menu size mobile version was marked as the answer   
    a) Add the following to Design > Custom CSS.
    .cart-title {   text-align : center;      } b) Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.
    <style>   /* center category title on mobile */      @media screen and ( max-width : 575px ) {        .products.collection-content-wrapper .nested-category-title {            justify-content : center;              }     }        </style> c) Add the following to Design > Custom CSS.
    /* make navigation menu open (plus)/close (x) icon smaller on mobile */ .burger-inner.header-menu-icon-plus .top-bun, .burger-inner.header-menu-icon-plus .bottom-bun   {        width : 20px;          } This is for v7.1.
    Let us know how it goes.
  13. creedon's post in Can't remove button off of header. was marked as the answer   
    No code needed. Edit your header and turn off the button.

    Let us know how it goes.
  14. creedon's post in How to add products on the homepage and put multiple next to each other (central position) with a link to the product page was marked as the answer   
    Generally there are two built-in ways to go about this. Use summary blocks or product blocks.
    I'm not sure if they'll behave the way you want by default. But give them a go and see if either of them gets close to what you want. If not then it might be possible to alter them in some way with Javascript.
  15. creedon's post in Text Alignment on Mobile Collections was marked as the answer   
    Add the following to Portfolio Settings > Advanced > Page Header Code Injection for the portfolio page.
    <style> /* fix for uncentered menu links on mobile */ .portfolio-hover[data-horizontal-align="center"][data-mode="hover-cover"] .portfolio-hover-item-content {   margin-left : 0;   margin-right : 0;      } </style> Let us know how it goes.
  16. creedon's post in Adding a Custom Colored Hyperlink to a Hidden Page was marked as the answer   
    Add the following to Design > Custom CSS.
    /* music lab link/hover effect */ #collection-5cad3f28104c7bc67dcc0dcf #musiclab-navigation.Index-page--has-image h1 a {   border-bottom-color : red;      } #collection-5cad3f28104c7bc67dcc0dcf #musiclab-navigation.Index-page--has-image h1 a:hover {   border-bottom-color : yellow;      } This is for v7.0 using the Brine template family and is specific to the OP's needs.
    Let us know how it goes.
  17. creedon's post in Adding an image as the background on both the store page and the individual product pages (hawley) was marked as the answer   
    Add the following to Design > Custom CSS.
    /*   begin change cart style      SS Version : 7.1      */      #cart .empty-message,   ._3qWE9VU-U /* subtotal label */        {            text-transform : lowercase;              }          ._3qWE9VU-U, /* subtotal label */   ._2JFeDgZcv, /* subtotal amount */   .item-price,   .item-quantity input,   ._1MDgZZPKX a /* item title */        {            font-size : 14px !important;              }          /* end change cart style */ This is for v7.1.
    Let us know how it goes.
  18. creedon's post in Anchor links and a webshop. Links dont work from when on webshop was marked as the answer   
    It sounds like your links are in the form of "#anchor-link-one", "#anchor-link-two", etc.
    If you change them to "/-page#anchor-link-one", "/a-page#anchor-link-two", etc. then you can navigate from anywhere within the site.
    Let us know how it goes.
  19. creedon's post in Issue with grid of image poster blocks not viewing properly on a tablet was marked as the answer   
    I think this is as about as good as you can get with forcing stacking.
    Add the following to Design > Custom CSS.
    /* force stacking earlier than normal for six image block page section */ @media screen and ( min-width: 768px ) and ( max-width : 840px ) { [data-section-id="6010bbb5af3a5428e7094302"] .sqs-layout [class*=sqs-col] { float : none !important; margin-left : auto; margin-right : auto; width : 75% !important; } } Let us know how that looks to you.
  20. creedon's post in Space between two seperate Gallery Blocks was marked as the answer   
    Add the following to Design > Custom CSS.
    [data-section-id="6038126a4e0a6a3472db32e4"] {   margin-bottom : 5px;      } This is for a v7.1 site.
    This will put a margin at the bottom of the first gallery in the image you showed.
    Let us know how it goes.
  21. creedon's post in Code to centre "add to cart" button on custom product form was marked as the answer   
    You can center that button by editing the form.

    Let us know how it goes.
  22. creedon's post in Change Email for Orders Coming In was marked as the answer   
    You can invite the email address to be a contributor with the Store Manager  privilege.

    Then once the invite has been accepted log in to https://account.squarespace.com/ with the email account and set up the notifications to send Store Notifications.

  23. creedon's post in How can I change the Font Family for just a single was marked as the answer   
    Some possible directions to head.
    What font file types does Android support?
    Using .otf fonts on web browsers
  24. 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.
  25. 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.
×
×
  • Create New...