This is a short instruction on how to move or replace a sidebar section in Squarespace. In our example we will move the Search Widget to the page header of our Code Journal page (see top of the page).

To make the following code work you must upload and install jQuery fist. You can download the .zip file with the latest jQuery HERE.

 

Preparation

  1. Go to your Squarespace storage and create a folder named scripts
  2. Then Upload the .zip file into that folder (tick: Decompress Zip Files After Uploading)
  1. Add a new section to your sidebar and add the Search Widget
  2. Get the ID of that new created section (Firebug might help you here)
  3. Get the ID of the Page header you want to put your Search Widget in

 

Add the following Script to your "Extra Header Code". You will find this under: Website Management / Website Settings / Code Injection.

 

Script

<script src="/static/50ec6cd6e4b0b0518bc6333a/50f556e3e4b0c61109871aa2/50f556e4e4b0c61109871b72/1298976184697/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
   $(function() {
   $("#sectionContentYour-ID") .appendTo("#modulePageYOUR-ID .header");
});
</script>

 

Now use CSS (added to the Custom CSS panel: Style Editing Mode / Custom CSS) to make it look right.

 

CSS Code

#sectionContentYOUR-ID {margin-top: 15px; margin-bottom: 15px; }
/*Change the look of your Search Widget
*/

 

We also changed the Value of the search button from ">>" to "Search Code Journal"

 

Extra Script Code

$('.search-form-pt .queryButtonWrapper input').attr({value:"Search Code Journal"});