Jump to content

NewClassicalDesign

Circle Member
  • Posts

    12
  • Joined

  • Last visited

Posts posted by NewClassicalDesign

  1. Site URL: https://timecraft.group/home-draft

    password for the site is "metaverse"

    timecraft.group/home-draft

     

    noticed an annoying graphic issue when I designed some custom buttons for a client site. When you view the site on mobile the buttons display a very subtle border around the text within the area of the button. However, when you check mobile view in squarespace or if you use chrome devtools to simulate the size on mobile the issue does not appear. You will likely need to enlarge the image to see what I am talking about, its a very subtle box surround the text of the button.

    933907381_phonescreenshot.thumb.jpg.53ac869b13773bb5248dd93a2dc7e95d.jpg

     

    here is the code used for one of the buttons:

    <style>
    
      .button-box {
        box-sizing:border-box;
        outline:none;
      }
      
    .drawn-button1 {
          font-family: 'squada one';
          line-height: 1.2rem;
          align-self: center;
          text-align: center;
          background:#242637;
          padding:.6rem .6rem;
          margin:0 1rem;
          transition:all .5s ease;
          font-size:1.5rem;
          outline:none;
          box-shadow: 20px 38px 34px -26px hsla(0,0%,50%,1);
          border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
          border:solid 7px #fff;
          opacity: 0;
          animation: appear1 2s linear 5s;
          animation-fill-mode: forwards;
          
    }
    
    @keyframes appear1 {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
    
          .drawn-button1:hover{
             box-shadow:2px 8px 4px -6px hsla(0,0%,50%,1);
          } 
    
      </style>
    
    <div class="button-box">
       <a href="/#web3">
        <div class="drawn-button1">TWO.FIVE <br>
          <span style="font-family:'Roboto Slab';font-size:1rem; line-height:.8rem;margin-top:0px;padding-top:0px;">
            start your web3 journey</span> </div></a></div>

    Anyone know how I can keep the inner box from showing up? It does not show up on desktop.

  2. 9 hours ago, paul2009 said:

    @NewClassicalDesign If you want to change Jun 10 to June 10 (and not June 10, 2022) then you can use the JS that you quoted above. Add it to the Code Injection FOOTER. I've made some modifications to:

    • target the correct element [ document.querySelectorAll(".dt-published span") ]
    • change the output values to match the full month names [ "Jun":"June" ]
    • restore the correct MMM-DD order [ newDate = newDate[0] + " " + newDate[1]; ]
    • prevent it running on other pages [ if (dates.length > 0) ]

     

    <script>
      (function() {
        var dates = document.querySelectorAll(".dt-published span");
        if (dates.length > 0) {
          var newDate;
          var i,I;
          // Create object with 'source' keys on the left, and 'output' values on the right.
          var months = {
            "Jan":"January",
            "Feb":"February",
            "Mar":"March",
            "Apr":"April",
            "May":"May",
            "Jun":"June",
            "Jul":"July",
            "Aug":"August",
            "Sep":"September",
            "Oct":"October",
            "Nov":"November",
            "Dec":"December"
          };
          for (i=0, I=dates.length; i<I; i++) {
            newDate = dates[i].innerHTML.trim();
            newDate = newDate = newDate.replace(/  +/g, ' ');
            newDate = newDate.split(" ");
            newDate[0] = months[newDate[0]];
            newDate = newDate[0] + " " + newDate[1];
            dates[i].innerHTML = newDate;
          }
        }
      })();
    </script>

     

    this worked wonderfully, thank you for your help!

  3. here is some code I found that replaced the month abbreviations with Portuguese abbreviations. Also switches the date to appear first. All I would need would be to pair this down so that it only changes the text of the months to spell them out completely and not have any of the business where it switches the info around. My javascript ability isn't strong enough to know just what to take out and change.

    <script>
        (function() {
            var dates = document.getElementsByClassName("dt-published date-highlight");
            var newDate;
            var i,I;
            // Create object with 'source' keys on the left, and 'output' values on the right.
            var months = {
                "Jan":"Jan",
                "Feb":"Fev",
                "Mar":"Mar",
                "Apr":"Abr",
                "May":"Mai",
                "Jun":"Jun",
                "Jul":"Jul",
                "Aug":"Ago",
                "Sep":"Set",
                "Oct":"Out",
                "Nov":"Nov",
                "Dec":"Dez"
            };
            // Loop through all dates, replacing months and reordering display.
            //  - Trim extra white space from beginning and end of date.
            //  - Replace multiple consecutive spaces with a single space.
            //  - Split by space into an array.
            //  - Replace month text based on 'months' object key:value pairs.
            //  - Convert array to string, rearranging display order of elements.
            //  - Set new date HTML.
            for (i=0, I=dates.length; i<I; i++) {
                newDate = dates[i].innerHTML.trim();
                newDate = newDate = newDate.replace(/  +/g, ' ');
                newDate = newDate.split(" ");
                newDate[0] = months[newDate[0]];
                newDate = newDate[1] + " " + newDate[0];
                dates[i].innerHTML = newDate;
            }
        })();
    </script>

     

  4. Site URL: https://www.thevaclaimslawyer.com/blog/good-news-for-military-families-and-civilians-who-live-and-work-at-camp-lejeune

    A client has requested that the publish dates on individual blog posts are spelled out as opposed to abbreviated.

    I found some similar javascript code posted elsewhere that changes the date format in general but can't find one that just manipulates the text of the month. So instead of "Jun 10" it would be "June 10."

    Anyone have a simple script that would do the trick they would be willing to share?

     

  5. ended up answering my own question. For what its worth I had to add the script in a separate code block in its own <div> since it wasn't letting me append an element in the summary block itself. Then I styled the block so it appeared beneath the author. Also I realized document.getElementsByClassNames produces an array-like object instead of an element so I had to iterate over it to search for the text.

    Here is the updated script I used: 

    <div id="author-feature" style="margin-top:-100px;">
      
    </div>
    
    <script>
    
    var img = document.createElement("img");
    let author = document.getElementsByClassName('summary-metadata-item--author');
      
    for (i = 0; i < author.length; i++) {
    	if(author[i].innerHTML.includes('Bryan Specht')){
       img.src = "https://static1.squarespace.com/static/614a0273f17c0447042d5f78/t/6178ce73e9cfee41177b9e75/1635307123576/BRYAN_b_w_square.png";
    img.setAttribute("style", "width:100px; border-radius:50%;");
          var block = document.getElementById("author-feature")
          block.appendChild(img);
        }
    	else if(author[i].innerHTML.includes('Rick Shaughnessy')){
       img.src = "https://static1.squarespace.com/static/614a0273f17c0447042d5f78/t/6178ce8f24061f5729aaf1ad/1635307151493/RICK_b_w_square.png";
    img.setAttribute("style", "width:100px; border-radius:50%;");
          var block = document.getElementById("author-feature")
          block.appendChild(img);
        }
    	else if(author[i].innerHTML.includes('Charlie Witkowski')){
       img.src = "https://static1.squarespace.com/static/614a0273f17c0447042d5f78/t/6178ce766084256498dff499/1635307126503/CHARLIE_b_w_square.png";
    img.setAttribute("style", "width:100px; border-radius:50%;");
          var block = document.getElementById("author-feature")
          block.appendChild(img);
        }
    	else if(author[i].innerHTML.includes('Andrea Zimmerman')){
       img.src = "https://static1.squarespace.com/static/614a0273f17c0447042d5f78/t/6178ce6c25addd661972eb89/1635307116533/ANDREA_b_w_square.png";
    img.setAttribute("style", "width:100px; border-radius:50%;");
          var block = document.getElementById("author-feature")
          block.appendChild(img);
        }
    	else if(author[i].innerHTML.includes('Jaclyn Johnston')){
       img.src = "https://static1.squarespace.com/static/614a0273f17c0447042d5f78/t/6178ce8562c22f532e4a39d8/1635307141583/JACLYN_b_w_square.png";
    img.setAttribute("style", "width:100px; border-radius:50%;");
          var block = document.getElementById("author-feature")
          block.appendChild(img);
        }
    	else if(author[i].innerHTML.includes('Tricia Ewald')){
       img.src = "https://static1.squarespace.com/static/614a0273f17c0447042d5f78/t/6178ce95b52a8b6c21764ae0/1635307158005/TRICIA_b_w_square.png";
    img.setAttribute("style", "width:100px; border-radius:50%;");
          var block = document.getElementById("author-feature")
          block.appendChild(img);
        }
    	else if(author[i].innerHTML.includes('Daniel Welch')){
       img.src = "https://static1.squarespace.com/static/614a0273f17c0447042d5f78/t/6178ce7b72d1556873b61489/1635307131576/DANIEL_1_b_w_square.png";
    img.setAttribute("style", "width:100px; border-radius:50%;");
          var block = document.getElementById("author-feature")
          block.appendChild(img);
        }
    
    
      	else {
          img.src = "https://static1.squarespace.com/static/614a0273f17c0447042d5f78/t/6178d2e414c5322fe396ec28/1635308260460/salient_favicon.png";
          var block = document.getElementById("author-feature")
          block.appendChild(img);
        }
    }  
    </script>

     

  6. Site URL: https://salientglobal.com/home-draft

    Hey all,

    I am trying to add in some javascript so I can get the author bio avatar photo to show up on under the featured blog post in a summary block on the home page (using list style). 

    page is https://salientglobal.com/home-draft

    pw is: pagepreview

    here is the script i am trying to insert: I've tried it both as a separate code block and injected into the header of the page.

    <script>
      
    var img = document.createElement("img");
    
    if (document.getElementsByClassName("summary-metadata-item--author").innerHTML.indexOf('Author Name1') != -1) {
       img.src = "INSERT_IMAGE_HERE";
    img.setAttribute("style", "width:80px;");
      } else if {
        document.getElementsByClassName("summary-metadata-item--author").innerHTML.indexOf('Author Name2') != -1){
       img.src = "INSERT_IMAGE_HERE";
    img.setAttribute("style", "width:80px;")
      }
      else {
         img.src = "NO_PHOTO_IMAGE"
      }
    
    var block = document.getElementsByClassName("summary-metadata-item--author");
    block.appendChild(img);
      
      
    </script>

    Any thoughts on if what I am trying is even possible? Or anyone else have a more elegant solution than the above?

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