Jump to content

tuanphan

Circle Member
  • Posts

    63,790
  • Joined

  • Last visited

  • Days Won

    511

Everything posted by tuanphan

  1. Hi, I see you figured it out? It already fit on both desktop and mobile
  2. Hi, I see you figured it out? It already fit on both desktop and mobile
  3. Use this CSS code body#collection-65f827daabf60f41a0c14da8 { figure[class*="gallery"]:not(.gallery-slideshow-item):not(.gallery-lightbox-item) { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption p.gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } figure[class*="gallery"]:hover .gallery-caption-wrapper p.gallery-caption-content { opacity: 1 !important; } /* overlay */ div[class*="-item-wrapper"]:after { background: #f4f6ea; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; pointer-events: none; } figure[class*="gallery"]:hover div[class*="-item-wrapper"]:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; }}
  4. Actually if you want to do this when users click on these buttons >> Show corresponding content under? I can give the quick guide
  5. So the title, the image will be clickable, and make title underline on hover?
  6. I have this quick guide to make video clickable, you try following it and let me know. https://summaryblock.com/video-clickable/
  7. Hi, Can you provide site url + screenshot of problem? We can imagine your problem easier
  8. You can share link to this product, we can check and help you easier
  9. You can share link to portfolio page you want orange background, we can use CSS code to do this
  10. If you share site url + font file, I think we can use CSS font face code to achieve this
  11. If you share link to this page, we can check easier
  12. You try this code to Website > Website Tools > Code Injection > Footer <script> (function docReady(fn) { // see if DOM is already available if (document.readyState === "complete" || document.readyState === "interactive") { // call on next available tick setTimeout(fn, 1); } else { document.addEventListener("DOMContentLoaded", fn); } })(() => { if (window.location == window.parent.location) { const reelControls = document.querySelectorAll('.gallery-reel-control [data-next]'); reelControls.forEach(reelControl => { (function reelTimer() { setTimeout(() => { reelControl.click(); reelTimer(); }, 2000); // change this value to change the speed })(); }) } }); </script>
  13. You can use script code under your code <script> // Check if the animation state is stored in sessionStorage const isAnimationPlayed = sessionStorage.getItem("animationPlayed"); // Reference to the splash-wrapper div with a specified ID const splashWrapper = document.getElementById("loader-container"); // If the animation has already played, hide it and remove it from the DOM if (isAnimationPlayed) { splashWrapper.style.display = "none"; splashWrapper.remove(); // Remove the splash wrapper from the DOM } else { // If the animation hasn't played yet, mark it as played and store it in sessionStorage sessionStorage.setItem("animationPlayed", "true"); } </script>
  14. Try this code to Website > Website Tools > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('section.ProductItem-additional+section').insertBefore('.ProductItem-additional>.sqs-layout'); }) </script> <style> .ProductItem .ProductItem-additional { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 5px 5px; } .ProductItem .ProductItem-related-label { margin-top: 0px; } </style>
  15. Hi, Did you solve problem? I see logo/nav already appears
  16. For masonry under Installs text? I see you disabled Gallery Caption, can you enable it & add some captions? Then we can check problem easier
  17. Try this code to Website > Website Tools > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(function(){ var visibleTop = 800; $(window).scroll(function() { var scroll = getCurrentScroll(); if ( scroll >= visibleTop ) { $('header#header').addClass('test-something'); } else { $('header#header').removeClass('test-something'); } }); function getCurrentScroll() { return window.pageYOffset || document.documentElement.scrollTop; } }); </script> <style> header#header { background-color: transparent !important; } header#header.test-something { background-color: #000 !important; } </style>
  18. Can you share link to page where you use Spotify? We can check easier
  19. @FTWSGEM with logo try this code, replace Pixabay with your logo url .header-title-logo a:hover img { content: Url(https://cdn.pixabay.com/photo/2024/02/28/14/01/woman-8602128_1280.png); }
×
×
  • 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.