ArthurC
Member-
Posts
8 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by 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>
-
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?
-
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! 😞
-
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.
-
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