Jump to content

Groeipiraat

Circle Member
  • Posts

    11
  • Joined

  • Last visited

Posts posted by Groeipiraat

  1. Site URL: https://finch-stingray-xe7m.squarespace.com/werkgebied

    My page can be viewed using this password: clogs

     

    Hi, 

    I am trying to show a Google MyMaps iframe to load in responsive view. It should be at 100% width on both desktop and mobile view, but it is failing to do so.

    The code I injected is from this tutorial: https://www.w3schools.com/howto/howto_css_responsive_iframes.asp

    This is the code I used in the code-block:

    <div class="container">
      <iframe class="responsive-iframe" src="https://www.google.com/maps/d/embed?mid=1z5TX60I4DPiRlBfMpn16J2iNhscPWlI&ehbc=2E312F"></iframe>
    </div>

    And this in the Custom CSS:

    /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
    .container {
      position: relative;
      overflow: hidden;
      width: 100%;
      padding-top: 56.25%;
    }
    
    /* Then style the iframe to fit in the container div with full height and width */
    .responsive-iframe {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
    }

     

    I am no coder myself, so I followed the tutorial, but perhaps I need to set the CSS classes different for SQSP. never understand how this works for SQSP.

     

    Hopefully there is a CSS guru who know what I need to do to make it work. 😏

    Thanks in advance! 🙏

    Cheers,
    Steven

     

    Schermafbeelding 2022-07-10 om 16.59.18.png

  2. Site URL: https://blueberry-maroon.squarespace.com/

    In the Portfolio Collection overview every gallery grid item is showing a white background which I am not able to make it look transparent (or black). The hover color is the only thing that can be changed, but this is fine as is.

    What is even stranger is that on the portfolio detail page the image is shown like it is meant to be, on a black background (transparent). 

    What I tried so far is changing every possible color setting I could find and also applying all sorts of custom CSS, but with no luck so far. 🧐

    The challenge is to change the white background color to transparent (or black) using custom CSS. I am a noob when it comes to such coding, so if somebody could help me to accomplish this using custom CSS, I would be forever grateful! 🙏

    I am using SQSP 7.1 and the password is set to: monaco

     

    Schermafbeelding 2021-09-01 om 13.43.30.png

    Schermafbeelding 2021-09-01 om 13.52.13.png

  3. 4 hours ago, bangank36 said:

    Try

    <!-- Fix inconsistent blog + event 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 timeformat = "H:MM";
          
          var pubdate = document.querySelectorAll("time[datetime]:not([class*=event-time]), 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]).getAttribute("content");
              }
              pubdate[i].innerHTML = d.format(dateformat); 
          }
         
          var eventTime = document.querySelectorAll("time[datetime][class*=event-time]");
                for (var i = 0; i < eventTime.length; i++) {
                      console.log(eventTime[i].getAttribute("datetime") + " " + eventTime[i].innerText);
                    var d = new Date(eventTime[i].getAttribute("datetime") + " " + eventTime[i].innerText);
    
                    eventTime[i].innerHTML = d.format(timeformat); 
                }
          var eventTimeSummary = document.querySelectorAll(".summary-metadata-item--event-time");
                for (var i = 0; i < eventTimeSummary.length; i++) {
                      var _24hrs = eventTimeSummary[i].querySelector(".event-time-24hr");
                      var _12hrs = eventTimeSummary[i].querySelector(".event-time-12hr");
                      _12hrs.innerHTML = _24hrs.innerHTML;
                }
      });
    
    
    </script>

    image.png.3ace0653b3d71801fd010f7420b99d1c.png

    You are absolutely AMAZING! 

  4. @bangank36 I tried this for events, but this does not work.  Is there a way of making this code also work for Event dates for Squarespace 7.1 events (e.g. dd-mm-jjjj)?

    And maybe even for Event times, to convert 12hr into 24hr system (e.g. 23:59:59) instead of the AM/PM Squarespace is using now?

    Would be much appreciated if you could provide such code (since I don't know how to code).

     

    Thanks in advance!

    ^Steven

     

  5. Hi @creedon, I came across this post since I have the same issue for which I need to have a different url for the Contact button in my SS7.1 site header. 

     

    The translation switch between the default English (EN) language and the second Dutch (NL) language works fine, I even have different footers for both languages. 

    But the url of the contact button remains /en/contact and won't switch to /nl/contact. 

    This is the code I have in place at Advanced/Code injection (Footer area):

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
    <script>
      $(function() { 
      /* SETUP MULTI-LANGUAGE */
      var defaultLanguage = 'en';
      var lang = location.pathname.split("/")[1];
      var defaultClass = 'lang-'+defaultLanguage+'';
      var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']";
      if (lang == "" || lang.length > 2 ){
        var lang = defaultLanguage;
      }
    
      /* ADD LANGUAGE CLASSES */
      $('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+'');
      $('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () {
        var langType = $(this).attr('href').split("/")[1];
        var multiLanguageClass = 'multilanguage lang-' + langType + '';
        if (undefined !== langType && langType.length <= 2) 
          $(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass);
      });
      $('nav button').each(function () {
        var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0];
        var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + '';
        if (undefined !== langTypeFolder && langTypeFolder.length <= 2) 
          $(this).addClass(multiLanguageClass);
      });
    
      /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */
      if (lang == "nl") {
        $('a[href="/"]').attr("href", "/nl/word-lid/");
      }
    
      /* ADD EXCLUSION NAV ITEMS */
      $('.exclude-me,.exclude-me a').addClass('exclude');
      $('.sqs-svg-icon--list a,.SocialLinks-link').addClass('exclude');
    
      /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */
      $('.multilanguage:not(".lang-'+lang+',.exclude")').remove();
    });
    
    /*setup language switcher*/
    $('body').prepend('<div class="language"><a href="/en/join-us/" class="lang-en">EN</a> | <a href="/nl/word-lid/" class="lang-nl">NL</a></div>');
    
      $( ( ) => {
      
          /*   
          begin change cta button text and url based on language     
          Version      : 0.1d1      
          SS Version   : 7.1    
          Dependancies : jQuery                 
                         lang variable being set by language switching code                   
          Note         : this code must be run after the language switching code has
                         set the lang variable                    
          By           : Thomas Creedon < http://www.tomsWeb.consulting/ >      
          */
          
          const languageTextUrlMap = {
          
            /*        
              the format of each language code/text/url data structure is as follows          
              [enter language code here] : {         
              text : '[enter language text here]',     
              url : '[enter url here]'
              },
            */
              
            en : {
              text : 'Contact',
              url : '/en/contact'
              },
    
            nl : {
              text : 'Contact',
              url : '/nl/contact'
              },
           }
            
          // do not change anything below, there be the borg here
          
          if ( ! ( lang in languageTextUrlMap ) ) return; // bail if not defined  
          $( '.header-actions-action--cta .btn, .header-menu-cta .btn' )
            .attr ( 'href', languageTextUrlMap [ lang ].url )
            .text ( languageTextUrlMap [ lang ].text );
          // end change cta button text and url based on language
          
        } );
    </script>

    Perhaps you can tell me what is happening.. Help would be much appreciated!

    I could share the password, but not public and i need to publish the site first since it is still in DEV. 

    Best regards,

    Steven

     

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