Tuesday
Feb162010
« MOD: "Click to read more" Link »
5 There are a number of things I always want to change right off-the-bat when I customize a Squarespace template, and the "Click to read more ..." link is a great example.
STEP 1: Change the Link Text -- To change the text that is used for the link, simply enter the following script 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):
$(".journal-read-more-tag a").html("YOUR TEXT HERE");
So the final script would be:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function() {
$(".journal-read-more-tag a").html("YOUR TEXT HERE");
});
</script>
STEP 2: Style the Look -- You can style the look of the link any way you like by using css in the Custom CSS panel, for example:
.journal-read-more-tag { background: #333; padding: 10px; }
.journal-read-more-tag a { font-size: 11px; color: #fff; }
Enjoy!! 
Reader Comments (5)
hi vuela,
thank you for sharing this. I've followed your instructions but it's not working...
here's what I inject into the head, is there something wrong?
http://grab.by/2xcM
Hi wooliudo -- The jQuery bit needs to go inside the "ready" function. I revised my post above to use a better / simpler script and I also included the final with everything you need. Let me know if you have more troubles.
Thank for posting this, but is it possible instead of adding. Border to ad my own button instead and make it clickable?
hey vuela, how do you change the read more tag so it is specific to only one journal, not others within the site ?
hey vuela, how do you change the read more tag so it is specific to only one journal, not others within the site ?