Jump to content

tuanphan

Circle Member
  • Posts

    63,866
  • Joined

  • Last visited

  • Days Won

    511

Community Answers

  1. tuanphan's post in Move blog pagination block from the bottom to an other place in a post page? was marked as the answer   
    If 7.1, use 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#itemPagination').insertBefore('.summary-v2-block'); }) </script>
  2. tuanphan's post in Change the website logo on the homepage only was marked as the answer   
    To change logo on Homepage Only, use this code to Website > Website Tools > Custom CSS. Replace Pixbay with your new logo url
    body.homepage header#header img { content: url(https://cdn.pixabay.com/photo/2023/06/13/11/45/landscape-8060760_1280.jpg); }  
  3. tuanphan's post in Gallery lightbox with added descriptions, images distorted was marked as the answer   
    Try this new code
    /* adjust something */ .collection-type-gallery #slideshowWrapper .sqs-gallery-design-stacked-slide img { width: auto !important; left: 50% !important; transform: translateX(-50%) !important; } .collection-type-gallery #slideshowWrapper .image-description { text-align: center; width: 100%; padding: 10px 0px 0; background: #fff; display: block; position: relative; bottom: 0px; margin-top: 0px; margin-bottom: 25px; } .collection-type-gallery #slideshowWrapper .sqs-gallery-design-stacked-slide img { max-height: 90%; margin: 0 auto !important; margin-left: auto; margin-right: auto; top: 0 !important; } .collection-type-gallery #slideshowWrapper .sqs-gallery-design-stacked-slide .sqs-video-wrapper.video-fit { position: sticky; max-height: 100%; width: 800px !important; margin: auto; top: 50%; left: 50%; transform: translate(0%, 0%); right: auto !important; } .collection-type-gallery #slideshowWrapper .sqs-gallery-design-stacked-slide .sqs-video-wrapper.video-fit .intrinsic-inner { text-align: center; }
  4. tuanphan's post in Strange text that shows up in the 2nd Blog body was marked as the answer   
    Hover on Resources Page in Not Linked > Click Gear icon > Advanced > And check if you have any text in right box

  5. tuanphan's post in How to remove a banner image from a single page but keep navigation menu was marked as the answer   
    You can use this code to Website > Website Tools > Custom CSS
    @media screen and (min-width:901px) { body#collection-59149472ebbd1abf19a09c5b { div#banner-wrapper { height: 200px; } div#banner-wrapper img { visibility: hidden; } header#header * { color: #000; } }}
  6. tuanphan's post in How can I apply a colour to menu links of pages when they are being visited? was marked as the answer   
    I sent code here
     
  7. tuanphan's post in Code needed for applying active colour to 'Shop' link when visiting multiple other pages. was marked as the answer   
    Hover on 3 pages: Shop Apparel, Shop Accessories, Shop Bespoke in Not Linked > Click Gear icon > Advanced > Paste this code to right box
    <style> body.view-list header#header a[href="/shop"] { color: #f30 !important; } </style>
  8. tuanphan's post in Google Scheduler Button CSS Customisation was marked as the answer   
    First add a Code Block with Google Scheduler Code

    Next, add a Button Block with this URL. And make sure "Open in new tab" DISABLED
    #google-scheduler
    Next, use this code to Page Header Code Injection
    <style> div.code-block { visibility: hidden; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).on('click', '.button-block a', function(event) { event.preventDefault(); $('.code-block button').click(); }); </script>
  9. tuanphan's post in How do I get my header to scroll back? was marked as the answer   
    Don't remove these code.
    Add this code under
    body.homepage article section:first-child { padding-top: 0px !important; }  
  10. tuanphan's post in Remove 'Previous' / 'Next' Arrows from Lightbox on Gallery Block (Grid) was marked as the answer   
    You can use a CSS code like this to hide arrows
    a.sqs-lightbox-previous, a.sqs-lightbox-next { display: none !important; }  
  11. tuanphan's post in Floating Cart was marked as the answer   
    You can use this to Website > Website Tools > Custom CSS
    div#floatingCart { display: none !important; }  
  12. tuanphan's post in Lightbox popup - how to customise with CSS was marked as the answer   
    To change form lightbox background, use this CSS code
    /* Form lightbox background color */ div.lightbox-content { background-color: #f1f !important; }  

    With text color/font, which text are you referring to?
     
  13. tuanphan's post in Bandsintown on squarespace - past events/order was marked as the answer   
    Try this to Website Tools > Custom CSS
    div#block-yui_3_17_2_1_1710810157055_27746 .sqs-tourdates-bandsintown-list-content>.sqs-tourdates { display: flex; flex-direction: column-reverse; }  
  14. tuanphan's post in Image appear on hover and follow cursor was marked as the answer   
    I wrote a guide here
     
  15. tuanphan's post in Header CSS is preventing mobile menu from opening on Android was marked as the answer   
    You can consider exclude code on mobile only by changing the code to this
    @media screen and (min-width:992px) { header#header { margin: 1vw; background: inherit!important; background-color: rgba(255, 255, 255, .3)!important; backdrop-filter: blur(8px)!important; border-radius: 45px } } I also change header to header#header, because "header" appear on both Site Header and Summary Block Header
  16. tuanphan's post in Is it possible to have your main site navigation on a cover page? was marked as the answer   
    Add this code to Advanced tab
    <li class="new-nav1"><a href="/projects">Projects</a></li> <li class="new-nav2"><a href="/about">Information</a></li> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('.new-nav1, .new-nav2').appendTo('ul'); }) </script> <style> li.new-nav2 a, li.new-nav1 a { color: #2d2d2d !important; } </style>
  17. tuanphan's post in Styling of Page Description in Chinese gets messed up on mobile was marked as the answer   
    You can use this code to Website > Website Tools > Custom CSS to fix problem
    @media screen and (max-width:767px) { .page-description p { white-space: initial !important; word-wrap: break-word; } }  
  18. tuanphan's post in Rogue thumbnail image showing before a video plays was marked as the answer   
    #1. Try this to Website > Website Tools > Custom CSS
    div#block-yui_3_17_2_1_1710318531479_89426 .plyr__poster { background-image: none !important; } #2. I think we can use Code Block to add video. If you provide video file, I will try something
  19. tuanphan's post in The font in Safari some thiner than chrome some bolder than chrome was marked as the answer   
    You can also duplicate the site, remove important info, then share duplicated site url, we can check problem easier
  20. tuanphan's post in adding a drop shadow to blog grid images was marked as the answer   
    You can use this code to Website > Website Tools > Custom CSS
     
    section.blog-image-wrapper { box-shadow: 3px 4px 5px black; }  
  21. tuanphan's post in Help customizing Product Variant BUtton was marked as the answer   
    Use this new code
    <style> label.sqs-button-element--secondary { background: white!important; /* change the button background color */ border: 1px solid black!important; /* change the button border */ border-radius:0!important;/* change the button shape */ font-size: .5rem!important;/* change the button font size */ text-transform: uppercase;/* change the button character style */ color: black!important; } label.sqs-button-element--secondary:hover { background:gray!important; /* change the button background color */ color: white!important; /* change the font color */ } input[type="radio"]:checked+label { background: gray!important;/* change the button background color */ color: #fff !important;/* change the button font color */ border: 1px solid white!important; /* change the button border */ /* change the button shape */ } </style>  
  22. tuanphan's post in Header elements only showing on homepage - present but invisible on all other pages was marked as the answer   
    Use this code for mobile
    div.header-menu .preFade { opacity: 1 !important; }  
  23. tuanphan's post in Mobile Nav Menu Custom Font Issue was marked as the answer   
    Remove this ID from your code

  24. tuanphan's post in Adjust the position of the site header layout using CSS code. was marked as the answer   
    You can use this code to Website > Website Tools > Custom CSS
    @media screen and (min-width:992px) { .header-nav { position: absolute; right: 0; text-align: right; } .header-actions.header-actions--right { position: absolute; left: 0; justify-content: flex-start !important; } header#header a.icon { margin-left: 0px !important; margin-right: 2.5vw !important; } }
  25. tuanphan's post in Mobile burger navigation - Too much white space was marked as the answer   
    You can use this CSS code under
    .header-menu-nav-folder-content { display: block !important; flex: unset !important; }
×
×
  • 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.