Jump to content

ArthurC

Member
 View Profile  See their activity

  • Posts

    8

  • Joined

  • Last visited

1 Follower

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

ArthurC's Achievements

Level 2

Level 2 (2/20)

0

Reputation

  1. maftay started following ArthurC
  2. ArthurC
    One other thing, this seems to be affecting blog post pages only. I have another page, Start Here, where I had to slightly alter the tweetable pull quote code to get it to work (and it still does). AND this code still alters when I change the number of pixels, etc. I've tried to take this code and embed it in the blog posts with the same stupid result of the quotation mark floating over the block above. Here is the code that I'm using on Start Here: <!DOCTYPE html> <html> <head> <title>Pull Quote Tweet</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <style> @import url('https://fonts.googleapis.com/css2?family=League+Spartan&display=swap'); .pullQuoteContainer { text-align: center; position: relative; margin-top: 90px; margin-bottom: 18px; cursor: pointer; } .pullQuoteContainer:before { content: "“"; font-size: 120px; font-family: 'League Spartan', sans-serif; color: black; position: absolute; top: -35px; left: 50%; transform: translateX(-50%); transition: color 0.3s; } .pullQuoteContainer p { font-size: 24px; color: black; max-width: 80%; margin: 0 auto; padding-bottom: 10px; transition: color 0.3s; } .tweetLink { text-align: right; display: flex; justify-content: flex-end; align-items: center; margin-top: 10px; transition: color 0.3s; } .tweetLink a { color: black; font-size: 18px; text-decoration: none; display: flex; align-items: center; margin-top: 10px; transition: color 0.3s; } .tweetIcon { font-size: 18px; margin-right: 8px; margin-top: 10px; transition: color 0.2s; } .pullQuoteContainer:hover, .pullQuoteContainer:hover:before, .pullQuoteContainer:hover p, .pullQuoteContainer:hover .tweetLink, .pullQuoteContainer:hover .tweetLink a, .pullQuoteContainer:hover .tweetLink .tweetIcon { color: #75C4AE; /* Change color on hover */ } </style> </head> <body> <div class="pullQuoteContainer" data-quote="With the phrase ‘going gradeless,’ we hope to express the idea of moving—gradually or rapidly—away from the pernicious influence of grades, and toward more humane and effective methods of assessment and feedback." data-handle="@tg2chat" data-url="https://www.teachersgoinggradeless.com/start?123" onclick="tweetPullQuote(event)"> <p>With the phrase ‘going gradeless,’ we hope to express the idea of moving—gradually or rapidly—away from the pernicious influence of grades, and toward more humane and effective methods of assessment and feedback.</p> <p class="tweetLink"> <span class="tweetIcon"> <i class="fab fa-twitter"></i> </span> <a href="#">Tweet this</a> </p> </div> <script> function tweetPullQuote(event) { var selectedQuote = event.currentTarget; var pullQuoteText = selectedQuote.getAttribute('data-quote'); var tg2chatHandle = selectedQuote.getAttribute('data-handle'); var url = selectedQuote.getAttribute('data-url'); var text = encodeURIComponent(pullQuoteText + " " + tg2chatHandle + " " + url); var tweetUrl = "https://twitter.com/intent/tweet?text=" + text; window.open(tweetUrl, "_blank"); } </script> </body> </html>
  3. ArthurC
    Do you have any further recommendations about what might be causing the problem?
  4. ArthurC
    What about Squarespace updates? Have any come down in the last day that might have impacted this?
  5. ArthurC
    One little random thing I did yesterday is that I used Squarespace's stock quote block on a new blog post (two quotes at the top, one from Foucault and one from Peter Townsend): https://www.teachersgoinggradeless.com/blog/we-need-to-talk-about-sbg Could this have confused my website about pull quote coding generally?
  6. ArthurC
    Same thing, unfortunately. As I edit, nothing budges in the slightest—not in the moment or once I've saved it. What I don't understand is why this code snippet, which was looking and functioning beautifully, started to do this SITE WIDE all of a sudden last night. The "top: -105" and everything else about the code was perfect everywhere—until it wasn't. It seems like some kind of update happened that is conflicting with the code. The last CSS code I entered was the one you created to resolve the spacing issues with embedded scripts—and that didn't harm anything. Most of what I did yesterday was stock Squarespace stuff: adding a carousel of recent blog posts on two pages; adding the parallax feature on a background image on the main page; editing text. In short, nothing that would have had a slte-wide impact. Could there have been a Squarespace update that messed up my pull quotes? I'm at a loss! 😞
  7.    ArthurC reacted to a post in a topic: My tweetable pull quote code snippet is malfunctioning all of a sudden!
  8. ArthurC
    Thank you, @Ziggy, for checking this out. Unfortunately, what has suddenly happened is that the code snippet isn't even responsive when I change it. Here's me trying to make the change you suggested: https://watch.screencastify.com/v/Fl0ymvuXwziImcpLMkST By the way, this happened on ALL the blog posts (about 15) where I had inserted these pull quotes SIMULTANEOUSLY yesterday. Prior to that they all looked and functioned beautifully.
  9. ArthurC started following Ziggy
  10. ArthurC
    The url for a page where you can see the issue was posted in the url field of the form, but it was https://www.teachersgoinggradeless.com/blog/long-unwinding-road, My site isn't private so no need for a site-wide password.
  11. ArthurC started following My tweetable pull quote code snippet is malfunctioning all of a sudden!
  12. ArthurC
    I created a tweetable pull quote code snippet that had a big quotation mark above and the pull quote below. This would change color upon hovering and then tweet out with author handle, url, and other things when clicked. It was working beautifully on all devices and on all the blog posts that I'd added it to. Here's the url for one: https://www.teachersgoinggradeless.com/blog/long-unwinding-road Then, this evening, I noticed that the quotation mark had suddenly "distanced itself" from the quotation below and was merging into the block above (the body of the blog post). I had done some work on the site today, but it involved mostly all stock Squarespace things, like I added a carousel of recent blog posts to my main page and Start Here page. I turned on the Parallax feature on the middle background image on my main page. Several days ago, I added some custom CSS from the user @Ziggy to prevent embedded scripts from adding unwanted height. I also added the pull quote code snippet to two more blog posts today (I've been adding 1-2 blog posts per day, working backwards from my newest). Everything was looking and functioning great until tonight! Another clue perhaps is that the actual script of my code snippet has weirdly also become unresponsive: Changing the number of pixels for any of the "top:" "bottom: " or "margin-top:" command doesn't do ANYTHING anymore on ANY of the blog posts! I know I would see it shifting when I changed these numbers before because I played around with them for a long time before I got the look I wanted. Here is the embed code snippet for the tweetable pull quote on one of the blog post pages: <!DOCTYPE html> <html> <head> <title>Pull Quote Tweet</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <style> @import url('https://fonts.googleapis.com/css2?family=League+Spartan&display=swap'); .pullQuoteContainer { text-align: center; position: relative; margin-top: 60px; cursor: pointer; } .pullQuoteContainer:before { content: "“"; font-size: 120px; font-family: 'League Spartan', sans-serif; color: black; position: absolute; top: -105px; left: 50%; transform: translateX(-50%); transition: color 0.3s; } .pullQuoteContainer p { font-size: 24px; color: black; max-width: 80%; margin: 0 auto; padding-bottom: 10px; transition: color 0.3s; } .tweetLink { text-align: right; display: flex; justify-content: flex-end; align-items: center; margin-top: 10px; transition: color 0.3s; } .tweetLink a { color: black; font-size: 18px; text-decoration: none; display: flex; align-items: center; margin-top: 10px; transition: color 0.3s; } .tweetIcon { font-size: 18px; margin-right: 8px; margin-top: 10px; transition: color 0.2s; } .pullQuoteContainer:hover, .pullQuoteContainer:hover:before, .pullQuoteContainer:hover p, .pullQuoteContainer:hover .tweetLink, .pullQuoteContainer:hover .tweetLink a, .pullQuoteContainer:hover .tweetLink .tweetIcon { color: #75C4AE; /* Change color on hover */ } </style> </head> <body> <div class="pullQuoteContainer" data-quote="We’ve walked the path of A-F grading for so long that it feels inevitable from the perspective of students, parents, employers, and institutions." data-author="@BarryFishman" data-handle="@tg2chat" data-url="https://www.teachersgoinggradeless.com/blog/long-unwinding-road"> <p>We’ve walked the path of A-F grading for so long that it feels inevitable from the perspective of students, parents, employers, and institutions.</p> <p class="tweetLink"> <span class="tweetIcon"> <i class="fab fa-twitter"></i> </span> <a href="#" onclick="tweetPullQuote(this)">Tweet this</a> </p> </div> <script> function tweetPullQuote(link) { var selectedQuote = link.parentNode.previousElementSibling; var pullQuoteText = selectedQuote.getAttribute('data-quote'); var authorHandle = selectedQuote.getAttribute('data-author'); var tg2chatHandle = selectedQuote.getAttribute('data-handle'); var url = selectedQuote.getAttribute('data-url'); var text = encodeURIComponent(pullQuoteText + " " + authorHandle + " " + tg2chatHandle + " " + url); var tweetUrl = "https://twitter.com/intent/tweet?text=" + text; window.open(tweetUrl, "_blank"); } </script> </body> </html> Thank you for any help you can give! Arthur
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources