Welcome

This code snippet library features advanced modifications you can make to customize your Squarespace 5 site. While we do not provide custom programming support, we've assembled the following guides as a reference to help you get started.


HTML Guide

CSS Guide

Javascript Guide

Entries in JS (18)

Saturday
Feb182012

Remove the Site Title Link

Example: Remove the link from your site title text. 

Note: This script removes the 'a href' link from the h1 site title; the text itself will appear but without being linked.

In Extra Header Code Injection put: 

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function() {
$('#siteTitle a').removeAttr("onclick");
})</script>

 In Custom CSS put: 

#siteTitle a { cursor: text; }

Monday
Dec052011

Replace Comment Field Titles In Journal Entries

Example: Replace comment field title text in journal entries with text of your own preference.

Note: This script allows you to replace the default title text for the 'Author', 'Author Email', 'Author URL', and 'Post' field titles in journal comments to text of your own choice. 

In Header Code Injection put: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#authorName_title").html("AUTHOR Text");
$("#authorEmail_title").html("AUTHOR EMAIL Text");
$("#authorUrl_title").html("AUTHOR URL Text");
$("#body_title").html("POST Text");
});
</script> 

 

Friday
Sep092011

Disable Right Click 

Example: Disable "right click" to visitors of your site.  

In  Header Code Injection put: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery
/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {
$(this).bind("contextmenu", function (e) {
 e.preventDefault();
});
});
</script>

 

Tuesday
Jul262011

Disable the Picture Gallery Lightbox

Example: Disable the picture gallery lightbox.

Note: To apply this modification, your Picture Gallery must be configured to display text or image navigation as the Full Image Display Format. Do not apply this modification if you're using the "Show large images using a Lightbox animation" display option.  

In Header Code Injection put:

<script style="text/javascript">
SSLightbox.showFullImage = function() { }
</script> 

In Custom CSS put:

.picture-full { cursor: default !important; }

Thursday
Sep092010

Change Submit Button Text In Forms 

Example: Change the default "submit" button text in forms pages to text of your own choice.

Note: This script allows you to replace the system 'submit' button text in forms pages to text of your choice. You will need to include the specific form submit button ID number to implement this for each instance (replace XXXXX in the code below). You can find the unique ID number for your form submit button using these instructions for targeting and modifying selectors. Also, replace the 'your text here' with the text you want to display for your form button.

In Extra Header Code Injection put:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$('#formSubmitButtonXXXXXX').val("Your text here.");
$('#formSubmitButtonXXXXXX').val("Your text here.");
$('#formSubmitButtonXXXXXX').val("Your text here.");
});</script>

Wednesday
Sep082010

Remove the New Browser Prompt On Links Pages

Example: Open links on the same page instead of prompting a new browser window in Links page modules.

Note: This script prevents the new browser prompt built into Links page modules so that your links open on the same page. You will need to replace the module page ID below with that of the page module ID for the links page within your own site. You can find this by viewing your page source. See: Targeting and Modifing Selectors.  

In Extra Header Code Injection put:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function() {
$('#modulePage1234567 a').removeAttr("onclick");
})
</script>

Wednesday
Sep082010

Remove the Banner Image Link

Example: Remove the link from your header banner. 

Note: This script removes the 'a href' link from your site header banner; the banner image will appear but without being linked.

/* Apply to all pages in your site. */

In Extra Header Code Injection put:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#bannerWrapper').remove('a').append($('#banner'));
});</script>

/* Apply to a specific page in your site. */

In Extra Header Code Injection put:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#modulePage1234567 #bannerWrapper').remove('a').append($('#banner'));
});</script>
Wednesday
Sep082010

Replace the "Entries In" Category Overview Page Text

Example: Change the "Entries in" text on category overview pages to display text of your own choice.

Note: This script allows you to overwrite the default 'entries in' text appearing on journal category overview pages to text of your own choice. 

In Extra Header Code Injection put:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$(".journal-filter-header").html("YOUR TEXT HERE");
});
</script>

 

Wednesday
Aug252010

Add A Dynamic Hover Tool-Tip

Example: Add a custom tool-tip to text and image link hovers within your site.

Note: This script allows you to create more visually distinct tool-tips for link and image hovers within your site. You must first download the author's script (choose the production version of the file under the download section on this page). Then, upload the script file to your storage prior to implementing this code. You can style the tool-tip to your preference by editing the CSS within the Custom CSS pane of the style editor. You can see a live demonstration of this tool-tip in the Javascript Guide

In Extra Header Code Injection put:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script  type="text/javascript" src="/storage/jquery.tinyTips.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.tTip').tinyTips('light', 'title');
});
</script>

In HTML put:

<a class="tTip" title="Text content for your hover tool-tip here." href="#">Your link text here.</a>

In Custom CSS put:

/* Javascript Tooltip */

.lightTip { width: 230px;  margin-left: 46px; font-size: .8em; line-height: 1.4em; }
.lightTip .content { width: 210px; padding: 20px; -moz-border-radius: 4px; -webkit-border-radius: 4px; background:#222222; color: #f6f6f6; }

Tuesday
Jul272010

Change the Site Banner Link URL

Example: Change the default site banner link from your home page url to any other link. 

Note: This script redirects the banner image link within the header area of your site to a page you choose — instead of to the default home page you may have set. Using the per page modification you can redirect the banner link on specific pages within your site to a link of your choice.

/* Change the site banner url for every page on your site. */

In Extra Header Code Injection put:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#bannerWrapper a').attr({href:"http://www.your_link.com"});
});
</script>
/* Change the site banner link url per page using module page ID. */

