colin.irwin

/history.php -> /history 301 Should do the trick

The code below is part of a larger function that manages breadcrumbs for multiple sections of a client's site - blog collections, index pages and regular pages. 
This is just for the news section, which is a blog. 
First the JavaScript (this requires jQuery to be installed).  Also, it's for a 7.0 site with Ajax loading enabled. For 7.1 sites or 7.0 sites with Ajax disabled you would swap out the window.Squarespace.onInitialize(Y, function() for $(document).ready(function(){
window.Squarespace.onInitialize(Y, function(){ processBreadcrumbs(); }); function processBreadcrumbs() { var thisPath = window.location.pathname; var thisPage; var breadcrumbLink; if (thisPath.includes('/news')) { $('.BlogItem-title').addClass('pad-site'); thisPage = $('.BlogItem-title').text(); $('.Main--blog-item .Main-content').prepend('<div id="breadcrumbNewsArticle"><div><a href="/">Home</a> &#187; <a href="/news-and-insights">News</a> &#187; <span class="truncate">'+thisPage+'</span></div></div>'); } }  
Now some Custom CSS. The first class, .pad-site, is just to format the blog post title to make it consistent with the rest of the site. 

The second class,  .truncate, tidies up long post titles so that the breadcrumb doesn't look too long. It stops the text at 320px wide and inserts an ellipsis to indicate it has been truncated.  It looks like this:

The third CSS rule that begins with [id^="breadcrumb"] contains the styling for the breadcrumb links. 
The Custom CSS
.pad-site { padding-top: 34px; font-size: 28px; } .truncate { display: inline-block; width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } [id^="breadcrumb"] { font-size: 16px; font-weight: 400; font-style: normal; font-size: 16px; letter-spacing: .1em; a { color: @black; border-bottom: 1px dotted @black; &:hover { opacity:0.8; } } }  
Finally, a caveat. I haven't tested this code on 7.1 sites. It's probable that it won't work by simply pasting it into your site and would need some editing to make it function correctly. 

As a test I created a gallery called test gallery. 
Then I gave some of the items in the gallery links 

 
I created a summary block on another page that uses the gallery as the source of its images. 
Then I created a css rule to kill pointer events for any summary items whose link is from the original gallery (begins with /test-gallery).
It works as expected. Items with no clickthrough url have a standard cursor and are not clickable but those with a clickthrough work properly. 

Here is the code - insert it at the bottom of your custom css area after any other code that may already be there. You'll need to tweak href ^= "***" to reflect your gallery slug 
.summary-item a[href^="/test-gallery"] { pointer-events: none; }

This puts a grey 'glow' behind your navigation links. Put it in your custom css. 
nav#main-navigation { text-shadow: 0px 0px 3px #aaa; } The parameters (in order) are
Horizontal shadow offset - currently set to 0px so it sits behind the image) Vertical  shadow offset - currently set to 0px so it sits behind the image) Blur radius - set to 3px so that it casts an omnidirectional shadow. Reduce this value to make the shadow sharper.  Color - currently set to a mid gray

Something like this should work:
body#collection-55a5af43e4b0aac39df22df0 { background-position: center top !important; background-image: url("//static1.squarespace.com/static/55a48db1e4b03b84d36b22fb/t/571e6768746fb924e954224b/1461610345514/Against%2BColorful%2Bgraffiti.jpg"); }

Add
.sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:before, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:before, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:link:before, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:link:before, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:visited:before, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:visited:before { /* The icon size */ font-size: 40px; } .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:link, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:link, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:visited, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:visited { /* Space around icons */ width: 40px; height: 40px; }
To your Custom CSS Editor

Add
.sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:before, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:before, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:link:before, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:link:before, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:visited:before, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:visited:before { /* The icon size */ font-size: 40px; } .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:link, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:link, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:visited, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:visited { /* Space around icons */ width: 40px; height: 40px; }
To your Custom CSS Editor

Here's a slightly more concise solution, using jQuery.
The idea is to use a Markdown block to hold your questions and answers. It should be the only Markdown block on the page.
The Markdown will look something like the following (The + at the start of each question is a cue for the user to know they can expand the entry).
+ This is a first question ----------------- This is the first line of an answer to the question above. This is a second line of the answer. * Bullet points * Can be used too + This is a second question ----------------- This is a one line answer to the question above.
Questions should be styled as H2.
Then put the following code into your page's injection point:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function(){ $('.markdown-block .sqs-block-content h2').css('cursor','pointer'); $(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle(); $(".markdown-block .sqs-block-content h2").click(function() {$(this).nextUntil("h2").slideToggle();}); }); </script>
The first can be omitted if you already have a link to jQuery in your sitewide code injection point.
The second script tells the mouse cursor to become a pointer when over the Markdown H2s - this is to tell the user it's clickable. Then, when an H2 is clicked it toggles the visibility of all content between the clicked H2 and the next H2 / the end of the markdown block.
See it in action here - http://www.silvabokis.com/idea-testing/