Wednesday
Feb172010

« MOD: Replace Hard-coded Text »

Throughout any Squarespace Template there are elements that have text hard-coded in that you may want to change. Here are some examples, and the script to do it. To make the following modifications, simply enter the following script samples into your <head> code injection point (making sure to have proper reference to jQuery, and script enclosing tags, read jQuery Setup Basics for more info).

 

Example 1: Change "Main" Journal Navigation Text -- The "Main" Journal Navigation Link is a great example of targeting an element by the text contained in it, rather than simply targeting the element directly:

$('.journal-entry-navigation a:contains(Main)').each(function(){ 
   var str = $(this).html(); 
   $(this).html(str.replace('Main','YOUR TEXT HERE')); 
});

 

Example 2: Change "Read More" Link Text -- In contrast, the "Read More" Link can be targeted directly, like so:

$(".journal-read-more-tag a").html("YOUR TEXT HERE");

 

Example 3: Change "Reader Comments" Title Text

$("#comments .caption").html("YOUR TEXT HERE");

 

Example 4: Change "No Comments" Caption Text

$("#comments .text").html("YOUR TEXT HERE");

 

Example 5: Change "Post a New Comment" Title Text

$("#add-comment-area .caption").html("YOUR TEXT HERE");

 

Conclusion -- By now you should see the pattern, and as long as you can find the selector ID or Class for the element you want to change, then using this simple script you can replace any text in your Squarespace template!

The trick is to make sure you are referencing the element by the correct name, and when targeting an element by the text it contains (like the first example), that you are calling out the original text that you want to replace exactly as it is before modification.

 

Be Creative!

Reader Comments (3)

Hey! I tried some of these scripts on my Squarespace site (still building it) and they work just fine (btw, thanks for sharing the knowledge)! However, my site will have two journal pages (one in Portuguese and the other one in English), so I'd like to change the some of the default text only in one of them (the one in Portuguese). But I can't for the life of me figure out how to do this (aply the scripts only to a specific page and not to the whole site). I'm no coder, but I'm trying to learn as I go. Could you help me out on this? Thanks!

03.10 | Unregistered CommenterAndré

Hi Andre! You can target a page specifically by using it's unique ID number:

$("#modulePage1234567 .journal-read-more-tag a").html("YOUR TEXT HERE");

To find your unique page id you need to view the source for the page. The best way to do this is to get the Firebug plugin for Firefox. Then you can use Firebug to view the source for the page and get the unique ID by clicking the bug icon at the bottom right of your browser to open up the Firebug inspector or right click (control+click) on the page somewhere and then select "Inspect Element" from the mouse menu. The module page id will be at the top of the page source.

Hope that helps!

03.10 | Registered CommenterVUELA

Hi there! Thank you so much! That's exactly what I needed to know!

03.11 | Unregistered CommenterAndré

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>