ArthurC
-
Posts
10 -
Joined
-
Last visited
Content Type
Forums
Downloads
Store
Events
Blogs
Gallery
Profiles
Posts posted by ArthurC
-
-
Site URL: https://www.growbeyondgrades.org
Hi,
When I'm in editing mode in my footer, I see my social link icons (first screenshot). When I save and exit, I no longer see them (second screenshot). I asked Customer Support who said some of my custom code is causing the problem, but they were unwilling to say what part of the code was doing it.
Thanks for any help you can give,
Arthur
-
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> -
Do you have any further recommendations about what might be causing the problem?
-
What about Squarespace updates? Have any come down in the last day that might have impacted this?
-
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.
-
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.
-
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
Social Icons disappear when I save
in Customize with code
Posted
Thank you! I've included my Custom CSS, Header, and Footer code below:
Custom CSS:
/* Removes embedded scripts from code block */
html.squarespace-damask .sqs-blockStatus, .sqs-block .removed-script {
display: none !important;
}
/* This is the grid block code purchased from SQSP Themes */
.tweak-blog-basic-grid-primary-meta-date .blog-basic-grid .blog-meta-primary .blog-date,{
display: none
}
.blog-basic-grid .blog-meta-delimiter{
display: none
}
.tweak-blog-basic-grid-secondary-meta-author .blog-basic-grid .blog-meta-secondary .blog-author{
display: none
/* Don't show date of blog post */
}
.tweak-blog-item-show-date .blog-item-wrapper .blog-meta-item--date{
display: none
}
/* Eastern timezone */
.event-time-12hr:after{content:"Eastern"}
/* Lessens font flicker */
#desktopNav, .title-desc-inner {
animation: fade-me-in 1.5s;
}
@keyframes fade-me-in {
0% {opacity:0;}
80% {opacity:0;}
100% {opacity:1;}
}
table{
width: 100%;
border-collapse:collapse;
}
td{
width: 50%;
text-align: left;
vertical-align: top !important;
border: 1px solid black;
}
/* Example for additional nesting or specific IDs */
.squarespace-comments .comments-content .comment-list .comment .comment-header .controls .squarespace-comment-buttons .comment-control.like {
display: none;
}
/* hide the like button */
.squarespace-comments .comments-content .comment-list .comment .comment-header .controls .squarespace-comment-buttons .comment-control.like .like-count {
display: none;
}
/* Hide the like count */
.squarespace-comments .comments-content .comment-list .comment .comment-header .user-info .likes {
display: none !important;
}
Header:
<link rel="stylesheet" href="//assets.squarewebsites.org/custom-tables/style.css">
<script src="//assets.squarewebsites.org/custom-tables/custom-table.js"></script>
<meta name="twitter:card" content="summary_large_image">
<script data-ad-client="ca-pub-2599199643875006" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!--Header Injection Tab-->
<link rel="stylesheet" href="https://assets.squarewebsites.org/custom-tables/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<link href="https://cdn.jsdelivr.net/gh/willmyethewebsiteguy/sectionSlider@3.3/styles.min.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/36b5cc3c88.js" crossorigin="anonymous"></script>
<style>
.comment-header .user-info .date,
.comment-header .user-info .timesince,
.comment-header .user-info span.date,
.comment-header .user-info time {
display: none !important;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
Footer:
<!-- Plugin Related Posts -->
<script src="/s/plugin-related-posts.js"></script>
<script>pluginRelatedPosts({"imageAspectRatio":"1.777","showExcerpt":"true","filterByTagOnly":"true","headerText":"Related Posts","textSize":"medium"});</script>
<!-- end Plugin Related Posts -->
<!--Footer Injection Tab-->
<script src="https://assets.squarewebsites.org/custom-tables/custom-table.js"></script>
<script>
!function(){if(window.self!==window.top&&window.top.document.querySelector("html.squarespace-damask")){if(window.self===window.top||window.top.document.getElementById("custom-table-admin")||function(e,t,s,o,n){if(s.querySelector("#"+t))o&&o(this);else{var a=document.createElement("script");a.src=e+"?cache="+((new Date).getTime()+"").substr(0,7),a.id=t,a.onload=function(){n&&this.remove(),o&&o(this)},s.appendChild(a)}}("https://assets.squarewebsites.org/custom-tables/custom-table-admin.js","custom-table-admin",window.top.document.getElementsByTagName("head")[0]),!document.getElementById("custom-table-admin-styles")){var e="html:not(.blogapp) .sqs-blockicon-custom-table .sqs-blockicon-content {background-image: url('https://assets.squarewebsites.org/custom-tables/table-icon.png')!important;background-size: 32%;}",t=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css",s.id="custom-table-admin-styles",s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e)),t.appendChild(s)}}}();
</script>
<script src="https://cdn.jsdelivr.net/gh/willmyethewebsiteguy/sectionSlider@3.3/javascript.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {