Jump to content

Beyondspace

Circle Member
  • Posts

    9,995
  • Joined

  • Last visited

  • Days Won

    80

Posts posted by Beyondspace

  1. 3 minutes ago, Ramon-east said:

    I think it works now, I just added one more ".gallery-grid--layout-grid[data-columns="3"] .gallery-grid-item {
      width: 24%;
    }" in the code, it seems to work fine.

    Cool, we should set the gallery having 3 columns with a width value ~ 30%. I miss this case

  2. 33 minutes ago, Patrickvhnederend said:

    I didn't put it on the home page, as I can't put them as part of the BOEK NU button in the header.

     

    Do you want me to make a temp button with this? As long as it is not in the header, it works.

    Let me know

    Try adding to your footer code injection

    <script src="https://cdn.jsdelivr.net/npm/appybee-widget"></script>
    <script>
      AppyBeeWidget.init({
        companyAPIKey: 'f3a4a372f989b69e66e4bfb0a438b0b3',
        style: 'side',
        locale: 'nl'
      });
    </script>
    
    <script>
      const btns = document.querySelectorAll('header a[href="/book-now"]');
      if(btns.length) {
        btns.forEach(button => {
          button.onclick = function(e) {
            AppyBeeWidget.show();
            return false; /*preventDefault*/
          };
        })
      }
    </script>

    <button id="widget-button">Boek nu</button> on your above code can be removed

  3. 19 hours ago, k8pq said:

    WEBSITE PAGE: https://kinsmen.org/gatherings

    I have added buttons to the first Event Summary block on this page, but I'd like to exclude the buttons from the second Event Summary block on the page. The block ID is #block-yui_3_17_2_1_1710347334583_18027. I've tried adding .sqs-block-summary-v2:not(#block-yui_3_17_2_1_1710347334583_18027) to the following code without success. Can someone help, pretty please? 

     

    /* Buttons on Event Summary Blocks */
    .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item, .sqs-block-summary-v2 .summary-item.positioned {
      padding-bottom: 50px !important;
      }
      .summary-content {
        position:relative;
      }
      .summary-title .summary-title-link::after {
        content: 'REGISTER HERE';
        background-color: black;
        border-radius: 0px;
        display: block;
        padding: 13px 26px;
        font-size: .75rem;
        font-weight: 500;
        font-style: normal;
        line-height: normal;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: white;
        background-color: black;
        border-color: white;
        border: 1px solid #ffffff!important;
        position: absolute;
        bottom: -60px;
      }
      
      .summary-title .summary-title-link:hover::after {
        opacity: .8;
      }
     

    if it has only 2 summary blocks, i think we should select directly the one you want to apply style.

    If you intend to have more than 2 ones and set style for 2 summary blocks and exclude the mentioned section, you can try the following Css code

    
    .summary-v2-block.sqs-block-summary-v2:not(#block-yui_3_17_2_1_1710347334583_18027)  .summary-block-setting-design-list .summary-item, .summary-v2-block.sqs-block-summary-v2:not(#block-yui_3_17_2_1_1710347334583_18027) .summary-item.positioned {
      padding-bottom: 50px !important;
    }
    .summary-v2-block.sqs-block-summary-v2:not(#block-yui_3_17_2_1_1710347334583_18027)  .summary-content {
      position:relative;
    }
    .summary-v2-block.sqs-block-summary-v2:not(#block-yui_3_17_2_1_1710347334583_18027)  .summary-title .summary-title-link::after {
      content: 'REGISTER HERE';
      background-color: black;
      border-radius: 0px;
      display: block;
      padding: 13px 26px;
      font-size: .75rem;
      font-weight: 500;
      font-style: normal;
      line-height: normal;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: white;
      background-color: black;
      border-color: white;
      border: 1px solid #ffffff!important;
      position: absolute;
      bottom: -60px;
    }
    
    .summary-v2-block.sqs-block-summary-v2:not(#block-yui_3_17_2_1_1710347334583_18027)  .summary-title .summary-title-link:hover::after {
      opacity: .8;
    }

     

    Let me know how it works on your site

  4. 9 hours ago, VM72 said:

    Hi, a while ago I used some customised code on my website to hide the price and purchase button in my shop. The code I was given was perfect for what I needed. BUT I've now updated my website to 7.1 and the code below no longer works. Is it still possible to do?

    .ProductItem-details .product-price, .tweak-product-item-details-show-quantity .ProductItem-details .product-quantity-input, .tweak-product-item-details-show-add-to-cart-button .ProductItem-details .sqs-add-to-cart-button-wrapper, .ProductList .product-price {
      display:none !important;
    }

    Please share your site url so I can take a look

  5. 3 hours ago, bartseijbel said:

    Hey!

     

    I'd love to display my portfolio as a masonry. I've read a few forum post about installing Macy.JS for that,  and so I tried. But I really don't understand how I can install this on my website. Any help would be appreciated! I'd like to have a masonry style grid like the portfolio on https://www.verasfawaz.com/

    Website: www.bartseijbel.nl

    Thanks!

    Javascript is required to implement this kind of layout. which plan of Squarespace are you in?

  6. 30 minutes ago, eemmall said:

    I have a portfolio website, within the 'Work' page is all of my projects. Two of these projects have not yet gone live in the real world, so I would like to hide them for now until they're in the public domain.

    I originally tried to do this with Code Injection, but now I have paid for a personal plan this is no longer available to me. 

    Working with chatgpt I have the following code, which *should* keep the projects there, but display them at 50% opacity, be unclickable and display the message 'Coming soon' when hovered over:

    /* CSS to visually dim and disable draft projects */
    body:not(.sqs-edit-mode-active) .portfolio-item[data-title^="Draft:"] {
        opacity: 0.5;
        pointer-events: none;
    }

    /* CSS to display "Coming Soon" message on hover */
    body:not(.sqs-edit-mode-active) .portfolio-item[data-title^="Draft:"]:hover:after {
        content: "Coming Soon";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(255, 255, 255, 0.8);
        padding: 10px;
        border-radius: 5px;
        font-size: 16px;
        color: #333;
    }

    Unfortunately the code doesn't work, I can't seem to figure out why. I would love some help here as its important for me for the overall site to go live ASAP.

    TIA 🙂

    Can you share your site so I can take a look?

  7. 16 minutes ago, Patrickvhnederend said:

    Hi, I'm trying to get a third-party widget to activate with the BOEK NU (book now) button in the header. Unfortunately, I have only been able to link this to a separate booking page with the IN-LINE widget, which is not what I want.

    The widget should 'slide-in' from the right-hand side of the page. For this, I received the code below.

    Could somebody help me with this?

    Regards,
    Patrick

    Website: somatichub.nl
    Pasword: SS2024!


    <button id="widget-button">Boek nu</button>

    <script src="https://cdn.jsdelivr.net/npm/appybee-widget"></script>

    <script>
        AppyBeeWidget.init({
            companyAPIKey: 'f3a4a372f989b69e66e4bfb0a438b0b3',
            style: 'side',
            locale: 'nl'
        });
    </script>

    <script>
        var button = document.getElementById("widget-button");
        button.onclick = function() {
            AppyBeeWidget.show();
        };
    </script>
     

    Where are you put these above codes? I check on your home page but can not find them

  8. I suggest you using the classic section to prevent this action for markdown.

    If you want to keep the current section (fluid engine), we should apply some additional code to fix each item.

    @media (min-width: 768px) {
      .fe-65fddf29aa7be01c18e74fb8 {
        grid-template-rows: repeat(10, minmax(calc(var(--container-width)* var(--row-height-scaling-factor)), auto));
      }
    }

    Let me know how it goes on your site

  9. You can try the following code

    @media only screen and (min-wid:100px) {
      #itemPagination {
        position: fixed;
        background: red;
        bottom: 50px;
        width: 350px;
        padding: 0;
        background: transparent;
        display: flex;
        justify-content: space-around;
      }
    
      #page {
        z-index: 99999;
      }
    
      .pagination-title-wrapper {
        display: none;
      }
    
      .item-pagination-link{
        margin: 0;
      }
    }

    Let me know how it works

  10. 14 minutes ago, DMckean said:

    Yes, exactly that, maybe arrows or the next / previous project name. I think the previous button is hidden behind the navigation on the project page. but I can't find a way to remove it from there, an placing it on the Navigation.

    image.png.5832e469cceff445881bc57ac1d30f40.png

    Removing text and keeping only arrows like this, right?

    image.thumb.png.50613188ac429598957fc3d708625e49.png

     

  11. 4 hours ago, nickbarr said:

    Hey,

    Wanting to have a loading page (one time only when directed to the website). Is it possible to have a separate GIF for computer screen, and a different .GIF for mobile? I have one for landscape (computer) and one vertical (mobile).

    They are both .GIF animations. Mobile is 5.2MB. Computer screen is 4.4MB. Are these too big for quick loading?

    Like to fill the frame, or at least have black background behind to fill the page behind animation. I do like the loading page transition you have mentioned in the past, exits quickly to the left, example below...

    https://tuanphan3.squarespace.com/lottie-loading-one?noredirect

    Many thanks!!!

    P.S It will not let me upload the .GIF files to show you an example, even though they are 5MB and under.

    In my opinion, we will have 2 approaches for your requirement:

    1. If you require to load only once when direct to the website (which means loading at the first time user access, on the next time, it won't happen), we need some js code to identify that that user has already accessed yet. Therefore it would require at lease the business plan to implement.

    2. If you just require after a specific time, your image elements would fade out, we can use some CSS code to achieve it. However, every time clients access your site, they will appear

    Which options do you refer to?

  12. 3 hours ago, Darrius said:

    I'm looking for help editing the menu page on my site, to match my desktop theme. The normal menu option do not allow me to edit the header separate from the the rest of the page. To include, not having the ability to edit the colors separately, or put borders to match my desktop site.  See attached images for example. 

    Screenshot 2024-03-27 at 9.26.07 PM.png

    Screenshot 2024-03-27 at 9.24.27 PM.png

    Can you share your site Url so I can take a look?

  13. 5 hours ago, cherylr said:

    Hi

    I am trying to turn off the video recommendations that appear at the end of my embedded youtube videos. This used to be possible in youtube (I think) and I've found a few things on the web that suggest adding ?rel=0 at the end of video links or &rel=0 but neither seem to work with a direct link in a video block (it looks like they might work with an iframe embed, but that's problematic for other reasons)

    Help?

    You can try some suggestions on this topic to get your own solution

     

  14. 1 hour ago, DMckean said:

    Hi There

    II'm working on a portfolio page, would like that my header is placed on the left side. I am trying to add also a navigation so whenever I am on a portfolio page, I can go to the next page or back. I tried searching about it but Haven't been able to find a way.

    I would like also the Navigation sites at the bottom of the navigation.

    I really apreaciate any help.

    here is my URL https://www.diegomotion.com/

     

    Can you show me your idea about the navigation? They may be arrows (right/left) and are located on your header (left-side) or something like that

    Any screenshot of your desired result could help a lot

  15. 3 hours ago, PeakRyan said:

    I built this site for a friend and he's got one pet peeve that he can't get around. He uses a Chrome extension called HoverZoom that enlarges any image you hover over. His problem is that he does not want this effect when he hovers over his logo in the header. Is there a way to treat that header logo differently than an image while still appearing the same and functioning the same as the home button? Many thanks!

    Can you share your site url so I can take a look?

  16. 3 hours ago, earthwindflowermoon said:

    Hi everyone, I have a product page where I have inserted a code block to feature the products SKU. The order of the elements is how it should be however I can't work out how to reduce some space between the product title and SKU codeblock. Please help and many thanks in advance!!! Site password is: DWS_3175#

    Screenshot 2024-03-28 at 8.31.00 am.png

    Can you share your site url so I can take a look at your issue?

  17. 3 hours ago, carterdroberts said:

    Hi,

    I am trying to add a code block from a Wufoo form into our website.  Whenever i bring the block into the same section as my introduction paragraph, the background colors change and my divider at the bottom is gone..  When i go into edit and change them back and save, I go to preview the site again and the divider disappears and the background color is switched again.  I have found that if i put the code block in a different section than my introduction paragraph, the colors will stay, but the divider still is missing.  I created another section below the code block section and tried to add a divider, and still no luck getting the divider at the bottom to show up.

    I am going crazy trying to figure this out and cannot seem to find an answer.  Any help is appreciated!!

    Can you share your site url so we can take a look?

  18. 45 minutes ago, alsmith877 said:

    Hello! I've used some simple jquery, CSS, and markdown to create an accordion. There are lots of simple instructions on how to do this online, and it works great. 

    The trouble is, it is forcing my section to the full height of having every accordion item expanded. So when nothing is expanded, there is a sea of white space below my accordion. It's the space that would be occupied if every item was expanded. How do I get squarepace to auto-adjust the height of my section to match only what is currently displayed?

    Can you share your site url so we can take a look?

  19. You can 

    5 hours ago, bellamalia said:

    make the font more bold or change the color - how can I change/ adjust in the code?

    You can add some additional styles to the following selector

    .gallery-caption-content

    with font-weight = 700 change the 'color' attribute to the color you want

    5 hours ago, bellamalia said:

    make the background more black opacity when hovering

    => Decrease the opacity value to this selector

    .gallery-grid-item:hover .gallery-grid-lightbox-link img

     

×
×
  • 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.