Jump to content

tuanphan

Circle Member
  • Posts

    65,189
  • Joined

  • Last visited

  • Days Won

    520

Reputation Activity

  1. Like
    tuanphan reacted to Martian in Padding on Grid-overlay sections   
    Well, if anyone is interested, this is the code I got from ChatGPT which worked out pretty good and I'm happy enough with the results unless someone has a better idea: 

    /* Apply styles for desktop screens */
    @media screen and (min-width: 1440px) {
        .collection-type-portfolio-grid-overlay .portfolio-grid-overlay {
            padding-left: 0px !important; /* Adjust as needed */
            padding-right: 0px !important; /* Adjust as needed */
        }
    }
     
  2. Like
    tuanphan reacted to EmilyLewis in Need help making text overlay on blog post images on hover   
    Fab, yeah it's working. Thanks for checking! 
  3. Like
  4. Like
    tuanphan reacted to CassAggett in Outline for image frame   
    @Martian Give this code a go - paste in the Custom CSS panel:
    #block-64bd83023798211dc839a7d4 .fluid-image-container.sqs-image-content { border: 1px solid lightblue; box-sizing: border-box; } You can change where it says lightblue to another colour name or hex code.
    Hopefully this will work as is to target just that image in the screenshot but if not let me know
  5. Like
    tuanphan reacted to Ziggy in Change Color of Portfolio Grid Captions   
    Needs to be added sometimes, but always best to try not too when possible. Glad it's working for you!
  6. Like
    tuanphan reacted to Ruinir in Shrink Space Between Summary Block (List) Items   
    Thank you this worked!
  7. Like
    tuanphan got a reaction from wolfpassion20 in How to make sure the header navigation link jumps to the top of a section on the same page   
    Hi,
    Can you share link to your site? We can check easier
  8. Thanks
    tuanphan got a reaction from Aurora in How to get navigation bar on one line   
    Use this code to Website Tools (under Not Linked) > Custom CSS
    nav.header-nav-list { flex-wrap: nowrap !important; }  
  9. Love
    tuanphan got a reaction from GPUNK in Hovering Captions on Images in Gallery w/ Masonry Grid   
    #1. Change code to this
    body.homepage { figure.gallery-masonry-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; height: 10% !important; } .gallery-masonry-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after { background: rgba(0,0,0,1); /* overlay color */ content: ""; display: block; position: absolute; height: 10%; /* overlay height */ left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after { opacity: 0.75; } .gallery-masonry-item * { color: white; } /* remove gap */ figcaption { padding: 0 !important; } } #2. Whole text bold or which text?

  10. Like
    tuanphan reacted to GastonDuflos in Product Page Mobile BUTTONS   
    Thanks @tuanphan I've found a solution:
     
    // Product Variant Button (Full Width and Stacked) - Ghost // .ProductItem-details .variant-radiobtn-wrapper label { text-align: center; margin: 5px 0px; display: block !important; width: 100% !important; } /* Product variants widht button on mobile */ @media screen and (max-width:767px) { .product-variants { width: 100% !important; } } /* Add to cart button on mobile */ @media screen and (max-width:767px) { .ProductItem-details-checkout .sqs-add-to-cart-button-wrapper, .ProductItem-details-checkout .sqs-add-to-cart-button-wrapper div { width: 100% !important; } }  
  11. Like
  12. Like
    tuanphan reacted to DillonBradley in WhatsApp on squarespace sites   
    Thank you @tuanphan! You're a legend on this forum
  13. Like
    tuanphan reacted to creedon in My shopping cart page gives a 404   
    This looks like it might be an SS issue. But before you contact customer service...
    What happens if you set 404 page back to the System Default? Design > Not Found / 404 Page.
  14. Like
    tuanphan reacted to sebastiaen in pictures too big in portrait aspect ratio   
    update: found out I can do a grid layout with just one raw. Solves the problem.
  15. Like
    tuanphan reacted to jadejohnsonillo in Changing border color on a button?   
    It worked perfectly, thanks!
  16. Like
    tuanphan got a reaction from CraigN in Dynamic Logo (Light/Dark)   
    You can use this code to Design > Custom CSS (or Website > Website Tools > Custom CSS)
    /* Blog new logo */ body[class*="type-blog"] header#header img { content: url(https://cdn.pixabay.com/photo/2023/05/13/14/35/white-flower-7990645_1280.jpg); }  
  17. Like
    tuanphan reacted to JoanGarroway in Does anybody know how to create a dropdown menu that covers the whole website   
    okay ~~
    i think creating the dropdown menu involves a combo of html, css, and a dash of javascript
    you'll need a basic html structure for your dropdown menu
    <nav class="dropdown-menu"> <button class="dropdown-btn">Menu</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </nav> now, let's style that menu using css
    this is where you'll make it look nice and cover the whole website
    body { font-family: Arial, sans-serif; } .dropdown-menu { position: fixed; /* This will make it cover the whole website */ top: 0; left: 0; width: 100%; background-color: #333; /* Customize the background color */ } .dropdown-btn { background-color: #333; color: white; border: none; padding: 15px 20px; cursor: pointer; } .dropdown-content { display: none; /* Hide the dropdown content by default */ position: absolute; background-color: #f9f9f9; width: 100%; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #ddd; } and let's add some java to make the dropdown interactive
    const dropdownBtn = document.querySelector('.dropdown-btn'); const dropdownContent = document.querySelector('.dropdown-content'); dropdownBtn.addEventListener('click', function() { if (dropdownContent.style.display === 'block') { dropdownContent.style.display = 'none'; } else { dropdownContent.style.display = 'block'; } }); javascript code makes the dropdown menu appear and disappear when you click the menu button
  18. Thanks
    tuanphan got a reaction from kmdailey88 in Disabling Portfolio Project Pages in Squarespace Version 7.1   
    To disable draft project page, follow this
    First, add this code to Design > Custom CSS
    /* Hide Draft Portfolio */ div.portfolio-grid-basic .grid-item[href*="draft"] { display: none; } Next, Edit Project >> Add this into URL: draft
    Assuming project has url is  /artists/dawn-waters-bake change it to  /artists/dawn-waters-bake-draft
    Above code will hide all projects whose urls contain text “draft” in portfolio page
  19. Like
    tuanphan got a reaction from Lesum in Rounding corners for a grid portfolio page   
    Add to Design > Custom CSS
    body.collection-649227fc70d8b7335c60dd98 .gallery-grid-item>div img { border-radius: 30px !important; }  
  20. Thanks
    tuanphan got a reaction from gantons in Vertical line between navigation titles   
    Because your last item is Koble Creates, you are using CSS code to remove it
    To remove an item from Header, no need to use code, just drag it from Main Navigation to Not Linked
    In case you still want to keep code, use this code to remove /
    div.header-nav-item:nth-child(3) a:after { display: none; }  
  21. Like
    tuanphan got a reaction from DreamrW in Change login button name   
    You can use white-space: nowrap;
    .user-accounts-text-link { visibility: hidden; } .user-accounts-text-link:before { visibility: visible; content: "New text"; position: absolute; white-space: nowrap; }  
  22. Thanks
    tuanphan got a reaction from EddiOS42 in Rounding corners for a grid portfolio page   
    ID of page: body#collection-651773418cb7780c567aedd0
  23. Thanks
    tuanphan got a reaction from Ruinir in Shrink Space Between Summary Block (List) Items   
    You can add this code to Website Tools (under Not Linked) > Custom CSS
    /* Summary List Space */ .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item { margin-bottom: 0px !important; padding-bottom: 5px !important; }  
  24. Love
    tuanphan got a reaction from SandNotOil in Changing the background of a grid blog - Only behind the text   
    Add to Design > Custom CSS
    article.blog-basic-grid--container.entry.blog-item.is-loaded { background-color: white; text-align: center; }  
  25. Like
    tuanphan got a reaction from arielestulin in Arrows for drop down menu ( Header )   
    I also have this list

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