#summary block

On a website I created - www.globalconnectionstelevision.com - I wanted to change the "Read More" text at the end of a summary block to "Watch Video" since the site is primarily video based (Video Gallery page).  However, I didn't want to implement this change site wide because of the News page which contained articles.  There was also a sidebar which linked to the articles.  

Because I wanted to change the "Read More" links only on the Video Gallery page, I navigated to that page and entered the following code into the page's: Settings - Advanced - PAGE HEADER CODE INJECTION

<style>  .sqs-block-summary-v2 .summary-read-more-link:after { content: "Watch Video →"; } </style>

The Style tags let the browser know you're overriding some Squarespace code.  The above code worked for changing Read More to Watch Video (I kept the arrow).  However, the code changed ALL of my "Read More" links on the sidebar too, which I wanted to keep as Read More.  

Jonathan Gennick's terrific "Learn CSS for Squarespace" book informed me that with Squarespace "There can only be one element on a page having a given name".  A little digging with Firefox's Firebug revealed the name for the main page as Content and the sidebar would of course, have a different name.  So I added #Content to the code to specifically target just the Content and not the sidebar (more help from Jonathan's book!).  The final code, which worked flawlessly on the Five template looks like this:

<style> #content .sqs-block-summary-v2 .summary-read-more-link:after { content: "Watch Video →"; }