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

AllanYung

Member
  • Posts

    36
  • Joined

  • Last visited

Posts posted by AllanYung

  1. On 7/1/2021 at 3:34 AM, tuanphan said:

    Try new code

    <div class="splash-wrapper">
      <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_biy6osdk.json"  background="transparent"  mode="normal"  speed="1"  style="width: 480px; height: 270px;"  autoplay></lottie-player>
    </div>
    
    <style>
    .splash-wrapper {
      position: fixed;
      z-index: 9999;
      background-color: #FFFFFF;
      height: 100vh;
      width: 100vw;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center !important;
      align-items: center;
      animation-name: slideOut;
      animation-fill-mode: forwards;
      animation-duration: 0.5s;
      animation-delay: 2s;
    }
      .view-item .splash-wrapper {
      	display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        z-index: -100 !important;
      }
    
    @keyframes slideOut {
      from {margin-top: 0vh; opacity: 1;}
      to {margin-top: 100vh; opacity: 0;}
    }
    </style>

    If it doesn't work, keep the code & add this to Design > Custom CSS

    /* disable code on blog individual posts */
    .view-item .splash-wrapper {
      	display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        z-index: -100 !important;
      }

     

    Hey @tuanphan. How can I display a different animation on all of the blog posts but not the main blog list page? Thanks!

  2. 6 hours ago, tuanphan said:

    Try new code

    <div class="splash-wrapper">
      <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_biy6osdk.json"  background="transparent"  mode="normal"  speed="1"  style="width: 480px; height: 270px;"  autoplay></lottie-player>
    </div>
    
    <style>
    .splash-wrapper {
      position: fixed;
      z-index: 9999;
      background-color: #FFFFFF;
      height: 100vh;
      width: 100vw;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center !important;
      align-items: center;
      animation-name: slideOut;
      animation-fill-mode: forwards;
      animation-duration: 0.5s;
      animation-delay: 2s;
    }
      .view-item .splash-wrapper {
      	display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        z-index: -100 !important;
      }
    
    @keyframes slideOut {
      from {margin-top: 0vh; opacity: 1;}
      to {margin-top: 100vh; opacity: 0;}
    }
    </style>

    If it doesn't work, keep the code & add this to Design > Custom CSS

    /* disable code on blog individual posts */
    .view-item .splash-wrapper {
      	display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        z-index: -100 !important;
      }

     

    Thanks!!

  3. 21 hours ago, tuanphan said:

    Hi. Which code did you use? Can you post here.

    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
    
    <div class="splash-wrapper">
      <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_biy6osdk.json"  background="transparent"  mode="normal"  speed="1"  style="width: 480px; height: 270px;"  autoplay></lottie-player>
    </div>
    
    <style>
    .splash-wrapper {
      position: fixed;
      z-index: 9999;
      background-color: #FFFFFF;
      height: 100vh;
      width: 100vw;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center !important;
      align-items: center;
      animation-name: slideOut;
      animation-fill-mode: forwards;
      animation-duration: 0.5s;
      animation-delay: 2s;
    }
    
    @keyframes slideOut {
      from {margin-top: 0vh; opacity: 1;}
      to {margin-top: 100vh; opacity: 0;}
    }
    </style>

    Here is the code posted in the Page Header Code Injection which I would only like applied to the blog page that lists all the posts. Thanks @tuanphan!

  4. Sorry, now seeing your reply @tuanphan! I was not able to fix that but that's not a big issue.

    Thank you for bringing this to my attention! Instead of making the two buttons the same height, I would prefer for them to stack one on top of the other as they do in mobile.

    284820651_MobileButtons.png.c9e20b5eeb48c35bbe28513b0219d3ff.png

    I also noticed that some Headers break on Tablet.

    731475070_HeaderBreaking.png.4938b4859471016be00c06735e7b6058.png

    I would prefer for the Homepage specifically to switch to a Mobile format as soon as this happens as shown below to avoid any longer words in Headers breaking to a new line. This would also solve the issue with the text in the Contact Us button breaking to two lines. How would I be able to do that? How can I check the page width when the Header starts to break?

    1468423010_MobileHeaders.png.8fa14aa0e8d9a48057d82fa89128a326.png

    Thanks 😁!

    On 3/24/2021 at 1:44 AM, tuanphan said:

    Hi. It looks like you solved this?

    Do you want to make 2 buttons same height on tablet?

    image.thumb.png.724f4e5848d253721a5ef10001e555a2.png

     

  5. Site URL: https://www.yungrealestate.com/availabilities/3-hacienda-court

    I am having a few issues displaying only one item per row in a Summary Carousel on Mobile. Below there is an overflow of the second item.

    Overflow.png.a9000c6fd07931a60cef244f1c6a9214.png

    This leads to the excerpt text being slightly cut off on the second item with more of an overflow from the third item.

    640358954_CutOff.png.d45893fd3738060a3c2ef17e65bf25ab.png

    For some reason, the Summary Carousel Pagination only works for up to three items. There are supposed to be five items for this Summary Block as displayed on Desktop.

    Pagination.png.f76d0521f312aed1b17d1edbea17ff62.png

    Current Code

    CSS

    .sqs-block-summary-v2 {
      .summary-title, .summary-heading {
        font-family: "playfair-display";
        font-size: 2.2rem;
        letter-spacing: -0.02em;
        -webkit-font-smoothing: antialiased;
      }
      .summary-excerpt h4 {
        font-size: 20px;
        line-height: 0em;
        margin-top: 15px;
      }
      .summary-excerpt p {
        font-size: 14px;
        line-height: 0em;
      }
    }
    
    @media screen and (max-width: 767px) {
      .sqs-block-summary-v2 .summary-item {
        width: 100% !important;
      }
      .sqs-block-summary-v2 {
        .summary-title, .summary-heading {
          font-size: 1.6rem;
        }
      }
    }

    Code Block (to hide the current Blog Post the Summary Block is on)

    <style>
      .summary-item-list .summary-item:nth-child(1) {
        display: none;
    }
    </style>

    Thanks for any help guys!

  6. 23 minutes ago, butter said:

    Site URL: https://www.hanroco.com/

    a couple months ago, i used custom css to remove the underline effect from all hyperlinks on my entire site--navigation, footer, text, everywhere. for whatever reason, the code i used is no longer working and the underlines are back. i've tried several codes but none seem to work. would appreciate any help with removing the underlines everywhere!

    Hey I saw someone post this code somewhere else and it worked for me. I'm having a lot of issues with Squarespace today specifically. Not sure why.

    .sqs-block-html a {
      background-image: none !important;
    }
    h1 a, h2 a, h3 a, h4 a, p a {
      text-decoration: none !important;
    }

     

  7. 22 hours ago, bangank36 said:

    try this

    
    .gallery-reel-control-btn-icon svg {
      display: none;
    }
    .gallery-reel-control-btn-icon {
      background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='1000' viewBox='0 0 1000 1000' width='1000' xmlns='http://www.w3.org/2000/svg'><path d='M767.9,499.9L291.6,10l-59.4,61.3l416.6,428.7L232.1,928.7l59.5,61.3L767.9,499.9z'/></svg>");
        background-repeat: no-repeat;
        background-size: cover;
    }
    [data-previous] .gallery-reel-control-btn-icon {
      -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
    }
    

    image.thumb.png.7efc8332a0adb29a23723bb3431bf14b.png

    This worked perfectly! Thanks so much!

  8. I would like to change the Gallery Reel slideshow arrows across the entire website for 7.1. This can be either to a specific image or something similar to the image attached.

    Also, would it be possible to make them fade in and out? If not, no problem as long as I can change them.

    I've tried the code from three other posts in this forum from last year but none of those have worked.

    right-arrow.png

  9. On 8/15/2020 at 1:10 PM, derricksrandomviews said:
    
    This should help with part of what you want, goes into custom css. 
    
    .gallery-fullscreen-slideshow-control-btn-icon svg {
        width: 50px !important;
        height: 50px !important;
    }

    Hey has anyone figured out how to make this work? Since it won't let me upload a svg to Manage Custom Files in Custom CSS, I uploaded a .png file and changed svg to name.png. That didn't work.

  10. On 1/17/2021 at 10:09 AM, tuanphan said:

    Add to Design > CUstom CSS

    
    
    body.homepage #page section:first-child .content-wrapper {
        padding-bottom: 0 !important;
    }

     

    This isn't working for me when I copy and paste it into Custom CSS even if I change first-child to second-child depending on the section where I want the down arrow to be. Is there something else I need to change if I want to use the arrow to be in another section as well?

    On 12/21/2020 at 9:42 PM, tuanphan said:

    If you use Personal Plan, try this @Aishwarya

    1. Add a Code Block (to show arrows)

    
    
    <div class="bottom">
      <a class="scroll-indicator" href="#tscroll"></a>
    </div>
    <style>
    .bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
      text-align: center;
    }
    
    .scroll-indicator {
    display: inline-block;
      width: 24px;
      height: 24px;
      margin: 16px auto;
      border-right: 2px solid #FFF;
      border-bottom: 2px solid #FFF;
      border-bottom-right-radius: 2px;
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
      -webkit-animation-duration: 2s;
              animation-duration: 2s;
      -webkit-animation-name: fade;
              animation-name: fade;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
    }
    
    @-webkit-keyframes fade {
      0% {
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        opacity: 1;
      }
      75% {
        -webkit-transform: rotate(45deg) translateY(-6px) translateX(-6px);
                transform: rotate(45deg) translateY(-6px) translateX(-6px);
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }
    
    @keyframes fade {
      0% {
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        opacity: 1;
      }
      75% {
        -webkit-transform: rotate(45deg) translateY(-6px) translateX(-6px);
                transform: rotate(45deg) translateY(-6px) translateX(-6px);
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }
    </style>

    2. In the position where you want the arrow to scroll down, add a Code Block > Paste this code

    
    
    <span id="tscroll"></span>

     

    I would prefer not to use the anchor point. How can I remove the hyperlink that's attached to the down arrow?

    Thanks so much for the help!

  11. I would like to add a bouncing scroll down arrow to the bottom of specific sections on Squarespace 7.1. I know I would need custom CSS as well as HTML to add to a Code Block so that I can place it specifically where I want it. Would someone be able to help?

    If possible, I would prefer it to be a minimalistic, sleek black down arrow with the ability to put text below it.

    Thanks for any assistance you guys can provide!

×
×
  • Create New...