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

bangank36

Circle Member
  • Posts

    4,346
  • Joined

  • Last visited

  • Days Won

    51

Community Answers

  1. bangank36's post in Mobile Menu - Width Spacing Problem with Folder Links was marked as the answer   
    try this custom css
    .header-menu-nav-item-content span { display: inline-block; }
  2. bangank36's post in Change text of "Read more" link in Summary was marked as the answer   
    hope this helps
    .bright .sqs-block-summary-v2 .summary-read-more-link { visibility: hidden; position: relative; } .bright .sqs-block-summary-v2 .summary-read-more-link:after { visibility: visible; content: 'Utforsk →'; position: absolute; left: 0 }
  3. bangank36's post in Remove thumbnail from blog was marked as the answer   
    you mean?
    .collection-type-blog.view-item .blog-item-banner.has-main-image .blog-item-banner-image { display: none; }
  4. bangank36's post in How to open summary image links in another tab? was marked as the answer   
    You gotta select ALL items, modified code as follow
    <script> document.addEventListener('DOMContentLoaded', function() { var summary = document.querySelectorAll('.sqs-block-summary-v2 a'); summary.forEach(function(item) { item.setAttribute('target', '_blank'); }); }); </script> Element.querySelectorAll() - Web APIs | MDN (mozilla.org)
  5. bangank36's post in Text to appear when scrolling was marked as the answer   
    Add this to custom css, it takes advantage of shrink class on header when user start scrolling
    #block-yui_3_17_2_1_1616356562141_81942, #block-yui_3_17_2_1_1616225316147_17455, #block-yui_3_17_2_1_1616356562141_83066 { opacity: 0; transition: opacity 0.75s; } .shrink + #page #block-yui_3_17_2_1_1616356562141_81942, .shrink + #page #block-yui_3_17_2_1_1616225316147_17455, .shrink + #page #block-yui_3_17_2_1_1616356562141_83066 { opacity: 1; }  
  6. bangank36's post in Add Caption to image in masonry grid Squarespace 7.1 was marked as the answer   
    You can extract the alt tag of the image to lighbox by doing this
    1. Add this snippet into Settings->Advanced->Code Injection->Header
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('.gallery-lightbox-item-img').each(function(){ var alt = $(this).find('img').attr('alt'); $(this).append('<div class="lightbox-caption">' + alt + '</div>'); }); }); </script> 2. Add this to Design->Custom CSS
    .lightbox-caption { display: block; z-index: 9999; position: absolute; bottom: 0; width: 100%; text-align: center; }
  7. bangank36's post in Add custom text on checkout page was marked as the answer   
    You can not edit the checkout page, it is restricted by Squarespace
  8. bangank36's post in text block alignment on mobile was marked as the answer   
    You can use
    @media screen and (max-width: 640px) { section[data-section-id="60507e90a2c0da511d88d87f"] { align-items: flex-end !important; } section[data-section-id="60507e90a2c0da511d88d87f"] .content-wrapper { padding-bottom: 4vw !important; } } #block-yui_3_17_2_1_1617563024648_5628 { background-color: rgba(255,255,255,.8) !important; }
  9. bangank36's post in Round Section Borders was marked as the answer   
    try
    /* Site wide section round corner */ .page-section { border: 5px double red; border-radius: 25px; overflow: hidden; }
  10. bangank36's post in Hide logo from mobile overlay menu was marked as the answer   
    try
    .header--menu-open .header-display-mobile .header-title-logo { display: none; }
  11. bangank36's post in Hiding header on 1 section only in Squarespace 7.1 was marked as the answer   
    This css will hide the header when scroll on top of the page
    .homepage .header { opacity: 0 } .homepage .header.shrink { opacity: 1; }
     

  12. bangank36's post in Blog collection page - move metadata to bottom + reformat date (7.1) was marked as the answer   
    Update the placement using css
    .blog-basic-grid--text { display: flex; flex-wrap: wrap; } .blog-basic-grid--text .blog-more-link { width: 100%; } .blog-basic-grid--text .blog-meta-section { order: 9; } Update the dateformat using custom code
    Please add this snippet into Settings->Advanced->Code Injection to format the date the way you like it
    <!-- Fix inconsistent blog date format on Squarespace 7.1 template --> <!-- Squarespace Forum 03-08-2021 --> <script src="https://stevenlevithan.com/assets/misc/date.format.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { var dateformat = "mm-dd-yyyy"; var pubdate = document.querySelectorAll("time[datetime], time[pubdate], time.blog-meta-item--date"); for (var i = 0; i < pubdate.length; i++) { var d = new Date(pubdate[i].getAttribute("datetime") || pubdate[i].innerText); if ( pubdate[i].classList.contains('blog-meta-item--date') ) { d = new Date(document.querySelector('[itemprop="datePublished"]').getAttribute("content").split("T")[0]); } pubdate[i].innerHTML = d.format(dateformat); } }); </script>  
    The variable dateformat currently set with "mm-dd-yyyy", but you can change to different format (reference here)
    These are some more format that supported:
    "mm-dd-yyyy" --> 02-25-2021
    "dd-mm-yyyy" --> 25-02-2021
    "mm/dd/yyyy" --> 02/25/2021
    "mmm dd yyyy" --> Feb/25/2021

  13. bangank36's post in Side by side button alignment on mobile was marked as the answer   
    There is a trick, I made it on this page, you can replicate it on the others
    Communication material — Versefilm Projects
    Take advantage of the spacer block, we can target the row that contain the 3 buttons

    1. Use this extension to get the spacer block id
    Squarespace ID Finder - Chrome Web Store (google.com)
    2. In this is case, it is #block-yui_3_17_2_1_1609263043194_75896 , so append this snippet into Design->Custom CSS, repeat for other pages as you wish
    #block-yui_3_17_2_1_1609263043194_75896 + .sqs-row { display: flex; } #block-yui_3_17_2_1_1609263043194_75896 + .sqs-row .sqs-col-4 { flex: 0 0 33%; }   

  14. bangank36's post in Replacing the CTA button in the nav bar with an image was marked as the answer   
    Updated proper code
    /* Join button Mobile*/ .header-menu-cta { width: 75px; padding-bottom: 15%; height: 0; position: relative; margin: 0 auto; } .header-menu .header-menu-cta a { background-color: transparent !important; border-color: transparent !important } .header-menu-cta .btn { background-image: url(https://content.invisioncic.com/p289038/monthly_2021_03/join-button.png.a71c472878d06e9b1a41bb923a765782.png); background-size: contain; background-repeat: no-repeat; background-position: center center; position: absolute; left: 0; top: 0; margin: 0; padding: 0; width: 100%; height: 100%; min-width: inherit; } /* Join button Desktop */ .header-actions-action--cta { background-image: url(https://content.invisioncic.com/p289038/monthly_2021_03/join-button.png.a71c472878d06e9b1a41bb923a765782.png); background-size: contain; background-repeat: no-repeat; padding: 1em; } .header-actions-action--cta .btn { background-color: transparent !important; border-color: transparent !important; } .header-menu-cta .btn:hover, .header-actions-action--cta:hover { opacity: 0.7; }  
  15. bangank36's post in Replace Newsletter enter e-mail box with just a Line was marked as the answer   
    try
    #block-yui_3_17_2_1_1616697539653_8282 .newsletter-form-body { max-width: 500px; display: flex; margin: 0 auto; align-items: flex-end; } #block-yui_3_17_2_1_1616697539653_8282 .newsletter-form-field-element { border: none; border-bottom: 2px solid #000; } #block-yui_3_17_2_1_1616697539653_8282 .newsletter-form-fields-wrapper { padding-right: 10px; }
  16. bangank36's post in Error message using calc function (px - vw) to set responsive section height was marked as the answer   
    Custom css use less so you can try this syntax
    width: ~"calc(900px - 20vw)" !important;
    more info: CSS3 calc() in LESS CSS (Example) (coderwall.com)

  17. bangank36's post in Button link not working in header in Novo template was marked as the answer   
    Did you make sure the file selected and open new tab checked?

    The link should look like this

  18. bangank36's post in Remove extra blank space from bottom of my page was marked as the answer   
    it's the default min-height property
    section[data-section-id="60469a031da5a6022b7d183a"] { min-height: inherit !important; } section[data-section-id="60469a031da5a6022b7d183a"] .content-wrapper { padding-bottom: 4vw !important; }  
  19. bangank36's post in Add custom social icon instead of generic link for Bandcamp and Mixcloud was marked as the answer   
    try
    .header .icon { font-family: "Font Awesome 5 Brands"; color: #fff; } .icon[href*="mixcloud"] svg, .icon[href*="bandcamp"] svg{ display: none; } .icon[href*="mixcloud"]:before { content: "\f289"; } .icon[href*="bandcamp"]:before { content: "\f2d5"; }
  20. bangank36's post in Slideshow image captions cut off in mobile view, can't seem to adjust? was marked as the answer   
    try adjusting a bit
    @media only screen and (max-width: 640px) { .gallery-caption-wrapper { padding: 0 1em; box-sizing: border-box; } .gallery-reel-list, .gallery-caption-wrapper { overflow: visible; } }  
  21. bangank36's post in How do I keep page width the same on all pages in index page? was marked as the answer   
    If this helps

    .Intro-content .sqs-col-12>.sqs-block:not(.float):not(.sqs-float-left):not(.sqs-float-right):not(.sqs-block-gallery):not(.sqs-block-image):not(.sqs-block-video):not(.sqs-block-map):not(.sqs-block-calendar):not(.sqs-block-menu):not(.sqs-block-tourdates):not(.sqs-block-summary-v2):not(.sqs-block-archive):not(.sqs-block-instagram), .Main:not(.Main--events-list):not(.Main--events-item):not(.Main--blog-list) .Main-content .sqs-layout .sqs-col-12>.sqs-block:not(.float):not(.sqs-float-left):not(.sqs-float-right):not(.sqs-block-gallery):not(.sqs-block-image):not(.sqs-block-video):not(.sqs-block-map):not(.sqs-block-calendar):not(.sqs-block-menu):not(.sqs-block-tourdates):not(.sqs-block-summary-v2):not(.sqs-block-archive):not(.sqs-block-instagram), .tweak-blog-list-style-stacked .BlogList--posts-full .sqs-layout .sqs-col-12>.sqs-block:not(.float):not(.sqs-float-left):not(.sqs-float-right):not(.sqs-block-gallery):not(.sqs-block-image):not(.sqs-block-video):not(.sqs-block-map):not(.sqs-block-calendar):not(.sqs-block-menu):not(.sqs-block-tourdates):not(.sqs-block-summary-v2):not(.sqs-block-archive):not(.sqs-block-instagram), .Index-page .sqs-layout .sqs-col-12>.sqs-block:not(.float):not(.sqs-float-left):not(.sqs-float-right):not(.sqs-block-gallery):not(.sqs-block-image):not(.sqs-block-video):not(.sqs-block-map):not(.sqs-block-calendar):not(.sqs-block-menu):not(.sqs-block-tourdates):not(.sqs-block-summary-v2):not(.sqs-block-archive):not(.sqs-block-instagram), .Footer-blocks--top .sqs-col-12>.sqs-block:not(.float):not(.sqs-float-left):not(.sqs-float-right):not(.sqs-block-gallery):not(.sqs-block-image):not(.sqs-block-video):not(.sqs-block-map):not(.sqs-block-calendar):not(.sqs-block-menu):not(.sqs-block-tourdates):not(.sqs-block-summary-v2):not(.sqs-block-archive):not(.sqs-block-instagram), .Footer-blocks--bottom .sqs-col-12>.sqs-block:not(.float):not(.sqs-float-left):not(.sqs-float-right):not(.sqs-block-gallery):not(.sqs-block-image):not(.sqs-block-video):not(.sqs-block-map):not(.sqs-block-calendar):not(.sqs-block-menu):not(.sqs-block-tourdates):not(.sqs-block-summary-v2):not(.sqs-block-archive):not(.sqs-block-instagram), .tweak-footer-layout-stacked .Footer-blocks--middle .sqs-col-12>.sqs-block:not(.float):not(.sqs-float-left):not(.sqs-float-right):not(.sqs-block-gallery):not(.sqs-block-image):not(.sqs-block-video):not(.sqs-block-map):not(.sqs-block-calendar):not(.sqs-block-menu):not(.sqs-block-tourdates):not(.sqs-block-summary-v2):not(.sqs-block-archive):not(.sqs-block-instagram) { width: 100%; }  
  22. bangank36's post in Newsletter & Form text squished on mobile was marked as the answer   
    try this custom css
    .newsletter-form .newsletter-form-header-description, .sqs-block-form .field-list .description{ line-height: inherit; }  
  23. bangank36's post in Contact form in footer, how to identify which page the form entry was completed on? was marked as the answer   
    1. You assign the name of the hidden field and choose edit to get its generated name for the form, in this case it is 'footer-pagepath' -> 'SQF_FOOTER_PAGEPATH' (make sure it is unique name)
    2. Add this snippet into settings->advanced->code injection->footer
    <script> document.addEventListener('DOMContentLoaded', function() {   if (document.querySelector('[name="SQF_FOOTER_PAGEPATH"]')) { document.querySelector('[name="SQF_FOOTER_PAGEPATH"]').value = location.pathname; } }); </script>  


  24. bangank36's post in Change text "Select" in product detail page was marked as the answer   
    Try this snippet instead
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function() { $(".variant-select-wrapper select option").html(function() { return $(this).html().replace("Select", "Vælg"); }); $(".variant-select-wrapper").attr("data-text", function() { return $(this).attr("data-text").replace("Select", "Vælg"); }); }); </script>
    RobinJohannson sonny.annermo
  25. bangank36's post in Resizing Code Blocks for Mobile was marked as the answer   
    Try this custom css
    @media screen and (max-width: 767px) { #block-yui_3_17_2_1_1614718295210_14318 { width: 100% !important; padding: 0 !important; } #block-yui_3_17_2_1_1614718295210_14318 .sqs-block-content { width: 100%; padding-top: 56%; height: 0; } #block-yui_3_17_2_1_1614718295210_14318 .sqs-block-content iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100%; } }
×
×
  • Create New...