In Extra Header Code Injection put:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#modulePage1234567 #bannerWrapper a').attr({href:"http://www.your_link.com"});
});
</script>



Tuesday
Jul272010

Change the Site Title Link URL

Example: Change the default site title link from your home page url to any other link.

Note: This script redirects the h1 site title link within your site to a page you choose — instead of to the default home page you may have set. Using the per page modification you can redirect the site title link on specific pages within your site to a link of your choice.

/* Change the site title url for every page on your site. */

In Extra Header Code Injection put:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#siteTitleWrapper a').attr({href:"http://www.your_link.com"});
});
</script>
/* Change the site title link url per page using module page ID. */

In Extra Header Code Injection put:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#modulePage1234567 #siteTitleWrapper a').attr({href:"http://www.your_link.com"});
});
</script>
Tuesday
Jul272010

Redirect the Member Profile Link In Journal Entry Comments

Example: Redirect the member profile link in journal entry comments to another page on your site or to a custom member profile page you created.

Note: This script redirects the member profile links in journal entry comments to a page of your choice, for example, a custom member profile page. You can create custom profiles using a blog or html page module that can be styled to your own preference — then apply this script to redirect the member name link (that appears in journal comments) to the page you created. 

In Extra Header Code Injection put:

/* Replace "Member Login Name" with the actual login name of the member. Replace  "Your Link" with the actual link url you wish to redirect the member's profile to. */

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$('.journal-entry-wrapper.authored-by-MEMBER_LOGIN_NAME .posted-by a').attr({href:"http://www.your_link.com"});
});
</script>

 

Tuesday
Jul272010

Customize Journal Entry Comments Text

Example: Replace the default text within the comment area of journal entries.

Note: This script allows you to replace the generic system text within single journal entry comments such as the: 'comment form title', 'add new comment', 'there are no comments' and the 'reader comments' text defaults to specific text of your own choice. 

In Extra Header Code Injection put:

/* Replace the default "Reader Comments" text within the quotaton marks with your own text */

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$("#comments .caption").html("Reader Comments");
});
</script>



Additional changes you can make:

$("#comments .text").html("REPLACE There are no comments");

$("#add-comment-area .caption").html("REPLACE Comment form title");

$("#add-comment-area .caption-text").html("REPLACE Enter your information below to add a new comment");

Tuesday
Jul272010

Customize Your "Page Not Found" (404 Error Page)

Example: Redirect the system generated "Page Not Found" error page to a custom page of your own.

Note: This script allows you to redirect the generic 404 error page to a page of your choice. You can use an html page module to create a custom 'page not found' and then apply this script to redirect to the page you created.

In Extra Header Code Injection put:

/* Replace the "Redirect url" with the url to your own custom page. Replace the "Your Website Title" text with the title of your own website. */

<script type="text/javascript">
var redirectURL = "http://REDIRECT_URL_TO_YOUR_NEW_404_PAGE";
if(document.title == "YOUR WEBSITE TITLE - Page Not Found"){
location = redirectURL;
};
</script>

 

Tuesday
Jul272010

Put Sidebar Widgets Into Your Site Footer

Example: Move widgets added to Sidebar 2 into your site footer area.

Note: This script moves widgets within your second sidebar (sidebar 2) into your site footer so that they can appear below the page content.

Required Layout Settings:

  1. Banner & Navigation: Choose a three-column layout preset.
  2. Change Widths: Set the Sidebar2 width to 0.

 

In Extra Header Code Injection put:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
  google.load("jquery", "1");
  google.setOnLoadCallback(function() {
  $('#pageFooterWrapper').append($('#sidebar2Wrapper'));
  });
</script>

In Custom CSS put:

#pageFooter {  display: none; }
#sidebar2Wrapper { width: $CanvasWidth$; }

Monday
Jul262010

Disable the ESC Key Listener

Example: Turns off the listener for the ESC Key to disable the redirect to your login page when pressed.

In your site Footer Area put:

<script type="text/javascript"> 
YAHOO.util.Event.removeListener(document, "keyup");
</script>

Monday
Jul262010

Redirect the Author Profile Link In Journal Entry Posts

Example: Redirect the author (editor)  profile link in journal entry posts to another page on your site or to a custom member profile page you created.

Note: This script redirects the author profile links in journal entry posts to a page of your choice, for example, a custom member profile page. You can create custom profiles using a blog or html page module that can be styled to your own preference — then apply this script to redirect the author name link (that appears in journal entries) to the page you created. 

In Extra Header Code Injection put:

/* Replace the "Editor Login Name" with the login name for your member editor. Replace  "Your Link" with the actual link url you wish to redirect the author 's profile to. */

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$('.journal-entry-wrapper.authored-by-EDITOR_LOGIN_NAME .posted-by a').attr({href:"http://your_link.com"});
});
</script>

 

Sunday
Jul252010

Change the "Click Here To Read More" Excerpt Link Text

Example: Change the text of the journal excerpt link "Click Here To Read More" to text of your own choice.

Note: This script allows you to overwrite the default 'click here to read more' link text appearing in journal entries (when journal excerpts are enabled ) to text of your own choice. 

In Extra Header Code Injection put:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$(".journal-read-more-tag a").html("PUT YOUR OWN TEXT HERE");
});
</script>