Jump to content

Agha_Waqas

Member
  • Posts

    133
  • Joined

  • Last visited

  • Days Won

    1

Posts posted by Agha_Waqas

  1. 11 hours ago, dariokomazec said:

    Hi,

    I'm not good at coding so any help will be appreciated.

    I want to change the default SEARCH link to external one and I have done this successfully with this code below but the problem is I don't know how to force it to open in a new tab. I have tried adding the target= "_blank" to the code but as I already said I'm not good at this so no luck, I don't know how to do this...

    <script>
      
      $(document).ready(function() { 
        $('a[href="/search"]').attr('href','https://www.google.com/');
    	});
      
    </script>

    So I need help with this code above, code is 100% working I only want to open the https://www.google.com/ in the new tab...

    Thanks

    same thing you need to do via jquery. Add target attr like you add the href.
     

     $('a[href="/search"]').attr("target", "_blank");
    
  2. 38 minutes ago, Ginger_Meadow_08 said:

    Is there a way to have an image interactive where you can click on multiple parts of the image like a map? I have an image that has multiple spots we would like to have linked to a separate page. 

    Hi, yes we can do that, Will you inbox me the image so i will see. though we can create that functionality with Custom Code (hmtl, css and js)

  3. 1 hour ago, schamberlain said:

    Site URL: https://spencerchamberlain.net/workforpeople

    Running into an issue where on mobile, my horizontally scrolling galleries are displaying in a way that leaves most of the screen as negative space, and is pretty unpleasant to look at. It looks great on desktop, but if there's a way I can force these kind of galleries to behave in the way a vertical gallery block would, I'd prefer to do that. Example images of what it should look like compared to what it currently displays.

    IMG_3E261A2F53A4-1.jpeg

    IMG_A52DB61830B5-1.jpeg

    Hi, i just write a code for your request, please applied below code into CSS editor and see if that works, for you,


    @media (max-width: 520px) {
        #block-yui_3_17_2_1_1636053602153_275376 {
            .sqs-intrinsic {
                padding-bottom: 20px !important;
                .sqs-intrinsic-content {
                    height: auto !important;
                    position: relative !important;
                    .sqs-wrapper {
                        width: 100% !important;
                        heeight: auto !important;
                        display: flex !important;
                        flex-direction: column;
                        .sqs-gallery-design-strip-slide {
                            margin-bottom: 10px !important;
                        }
                    }
                }
                .sqs-gallery-controls {
                    display: none !important;
                }
            }
        }
    }

  4. 13 minutes ago, 7TK said:

    Site URL: https://www.frjohnharvey.com/featured-articles

    Hello - I'd be grateful for some guidance.  🙂  I've added a page to my site which has four grid blocks per row when viewed on a desktop - that's fine.  When viewed on a phone, there's just one block per row and that's fine too.

    What I'd like to do is add custom css (I'm on a personal plan) which shows only two blocks per row when the page is viewed on devices that have a minimum width of 768 px and a maximum width of 1024 px.

    I've tried following some of the coding already provided in these forums, but I must be doing something wrong, because I can't get it to work.

    Thank you in advance!

    Hi, i just write a code for your request. please apply it on your CSS editor
    @media (min-width:751px) and (max-width:1024px) {
        .blog-basic-grid {
            grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        }
    }

  5. 1 hour ago, pbueno24 said:

    Site URL: https://pte.squarespace.com/ourwork

    Hey,

    I would like to change the order of the Blog-Title and Blog-Excerpt within the HTML. I managed to do so using the developer tools, but how would I swap their order within Squarespace / is this even possible? I've attached an image to show what I'm going for. The left side of the image is what I'm trying to achieve. Thanks!

    Screenshot (20).png

    Hi you can do this via CSS. Add below code into CSS editor
    [data-section-id="614251ce615b993943a8acb9"] .blog-basic-grid--text { display: flex; flex-direction: column-reverse;}

  6. 59 minutes ago, MadcapCreative said:

    Site URL: https://caillouxcheeseshop.squarespace.com

    Hi y'all!

    I have scrolling text on my homepage and it is making the width of the page really wide, as long as the text, on both desktop and mobile view. If you swing to the right, you just see the scrolling text. Is there any way to change this?

    caillouxcheeseshop.squarespace.com

    ps: CAILLOUX

    Thank you to every contributor that has helped answer questions here. I've learned so much in this forum--and this is my first time actually posting!

    Hi, you can do this via overflow hidden property of that section below is the code you can copy paste code into CSS editor

    [data-section-id="61841fb973f9a25df25f5cb4"] { overflow: hidden !important;}

  7. 2 minutes ago, S74 said:

    Site URL: https://www.gagroup.co.nz/accessible-bathroom

    Hello I tried to use this code: https://codepen.io/shshaw/pen/WXMdwE on my website here: https://www.gagroup.co.nz/accessible-bathroom but the animation and tick isnt working. Does anyone know why?

    Here's the code:

    <svg viewBox="0 0 0 0" style="position: absolute; z-index: -1; opacity: 0;">
      <defs>
        <linearGradient id="boxGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="25" y2="25">
          <stop offset="0%"   stop-color="#bfd788"/>
          <stop offset="100%" stop-color="#84BD00"/>
        </linearGradient>
    
        <linearGradient id="lineGradient">
          <stop offset="0%"    stop-color="#bfd788"/>
          <stop offset="100%"  stop-color="#84BD00"/>
        </linearGradient>
    
        <path id="todo__line" stroke="url(#lineGradient)" d="M21 12.3h168v0.1z"></path>
        <path id="todo__box" stroke="url(#boxGradient)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
        <path id="todo__check" stroke="url(#boxGradient)" d="M10 13l2 2 5-5"></path>
        <circle id="todo__circle" cx="13.5" cy="12.5" r="10"></circle>
      </defs>
    </svg>
    
    
    <div class="todo-list">
      <label class="todo">
        <input class="todo__state" type="checkbox" />
        
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
          <use xlink:href="#todo__line" class="todo__line"></use>
          <use xlink:href="#todo__box" class="todo__box"></use>
          <use xlink:href="#todo__check" class="todo__check"></use>
          <use xlink:href="#todo__circle" class="todo__circle"></use>
        </svg>
    
        <div class="todo__text">1. What bathroom activities require a user to need assistance?</div>
        
      </label>
    
      <label class="todo">
    
        <input class="todo__state" type="checkbox" />
    
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
          <use xlink:href="#todo__line" class="todo__line"></use>
          <use xlink:href="#todo__box" class="todo__box"></use>
          <use xlink:href="#todo__check" class="todo__check"></use>
          <use xlink:href="#todo__circle" class="todo__circle"></use>
        </svg>
    
        <div class="todo__text">2. Are there medical supplies necessary and where do they need to be placed?</div>
        
      </label>
    
      <label class="todo">
        <input class="todo__state" type="checkbox" />
        
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
          <use xlink:href="#todo__line" class="todo__line"></use>
          <use xlink:href="#todo__box" class="todo__box"></use>
          <use xlink:href="#todo__check" class="todo__check"></use>
          <use xlink:href="#todo__circle" class="todo__circle"></use>
        </svg>
        
        <div class="todo__text">3. Is a tub or shower preferred?</div>
      </label>
      
        <label class="todo">
        <input class="todo__state" type="checkbox" />
        
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
          <use xlink:href="#todo__line" class="todo__line"></use>
          <use xlink:href="#todo__box" class="todo__box"></use>
          <use xlink:href="#todo__check" class="todo__check"></use>
          <use xlink:href="#todo__circle" class="todo__circle"></use>
        </svg>
        
        <div class="todo__text">4. What activities does a user do independently where grab bars should be placed?</div>
      </label>
        <label class="todo">
        <input class="todo__state" type="checkbox" />
        
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
          <use xlink:href="#todo__line" class="todo__line"></use>
          <use xlink:href="#todo__box" class="todo__box"></use>
          <use xlink:href="#todo__check" class="todo__check"></use>
          <use xlink:href="#todo__circle" class="todo__circle"></use>
        </svg>
        
        <div class="todo__text">5. Will users condition deteriorate over time and what will users needs be in the future?</div>
      </label>
      
    </div>
    
    <style>
    @duration: 0.8s;
    
    .todo-list {
      background: #FFF; 
      font-size: 1.1rem;
      max-width: 33em;
      margin: auto;
      padding: 0.5em 1em;
      box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
    }
    
    .todo {
      display: block;
      position: relative;
      padding: 1em 1em 1em 16%;
      margin: 0 auto;
      cursor: pointer; 
      border-bottom: solid 1px #ddd;
      
      &:last-child { border-bottom: none; }
    }
    
    .todo__state {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }
    
    .todo__text {
      color: saturate(#1B4A4E,15%);
      transition: all @duration/2 linear @duration/2;
    }
    
    .todo__icon {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: auto;
      margin: auto;
      
      fill: none;
      stroke: #27FDC7;
      stroke-width: 2;
      stroke-linejoin: round;
      stroke-linecap: round;
    }
    
    
    .todo__line,
    .todo__box,
    .todo__check {
      transition: stroke-dashoffset @duration cubic-bezier(.9,.0,.5,1);
    }
    
    
    .todo__circle {
      stroke: #27FDC7;
      stroke-dasharray: 1 6;
      stroke-width: 0;
      
      transform-origin: 13.5px 12.5px;
      transform: scale(0.4) rotate(0deg);
      animation: none @duration linear; //cubic-bezier(.08,.56,.04,.98);
      
      @keyframes explode {
        //0% { stroke-width: 0; transform: scale(0.5) rotate(0deg); }
        30% { 
          stroke-width: 3;
          stroke-opacity: 1;
          transform: scale(0.8) rotate(40deg);
          //animation-timing-function: cubic-bezier(.89,.01,.95,.51);
        }
        100% { 
          stroke-width: 0;
          stroke-opacity: 0;
          transform: scale(1.1) rotate(60deg);
          //animation-timing-function: cubic-bezier(.08,.56,.04,.98);
        }
      }
    }
    
    .todo__box { 
      stroke-dasharray: 56.1053, 56.1053; stroke-dashoffset: 0;
      transition-delay: @duration * 0.2; 
    }
    .todo__check {
      stroke: #27FDC7;
      stroke-dasharray: 9.8995, 9.8995; stroke-dashoffset: 9.8995;
      transition-duration: @duration * 0.4; 
    }
    .todo__line {
      stroke-dasharray: 168, 1684; 
      stroke-dashoffset: 168;
    }
    .todo__circle { 
      animation-delay: @duration * 0.7; 
      animation-duration: @duration * 0.7; 
    }
    
    .todo__state:checked {
      
      ~ .todo__text { transition-delay: 0s; color: #5EBEC1; opacity: 0.6; }
      
      ~ .todo__icon .todo__box { stroke-dashoffset: 56.1053; transition-delay: 0s; }
      ~ .todo__icon .todo__line { stroke-dashoffset: -8; }
      ~ .todo__icon .todo__check { stroke-dashoffset: 0; transition-delay: @duration * 0.6; }
      ~ .todo__icon .todo__circle { animation-name: explode; }
      
    }
    
    html { background: #ddd; }
    html { height: 100%; display: flex; }
    body { width: 100%; margin: auto; }</style>
    
    <script>console.clear();
    
    setTimeout(function(){
      document.querySelector('input[type="checkbox"]').setAttribute('checked',true);
    },100);
    /*
    
    // Javascript was initially used, but wasn't really necessary. Javascript droppped, but left here for archival purposes.
    
    var todoTemplate = function(id){ 
      return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 25" class="todo__icon">
        <defs>
          <mask id="myMask${id}" maskUnits="userSpaceOnUse" x="0" y="0">
            <g stroke="#FFF" fill="none">
              <path class="todo__line" d="M21 12.3h168"/>
              <path class="todo__box" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"/>
              <path class="todo__check" d="M10 13l2 2 5-5"/>
            </g>
          </mask>
        </defs>
        <rect fill="url(#todoGradient)" mask="url(#myMask${id})" width="100%" height="100%" />
        <circle class="todo__circle" cx="13.5" cy="12.5" r="10" />
      </svg>`
    };
    
    var todos = [ ...document.querySelectorAll('.todo') ].forEach(activateTodo);
    
    function offsetPath(path, offset){
      var length = path.getTotalLength();
      path.style.transition = 'none';
      path.style.strokeDasharray = length + ' ' + length + offset;
      path.style.strokeDashoffset = length; 
      setTimeout(function(){ path.style.transition = null; },20);
      return length;
    }
    
    function togglePath(path, toggle, offset = 0){
      var length = offsetPath(path, offset);
    
      function updatePath(toggle){
        return path.style.strokeDashoffset = ( toggle ? -offset : length );
      }
    
      updatePath(toggle);
      return updatePath;
    }
    
    function activateTodo(todo, i){
      
      todo.insertAdjacentHTML('afterbegin', todoTemplate(i));
      
      var line = todo.querySelector('.todo__line'),
          updateLine = togglePath(line, false, 4);
    
      var box = todo.querySelector('.todo__box'),
          updateBox = togglePath(box, true);
    
      var check = todo.querySelector('.todo__check'),
          updateCheck = togglePath(check);
    
      var toggle = false;
    
      todo.addEventListener('click', function(){
        toggle = !toggle;
        updateLine(toggle);
        updateBox(!toggle);
        updateCheck(toggle);
        if ( todo.classList ) { todo.classList[ toggle ? 'add' : 'remove' ]('todo--checked'); }
      });
      
    }
    
    */</script>

     

    hi. i just review the code. sometimes i also faces this problem due to the variable they took.
    @duration: 0.8s;

    May be that will be the issue. you need to add 0.8s to each code where it uses that variable. give it a try.

  8. 25 minutes ago, skycircle said:

    Site URL: https://crocodile-iris-lkc9.squarespace.com/

    Hi there, wondering if anyone can help me. My site is looking fine on desktop view, but when I switch to mobile view the text at the bottom of the home page overlaps as per the image attached/below. If anyone knows how to stop this from happening it would be greatly appreciated.

    Website is at https://crocodile-iris-lkc9.squarespace.com/ password is ossian01 if you need it.

    Thanks!

    Screenshot 2021-10-12 212238.png

    hi i just reviewed your website and it seems like your custom code is conflicting this. 

    below is the code which created the issue,

     

    #page .page-section:nth-of-type(12) {
    min-height: 20vh !important;
    height: 45vh;
    }

    Remove it and it will resolved.
  9. 7 hours ago, Rolaa said:

    Hello Agha_Waqas,

    I have the same problem, but the code that's blocking it must be different because I couldn't find it in my code... Can you help?

    The page where the summary images don't work as clickable links is:
    https://www.thecarolamoon.com/projects

    Thank you heaps! Carola

    Hi. i review it and it seems like the custom code is blocking it.
    please remove below code from your CSS editor.
     

    .summary-thumbnail-container {

     pointer-events: none !important; 

    }
  10. 2 hours ago, francescalo said:

    Site URL: https://www.flocdesign.com/home-2

    Hi, I would like to have my gallery slide show visible under the header.

    Basically I do not want to see the white background in the header, but the slideshow. 

    link: https://www.flocdesign.com/home-2

    exactly like in the image attached.

    Can someone help?

    Thank you

    Francesca

    Screen Shot 2021-08-18 at 1.56.51 PM.jpg

    Hi, You need to remove the top padding of the section. below is the code.

    [data-section-id="611d47af4095211195eef4f4"] { padding-top: 0 !important; }

  11. 2 hours ago, livie_kor said:

    Site URL: http://pineleafcrystals.co

    Website link: pineleafcrystals.co/shop

    Is it possible to make the quick view button see through or white and smaller so it doesn't block so much of the image? I'm having some difficulty changing it on my own.

     

    hi, you can use below code into CSS editor to make the quick button and font size small. 
    .sqs-product-quick-view-button { padding: 8px !important; font-size: xx-small !important;}

  12. 45 minutes ago, TrueNatureDreams said:

    Site URL: https://www.truenaturedreams.com/shop

    Hi guys, please help! I'd really appreciate it!

    I added some code to create a 'scroll to top' button on my site, which I was really happy with.

    But I've just added a Store page and when I did a test sale the 'add to cart' button has merged and become the 'scroll to top' button, so customers can't view their cart or complete check out! 

    I tried just deleting the original CSS/code for 'scroll to top' button, so it doesn't cause any conflict but can't find out where it is on my site, I did it so long ago!

    Can anyone please help? I can't sell items through my store until I can fix this!

    Thank you, Becs 🙂 

    Screenshot 2021-08-02 at 11.51.22.png

    Screenshot 2021-08-02 at 11.51.39.png

    Hi, You can simply add spacing between the "cart icon" and "back to top" buttons by following below code. so both buttons show on the bottom right corner with no mess.
    .floating-cart {bottom: 80px !important;}

    or if you want to remove the "back to top" the code will be in the Header code injection. go to settings> advance > code injection

  13. 26 minutes ago, Katie_B said:

    Site URL: https://pumpkin-strawberry-tcz5.squarespace.com

    https://pumpkin-strawberry-tcz5.squarespace.com

    PASSWORD: kb

    Hello.

    I've added a full width underline on my header, but it gets hidden on the mobile menu overlay. 

    I'd like to know if there's way to keep the underline on the mobile overlay menu too. 

    Thanks, Katie. 

     

     

    Screenshot 2021-07-12 at 11.30.25.png

    Screenshot 2021-07-12 at 11.30.34.png

    Hi, yes you can add it by using below code into CSS editor
    .header-menu--folder-list .header-menu-nav {
        border-top: 1px solid #000 !important;
    }

  14. 15 hours ago, camilla_ksd said:

    Thank you for checking it out, @Agha_Waqas! 🙂

    When I look at the code in the code block the space doesn't show up. It just looks exactly like this: 

    <a href="#" data-featherlight="#bio-nan"></a>

    Am I looking in the wrong spot since I can't find the &nbsp;&nbsp;</div> part that you see in the source code? Or could there be any other reason why it's hidden? 

    Thank you so much for your time and help! 

    ahh yes maybe you are seeing on wrong one. please check this "Malcolm DeFils" this team member and onwards. 

  15. 4 hours ago, camilla_ksd said:

    Site URL: https://www.ahc-oakland.org/team

    I've build this page (https://www.ahc-oakland.org/team) with several different code blocks, but for some reason the code block under the second image (Nan) makes everything below it jump down on the page. I cannot seem to figure out why! 

    Any help would be appreciated! 🙂

    Thanks!  

    hi. i just check the source code it seems like the div you hide, it have space after the anchors tag,below is a code which is show in inspect element 
    <a href="#" data-featherlight="#bio-nan"></a>&nbsp;&nbsp;</div>

    Remove this space it will fix.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.