Instructions

Musician, Composer & Teacher

INTRODUCTION

 

Hi Claire!

as promised i will now explain how to upload new content, create new pages, and maintain the site. I'll give a full page by page rundown for the entire site and detailed instructions for the french part of the site. This Should be enough for you to be able to do most of the site work without me (not that I won't help you!). I'll also skip everything that can be done by just going to style designer as I'm sure you can figure that stuff out yourself.


Home Page

There isn't a lot on this page so this should be simple:

  • Changing the title on the home page is really simple!
    1. Go to pages and click the settings gear next to home
    2. On the block that pops up, select the "advanced" tab
    3. In the Coding section, the fifth and sixth lines should be:

      //Change Title Text
      var title = "ClaireDevlin";
            
    4. Simply Change the value of the variable
      title
      to the title you would like (don't forget to put quotes around the title)
    5. Click save at the bottom right of the pop-up menu
    6. FANTASTIC! You have yourself a new title!

  • The language selection buttons link you to the home page for the selected language, if you want to change this page it's pretty tricky but not too hard! Just follow these steps:
    1. Go to pages and click the settings gear next to home

    2. On the block that pops up, select the "advanced" tab

    3. In the coding section, the second and third lines should be:

      //Change English & Français Button Link Page
      var link = "/about/";

    4. Change the variable
      link
      to the url slug of the the pages you want the "English" & "Français" buttons to link to
    5. The URL Slug of a page can be found on the page menu by clicking the settings gear and scrolling the pop-up window down to the bottom and copying the line next to
      URL Slug
    6. BRAVO! You have successfully change the link for the language buttons!


Shows Page

Managing the events page is an easy thing to do!

  • To add a new event:
    1. From the pages menu, go to the events page
    2. In the left-hand menu, press the + button at the top
    3. In the pop-up menu, enter the event's title in english, followed by "
      ;
      ;
      " (space, 2 semicolons, space) then enter the event's title in french
    4. Enter the events desciption in english, followed by "↵
      ;
      ;
      ↵" (new line, 2 semicolons, new line)
    5. Next enter the event's start and end time and date
    6. Also, you can click on the location tab and enter the events location (this will make a nice google maps link)
    7. Once the information is entered, click the apply button
    8. EUREKA! Event created!

  • To display or hide the shows description on the shows list page
    1. This is easy to change, just go to the english events page, then go to the "design" menu on the left-hand side
    2. Now, still in the left-hand menu, go to the "style editor" menu
    3. Scroll down in the left-hand menu into you come across the "events" section
    4. In this section there is a checkbox called "Show Excerpt", just toggle this checkbox to show and hide your event descriptions!
    5. SPLENDID! The show description should be toggled on or off!


Music Page

This was the most complicated page to put together, so if something stops working be sure to let me know!

  • Adding a new album:
    1. On the pages left-hand menu, scroll to the bottom and click the + next to the not linked section to add a new item
    2. Select the album option for page creation
    3. Enter all the information for the album
    4. When writing the album description, write the english description type "↵
      ;
      ;
      ↵" (new line, 2 semicolons, new line), then re-write the description in french!
    5. Once the album information is all entered, go back to the pages menu
    6. Find your newly created album page in the not linked section of the page menu and click the settings gear
    7. In the new menu that popped up in the basic tab there will be a section "page layout", open the drop-down menu and select "Multi-Album Template" then exit the menu by clicking apply
    8. Take your album in the not linked section and drag it into the "Music Albums" section
    9. Voila! Your album should now appear on the music page!

  • Adding a single track should be pretty simple. Just copy the layout of the other single tracks. These are all just made of standard squarespace blocks.

  • Adding a music block from soundcloud:
    1. On the soundcloud song or album you want to post, click the share button
    2. On the pop-up window, go to the embed tab
    3. On the top select the type of block you want and then copy the code under the "Code and Preview" Title, noe go back to your site
    4. In the "other music" section of the music page, add a "code block"
    5. Add the copied code into the code block
    6. The width should be adjusted automatically with resizes (for soundcloud)
    7. The height can be adjusted by changing the height value in the code, just edit the code block, the beginning of the code should look something like:
      <iframe width="100%" height="166" scrolling="no"...

      Change the value of the
      height
      parameter until the block is the height you prefer
    8. RADICAL! The Music Block is now full of soundcloudy goodness!

  • For other music blocks (e.g. Bandcamp), just look for somewhere on the music page that says share or embed, then find the
    <iframe>
    code and follow the other instructions above (if using bandcamp, always change the width value in the
    <iframe>
    to
    100%
    )

  • Setting Album Names, Length, and More:
    1. Fixing this is pretty easy but it does require you modify the actual file BEFORE you upload it, you just have to change something called the meta-data (these instructions are windows only, if you have a mac, search google and I'm sure you'll find something)
    2. Find the music file on your desktop, right-click it and select properties, and go to the details tab
    3. You should now see a window that looks like the image on the right
    4. Squarespace uses the data here to determine the information it displays, things like the time should have been added automatically by the software that generated the music file
    5. The specific lines squarespace uses are:
      • Title - For the name displayed
      • Contributing Artists - ...Should by obvious
      • #
        - For ordering the tracks on the album
      • Length - The length of the piece (HH:MM:SS)
    6. Hakuna Matata! That should fix any problems you have!

  • Changing the gradient colors and album art side switching:
    1. In the pages menu, click on the settings gear for the music page under the english section
    2. In the pop-up menu, click on the advance tab
    3. The first few line in the code section should look something like this:

      <script>
      	//Even Numbered Album Gradient
      	var evenAlbumColor1 = "#000000";
      	var evenAlbumColor2 = "#A8A8A8";
      	var evenAlbumColorDirection = "to bottom right";
      	var evenAlbumArtPosition = "right";
      	
      	//Odd Numbered Album Gradient
      	var oddAlbumColor1 = "#000000";
      	var oddAlbumColor2 = "#A8A8A8";
      	var oddAlbumColorDirection = "to bottom left";
      	var oddAlbumArtPosition = "left";
      	
      	//Even Numbered Album Use .evenRawGradient
      	var useEvenRawGradient = true;
      	
      	//Even Numbered Album Use .oddRawGradient
      	var useOddRawGradient = true;
      </script>


      These variables represent the colors and directions of the gradients in the album regions for both the even and odd number albums, as well as the side the album art shows up on
    4. The colors are in hex color codes, they must be in quotes and they must start with
      #
      (Number Sign) To Change the colors, simply replace the color code for the color region you want to change
    5. To find some nice color codes, check out This Site
    6. The color direction refers to the direction the gradient goes, this variable must start with
      "to "
    7. The options for this variable are
      right, left, top, and bottom
      but these can be used in combination with each other (i.e.
      "to right bottom"
      would make a 45 degree gradient)
    8. The next variables
      evenAlbumArtPosition
      and
      oddAlbumArtPosition
      control the side the album art shows up on for the even and odd numbered sections, your options here are
      "left"
      and
      "right"
    9. To make your gradients AWESOME and learn what the variables
      useEvenRawGradient
      and
      useOddRawGradient
      do, Click Here
    10. SUPERB! The Gradients should be as you like now!


Gallery Page

Alright! Easy stuff!

  • To add an image to your gallery:
    1. Go to the pages menu and select the gallery page
    2. Click the + button at the top of the left hand menu and click image on the pop-up
    3. Upload the image and give it a title and description
    4. If you would like to have a seperate title, for french, type "
      ;
      ;
      " (space, 2 semicolons, space) and then write the French title!
    5. If you would like to have a seperate description for the french page, type "↵
      ;
      ;
      ↵" (new line, 2 semicolons, new line), and write the french description!
    6. Once the image is posted, you can use the left-hand menu to reorder the images to change their layout
    7. やった! You now have a new image in your gallery!

  • To display or remove the image titles, meta-data, and description:
    1. Go to the Gallery page
    2. Hover over the content block and click edit
    3. Now hover over the summary block and click edit again
    4. In the pop-up menu, change the tab to display
    5. Here you can toggle the title and excerpt options as well as choose up to two different pieces of meta-data to display
    6. SUPER! Now you can display or remove image titles, meta-data and descriptions!


Videos Page

Alright! More Easy stuff!

  • To add a video to your videos page:
    1. Go to the pages menu and scroll down to the "not linked" section (the same section this page is in) and click on the Videos page there
    2. Click the + button at the top of the left hand menu and click video on the pop-up
    3. Paste the URL of the video and give it a title and description
    4. Unfortunately, the video must be hosted on another site as video hosting requires a lot of space, this is why square space does not let you upload a video from your desktop
    5. If you would like to have a seperate title, for the french page, type "
      ;
      ;
      " (space, 2 semicolons, space) and then write the French title!
    6. If you would like to have a seperate description for the french page, type "↵
      ;
      ;
      ↵" (new line, 2 semicolons, new line), then enter the french description!
    7. Once the video is posted, you can use the left-hand menu to change the order the videos show up on the videos page
    8. Ta-Da! The video should now show up on the videos page!

  • How to change the size of the videos
    1. Go to the videos page
    2. Hover over the contents block and click edit
    3. Hover over the summary block and click edit again
    4. In the pop-up menu, change the tab to the "Layout" tab
      SIDE NOTE: Check out the other tabs here aswell for more content modification!
    5. In the section called "Image Size" there is a slider
    6. Just use this slider to make the video the size you prefer
    7. BRAVA! The videos are now at the perfect size!

  • Changing the side the videos show up on
    1. Click on the Settings Gear for the video page
    2. In the pop-up menu, change the tab to "Advanced"
    3. The first few lines of code you see should look like this:

      <script>
      	//Side that Even Albums are Put On
      	var evenVideoPosition = "left";
        
      	//Side that Odd Albums are Put On
      	var oddVideoPosition = "right";
      </script>
            
    4. To changed which side the even numbered section videos show up on, change the variable
      evenVideoPosition
      to
      "left"
      or
      "right"
    5. Now for odd videos do the same but for the variable
      oddVideoPosition
    6. Wahoo! The videos should now be on the side you set!


Lessons Page

Video Image Maker!

TITLE GOES HERE
TITLE GOES HERE

VIDEO TITLE

VIDEO THUMBNAIL URL

When finished right click the left image and select "Save image as..."

  • Adding Resourses to the lessons page:
    1. Go to the lessons page and edit the content block
    2. Hover over the row of books you want to add to and edit the gallery
    3. In the pop-up menu, click the box with the up arrow to add an image
    4. Select the image you want from the file browser window that pops-up
    5. At the bottom of the next pop-up, there is a section labeled "Clickthrough URL", here paste the URL of the webpage you want the image to lead to
    6. Click save and apply
    7. EXCALIBUR! Your image will show up on the lessons page!


About Page

The first section of the about page should be easy enough to edit, just don't forget the English - Français translation rules HERE! The next section, "Noteworthy Achievements" is also simple:
  • To add or remove an achievement from the Noteworthy Achievements section:


Contact Page

  • To add a field to the Contact Form:
    1. Go to the Contact page
    2. Click Edit on the Page Content
    3. Click Edit on the Contact Form
    4. On the pop-up menu click the + button at the bottom of the list of Contact Fields
    5. Edit the name of the field and add "
      ;
      ;
      " then the french name to the end so that the field name can be translated
    6. If the field contains a caption (much like the first name and last name captions for the name field):
      • Click on the settings gear for the contacts page
      • In the pop-up menu on the right, change to the "Advanced" tab
      • At the top of the code section, you should see the code:

        <script>
          var captions = [];
          //////// ADD CAPTION TRANSLATIONS BELOW ////////
          captions.push( ["First Name", "Prénom"] );
          captions.push( ["Last Name", "Nom de Famille"] );
          ...
      • Under
        //////// ADD CAPTION TRANSLATIONS BELOW ////////
        Create a line for each additional caption, each line should be formatted:

        captions.push( [ "Current English Caption", "Desired French Caption" ] );


        Feel free to copy this text and paste it into the code section and just fill in the
        Current English Caption
        and
        Desired French Caption
        fields appropriately
    7. Supercalifragilisticexpialidocious! You've added a new field to the contact form

  • To Have a link to the contacts page that fills some of the forms automatically:
    1. The link to the contacts page should start with
      contact/
    2. Next for each field you want filled in by the link, add:

      &Field_English_Name=Field_English_Text_;;_Field_French_Text


      To the end of the link (you can do this as many times as you want)
    3. An example of this would be
      contact/&Subject=Saxophone_Lessons_
      ;
      ;
      _Saxophone_Cours&Message=Saxophone_Lessons_Message_
      ;
      ;
      _Saxophone_Cours_Message
    4. EXCELSIOR! You now have a link to a partially filled contact form


Links Page

  • To Edit the links on the link page:
    1. Go to the links page
    2. Edit the page content
    3. Edit the code block
    4. Copy the code in the code block
    5. Go to Block Maker
    6. Click the icon in the bottom right corner of the top menu
    7. Paste the code into the pop-up menu and click ok
    8. Add whatever links you want, copying the style already in place
    9. When finished, click the icon then press Ctrl + C, then enter
    10. Go back to the code block on the links page and copy the new code back to the code block
    11. HUZZAH! The new links should be added


English - Français

  • There are some simple rules to follow when adding new content you want to be translated:
    1. If you have a piece of information that you are adding into a squarespace pop-up menu:
      • If the text field is a single line, use the "
        ;
        ;
        " (space, 2 semicolons, space) technique to add the translated text
      • If the text field is multiple lines, then use the "↵
        ;
        ;
        ↵" (new line, 2 semicolons, new line) technique to add translated text
    2. WHen adding text in a textblock:
      • If the text is formatted to be "HEADING 1" then use the "
        ;
        ;
        " (space, 2 semicolons, space) technique to translate the text
      • If the text is formatted as anything other than "HEADING 1" Use the "↵
        ;
        ;
        ↵" (new line, 2 semicolons, new line) technique to add translated text
    3. C'EST BIEN! You have now learned all the rules for english to french translation!


Block Maker

Block maker is a very strong text-editing tool that can help you make much better text based blocks than squarespace's default text editing tool! Almost everything about block maker is fairly obvious, so I'll just tell you how to use the 3 features I've added to the program at the bottom left of the top menu:
  1. The button creator with the icon
    • Enter the button text in the pop-menu with the english and french seperated by "
      ;
      ;
      " (space, 2 semicolons, space)
    • Enter the URL you want the button to link to, this can also be a link to another one of your pages by using that pages URL Slug in the format
      [/url-slug]
    • Choose whether you want the page to open in a new tab or not
    • Click "OK" and a squarespace button should appear
    • The button in Block Maker will look Strange and All White but thats to be expected, It will look fine on the actual page
  2. The Code Copy Button with the icon
    • Once you press this button, a pop-up dialog will appear at the very top of the page
    • Do as the dialog tells you and press Ctrl+C then Enter
    • The code for your text should now be copied, simply paste this code into a squarespace code block and you should see your text appear!
  3. The Reupload Code Button with the icon
    • In the pop-up menu that appears, simply paste the code from the code block you would like to edit and click "OK"
  4. Sweet! You now know how my additions to Block Maker work!


Font Management

  • How to add sweet fonts!
    1. First go to the link HERE for a huge selection of fonts!
    2. Unfortunately you are limited to using these fonts
    3. When you find one you like, click the
      +
      button at the top right corner of the fonts block on the google site
    4. Next, a small block that says 1 Family Selected should show up at the bottom right of the page, click on this block
    5. Copy the text in the "Embed" tab under the "Standard" section that looks like:
      <link href="https://fonts.googleapis.com/css?family=Your Font Here" rel="stylesheet">
    6. Now back on this site, in the left hand-menu go to the initial menu then go to "SETTINGS"
    7. In settings, in the "WEBSITE" section, go to "Advanced"
    8. In the "Advanced" menu, select "Code Injection" (Don't be afraid)
    9. At the very top of the code section for header there should be a comment saying:
      <!--Add Font Links Here-->

      Right under this line, you should make a new line and paste the text you copied from the google site
    10. Now press the "Save" button at the top left corner of the menu
    11. Hocus Pocus! You have just used magic to add this font to your font options for the block maker tool!!!


New Pages

  • To create a new page:
    1. Go to the pages menu in the left hand menu
    2. Click the
      +
      icon at the top right of the menu, next to "Main Navigation"
    3. In the pop-up menu, the page type you most likely want to choose is "Page"
    4. For the page name, enter the name of the page in english, followed by "
      ;
      ;
      " (space, 2 semicolons, space) then enter the french title
    5. Select whichever default format you would like, then click the "Start Editing" Button at the bottom of the left-hand menu
    6. Edit the page as you would like then click save at the top left of the page
    7. Click on the settings gear to the right of your newly created page in the left-hand menu
    8. In the pop-up menu on the right:
      • Leave the Navigation Title in the format
        [English Title ;
        ; French Title]
      • Change the Page Title to only the english name of the page
        [English Title]
      • Near the bottom of the menu there is a place for a URL Slug, change this to the english title all lowercase and with spaces replaced by "-" (dash)
        [english-title]
    9. Click "Save" at the bottom right of the pop-up menu
    10. SHABAM! New page ready and working!


Social Links

  • To add/remove/edit a social link:
    1. Go to the settings menu on the left hand menu
    2. Under the "Website" section, click "Connected Accounts"
    3. To add another account:
      • Click the "Connect Account" button
      • Select the type of account you would like to add
      • Enter all the nessasary information and click apply
    4. To Remove an Account:
      • Click on the account you would like to remove
      • Click Dsiconnect Account
    5. To edit an account:
      • Click on the account you would like to edit
      • Change the profile URL to the URL of the page you would like the social icon to link to
    6. #Awesome! You have successfully edited your social links!


Code Backups

Home Page Code Backup
<script>
  //Change English & Français Button Link Page
  var link = "/about/";
  
  //Change Title Text
  var title = "ClaireDevlin";
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
  ////////Set Language Button Links////////
  var englishLink = link + "?language=en";
  var frenchLink = link + "?language=fr";
  
  ////////Set Global Variables////////
  var homePage = true;
  
  /////////////////////////
  //Setup Page After Load//
  /////////////////////////
  $(document).ready(function(){

    ////////Change Title Text////////
    $('.site-title a, .site-title').html(title);
    
    ////////Create English & Français Buttons////////
    var $buttonDiv = $("<div></div>");
    var $engBut = $("<a href='" + englishLink + "'>English</a>");
    $engBut.addClass("sqs-block-button-element--medium sqs-block-button-element sqs-editable-button");
    var $freBut = $("<a href='" + frenchLink + "'>Français</a>");
    $freBut.addClass("sqs-block-button-element--medium sqs-block-button-element sqs-editable-button");
    $buttonDiv.append($engBut);
    $buttonDiv.append($freBut);
    $('#title-area').append($buttonDiv);
    
    ////////Create Top Spacer for Center Text////////
    $("#innerWrapper").prepend($("<div id='header-spacer'><div>"));
    $("#header-spacer").height($("header").height() + "px");
  });
  
  ////////////////////////////////////////////////
  //Resize Heading Spacer for Multi-line Nav Bar//
  ////////////////////////////////////////////////
  $(window).resize(function(){
    $("#header-spacer").height($("header").height() + "px");
  });
  
  //////////////////////////////////////////
  //Check if Page is for English or French//
  //////////////////////////////////////////
  if (window.location.href.indexOf("language") <= 0){
    var local = navigator.language;
    if (local !== "undefined"){
      if (local.indexOf("fr") < 0){
        var preDetEn = true;
      } else {
        var preDetEn = false;
      }
    }
  }
</script>
<style>
  #top-signature{
    display: none !important;
  }
  @media only screen and (max-width: 640px) {
    #title-area{
      display: block !important;
    }
  }
  .site-title{
    margin-bottom: 5px !important;
    letter-spacing: 0.4px !important;
  }
  a.sqs-editable-button{
    margin: 10px;
  }
</style>
Shows Page Code Backup
<h1 class="local-site-link" data-name=".site-title" style="display: none">Upcoming Shows ;; Prochains Événements</h1>
<h1 class="local-site-link" data-name=".eventlist-past-upcoming-divider" style="display: none">Past Shows ;; Événements Passés</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    ////////Change Google Calendar & Maps to open in new tab////////
    $('.eventitem-meta-export-google').attr("target", "_blank");
    
    ////////Add Back & Forward Arrows////////
    var $oldLink = $("<a class='arrows'><</a>");
    $oldLink.attr("href", $('.eventitem-pager-older a').attr("href"));
    $oldLink.css("float", "left");
    var $newLink = $("<a class='arrows'>></a>");
    $newLink.attr("href", $('.eventitem-pager-newer a').attr("href"));
    $newLink.css("float", "right");
    $('.eventitem-pager-older').before($oldLink);
    $('.eventitem-pager-newer').before($newLink);
    
    ////////Check if Page is for English or French////////
    var en = true;
    var frIndex = window.location.href.indexOf("language=fr");
    if (frIndex >= 0){en = false;}
    
    ////////Add Classes to Change Content of English Words////////
    if(!en){
      $(".eventlist-datetag-enddate").addClass("frenchEv");
      $(".eventitem-backlink").addClass("frenchEv");
      $(".eventitem-meta-export-google").addClass("frenchEv");
    }
    
    ////////Change Event Links to Support Translation in Url////////
    var $eventList = $(".eventlist-title-link, .eventitem-pager-link, .arrows");
    for (var i = 0; i < $eventList.length; i++){
      var hrefA = $($eventList[i]).attr("href");
      if (en){
        var hrefB = hrefA.replace("?language=en", "");
        $($eventList[i]).attr("href", hrefB + "?language=en");
      } else {
        var hrefB = hrefA.replace("?language=fr", "");
        $($eventList[i]).attr("href", hrefB + "?language=fr");
      }
    }
  });
</script>
<style>
  ul.eventlist-meta{
    line-height: 1.2em !important;
  }
  h1.eventlist-title{
    margin-bottom: 0px !important;
  }
  a.arrows{
    font-size: 72px;
    margin: 12px 10px 0px 10px;
  }
  .frenchEv.eventlist-datetag-enddate:before {
    content: "à " !important;
  }
  .frenchEv.eventitem-backlink:before {
    content: "\2190\0020 Retour à Tous les Spectacles" !important;
  }
  .frenchEv.eventitem-meta-export-google:before {
    content: "Google Agenda" !important;
  }
</style>
Music Page Code Backup
<script>
  //Even Numbered Album Gradient
  var evenAlbumColor1 = "#000000";
  var evenAlbumColor2 = "#A8A8A8";
  var evenAlbumColorDirection = "to bottom right";
  var evenAlbumArtPosition = "right";
  
  //Odd Numbered Album Gradient
  var oddAlbumColor1 = "#000000";
  var oddAlbumColor2 = "#A8A8A8";
  var oddAlbumColorDirection = "to bottom left";
  var oddAlbumArtPosition = "left";
  
  //Even Numbered Album Use .evenRawGradient
  var useEvenRawGradient = true;
  
  //Even Numbered Album Use .oddRawGradient
  var useOddRawGradient = true;
</script>
<style id="raw-gradient-style">
  body.mobile-style-available #outerWrapper.even-raw-gradient
  {
  //PASTE GRADIENT CODE HERE
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+1,000000+51 */
background: rgb(69,72,77); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(69,72,77,1) 1%, rgba(0,0,0,1) 51%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(69,72,77,1) 1%,rgba(0,0,0,1) 51%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(69,72,77,1) 1%,rgba(0,0,0,1) 51%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    //END OF GRADIENT
  }
  body.mobile-style-available #outerWrapper.odd-raw-gradient
  {
  //PASTE GRADIENT CODE HERE
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+1,000000+51 */
background: rgb(69,72,77); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(69,72,77,1) 1%, rgba(0,0,0,1) 51%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(69,72,77,1) 1%,rgba(0,0,0,1) 51%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(69,72,77,1) 1%,rgba(0,0,0,1) 51%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    //END OF GRADIENT
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Loading Overlay -->
<div class="loading-overlay">
</div>
<div class="loading-text">
  Loading...
</div>

<script>
  ////////Create Gradient from Two Colors////////
  var evenAlbumsGradient = "linear-gradient( " + evenAlbumColorDirection + ", " + evenAlbumColor1 + ", " + evenAlbumColor2 + " )";
  var oddAlbumsGradient = "linear-gradient( " + oddAlbumColorDirection + ", " + oddAlbumColor1 + ", " + oddAlbumColor2 + " )";

  ////////Set Global Variables////////
  var globalName = [];
  var loadingScr = false;
  
  ////////Check if Page is for English or French////////
  var frIndex = window.location.href.indexOf("?language=fr");
  var langEn = true;
  if (frIndex >= 0){langEn = false;}
  
  ///////////////////////////
  //Is Number Even Function//
  ///////////////////////////
  function isEven(n) {
    return (n % 2 == 0);
  }

  //////////////////////////////////////////
  //Album Play Controls for Pause and Play//
  //////////////////////////////////////////
  function pauseAllBut(frameSrc){
    if (frameSrc !== "single"){
      var frames = document.getElementsByClassName("frame-music");
      var frame1 = "";
      for (var i = 0; i < frames.length; i++){
        if (frames[i].getAttribute("src").includes(frameSrc) == false){
          var innerDoc = frames[i].contentDocument || frames[i].contentWindow.document;
          if (innerDoc.getElementsByClassName("playing")[0] != undefined){
            var clickSim = innerDoc.getElementsByClassName("album-controls")[0].getElementsByTagName("a")[0];
            clickSim.click();
          }
        }
      }
      var $singles = $(".playing > .sqs-widgets-audio-player-content > .player > .action");
      $.each($singles, function(i, single){
        $(single).click();
      });
    } else {
      var frames = document.getElementsByClassName("frame-music");
      var frame1 = "";
      for (var i = 0; i < frames.length; i++){
        var innerDoc = frames[i].contentDocument || frames[i].contentWindow.document;
        if (innerDoc.getElementsByClassName("playing")[0] != undefined){
          var clickSim = innerDoc.getElementsByClassName("album-controls")[0].getElementsByTagName("a")[0];
          clickSim.click();
        }
      }
    }
  }
  
  ///////////////////////////////////
  //Function Called by Album iFrame//
  ///////////////////////////////////
  function iframeHit(frameSrc){

    ////////Get iFrame Document////////
    var frames = document.getElementsByClassName("frame-music");
    var frame1 = "";
    for (var i = 0; i < frames.length; i++){
      if (frames[i].getAttribute("src").includes(frameSrc)){
        frame1 = frames[i];
        break;
      }
    }
    var innerDoc = frame1.contentDocument || frame1.contentWindow.document;
  
    ////////Translate Albums////////
    if (!(langEn)){
      var bySwitchStr = innerDoc.getElementsByClassName("album-artist-name")[0].innerHTML;
      bySwitchStr = bySwitchStr.replace("by <s", "de <s");
      innerDoc.getElementsByClassName("album-artist-name")[0].innerHTML = bySwitchStr;
    }
  
    ////////Set Height of iFrame////////
    var height = innerDoc.getElementById("innerWrapper").offsetHeight;
    frame1.style.height = (height + 12) + "px";
    
    ////////Apply Gradient and Position to Album////////
    if(isEven(globalName.indexOf(frameSrc))){
      var oWrap = innerDoc.getElementById("outerWrapper");
      if (useEvenRawGradient){
        $("<style>" + $("#raw-gradient-style").html() + "</style>").insertBefore($(oWrap));
        oWrap.className = "even-raw-gradient";
      } else{
        oWrap.style.backgroundImage = evenAlbumsGradient;
      }
      oWrap.getElementsByClassName('tracks')[0].style.float = ((evenAlbumArtPosition == "left") ? "right" : "left");
      oWrap.getElementsByClassName('album-info')[0].style.float = evenAlbumArtPosition;
    } else {
      var oWrap = innerDoc.getElementById("outerWrapper");
      if (useOddRawGradient){
        $("<style>" + $("#raw-gradient-style").html() + "</style>").insertBefore($(oWrap));
        oWrap.className = "odd-raw-gradient";
      } else{
        oWrap.style.backgroundImage = oddAlbumsGradient;
      }
      oWrap.getElementsByClassName('tracks')[0].style.float = ((oddAlbumArtPosition == "left") ? "right" : "left");
      oWrap.getElementsByClassName('album-info')[0].style.float = oddAlbumArtPosition;
    }
    
    ////////Remove Overlay and Add Single Track Custom Control////////
    if (loadingScr == false){
      $(".loading-overlay, .loading-text").css("display", "none");
      
      var $singleTracks = $(".sqs-widgets-audio-player-content > .player > .action");
      $.each($singleTracks, function(i,play){
        $(play).prepend("<div class='pause-custom-controls' style='position: absolute; width: 15px; height: 100%; top: 0px; left: 0px; padding: 0 22px 0 22px; z-index: 9800'></div>");
        $(play).find(".pause-custom-controls").on("click", function(){
          pauseAllBut("single");
        });
      });
      loadingScr = true;
    }
  }
  
  /////////////////////////////////////
  //Load All the Albums into the Page//
  /////////////////////////////////////
  $(document).ready(function(){
  
    ////////Page Top and Bottom Content Sizing Setup////////
    $("#wrapper-split").parent().parent().parent().parent().css("display", "none");
    var $albumCon = $('#album-content');
    var $albumConPar = $albumCon.parent().parent();
    $albumConPar.css("padding-left", "0px");
    $albumConPar.css("padding-right", "0px");
    $albumCon.hide();
    
    ////////Top and Bottom Div Moving////////
    var $botDivs = $albumConPar.nextAll().detach();
    var $container = $("<div id='music-bottom-container'></div>");
    $container.append($botDivs);
    $albumConPar.parent().append($container);
    var $topDivs = $albumConPar.prevAll().detach();
    var $container = $("<div id='music-top-container'></div>");
    $container.append($topDivs);
    $albumConPar.parent().prepend($container);
    
    ////////Expand Top and Bottom Containers to Replicate Content Area////////
    $("#innerWrapper").addClass("inner-wrapper-expand");
    $(".main-content-wrapper").addClass("main-content-wrapper-expand");
    
    ////////Load the List of Albums////////
    $albumCon.load('/music-list/ #main-navigation li:not(.active-link)', function(){
      var musicAlbums = $albumCon.find('a');
      $albumCon.html("");
      $albumCon.show();
      for (var i = 0; i < musicAlbums.length; i++){
        //Create the iFrame for the Album
        if ($(musicAlbums[i]).attr('href') != undefined){
          if ($(musicAlbums[i]).attr('href').length > 2){        
            var langAdd = "";
            if (langEn){
              langAdd = "?language=en";
            } else {
              langAdd = "?language=fr";
            }
            var iframe = $("<div class='load-ing'><iframe id='sqs-site-frame' class='frame-music' src='" + $(musicAlbums[i]).attr('href') + langAdd + "' allowTransparency='true'></iframe></div>")
            $albumCon.append(iframe);
            globalName.push($(musicAlbums[i]).attr('href'));
          }
        }
      }
      
      ////////Adjust Single Track Style////////
      bgLoad();
    });
    
    ///////////////////////////////
    //Insert Track Div Background//
    ///////////////////////////////
    function bgLoad(){
      var $trackBg = $(".player > .track");
      if ($trackBg.length > 0){
        $trackBg.append($("<div class='progress-bar-bg'></div>"));
        var $artistName = $(".artistName");
        for (var i = 0; i < $artistName.length; i++){
          if ($artistName[i].innerHTML == ""){
            $artistName[i].innerHTML = "&nbsp;";
          }
        }
      } else {
        setTimeout(bgLoad, 1000);
      }
    }
    
    ////////Compress Album Padding for Mobile////////
    if($(window).width() < 640){
      var $albumBlock = $("#albums").closest(".sqs-block");
      $albumBlock.css("padding-top", "0");
      $albumBlock.css("padding-bottom", "0");
    }
  });
</script>
<style>
  div.audio-block{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  .row.sqs-row{
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .main-content-wrapper-expand{
    width: 100% !important;
  }
  .inner-wrapper-expand{
    margin-left: 0px !important;
    margin-right: 0px !important;
    width: 100% !important;
  }
  .sqs-audio-playlist{
    visibility: visible !important;
  }
  iframe.frame-music{
    width:100%;
    height: 400px;
    border: 0px !important;
    overflow: hidden;
  }
  #outerWrapper #innerWrapper #content{
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  #album-content{
    line-height: 0px !important;
  }
  #outerWrapper{
    background-image: none;
  }
  #music-bottom-container{
    width: 58.8%;
    margin: 0px auto;
  }
  #music-top-container{
    width: 58.8%;
    margin: 0px auto;
  }
  @media only screen and (max-width: 640px) {
    #outerWrapper {
        background-image: none !important;
        background-color: black;
        background-repeat: repeat repeat;
    }
    #music-bottom-container{
      width: 100%;
      margin: 0px auto;
    }
    #music-top-container{
      width: 100%;
      margin: 0px auto;
    }
  }
  @media only screen and (max-width: 1025px) {
    #music-bottom-container{
      width: 80%;
      margin: 0px auto;
    }
    #music-top-container{
      width: 80%;
      margin: 0px auto;
    }
  }
  @media only screen and (max-width: 820px) {
    #music-bottom-container{
      width: auto;
      margin: 0px auto;
    }
    #music-top-container{
      width: auto;
      margin: 0px auto;
    }
  }
  .sqs-widgets-audio-player.dark .sqs-widgets-audio-player-content div.player div.track span.played{
    height: 2px;
    color: #fff;
    background-color: rgba(255,255,255,.8);
    cursor: pointer;
  }
  div.progress-bar-bg{
    height: 2px;
    width: 100%;
    background-color: rgba(255,255,255,.1);
  }
  div.sqs-widget.sqs-widgets-audio-player.dark{
    background-color: rgba(0, 0, 0, 0);
  }
  div.player div.labels div.title-wrapper div.title{
    font-size: 16px !important;
    color: rgba(255,255,255,.85);
    zoom: 1;
  }
  div.player div.labels{
    padding-left: 0px;
  }
  div.player div.action{
    border-right-width: 0px !important;
    padding-top: 5px;
  }
  div.player .secondary-controls .time .loaded{
    color: rgba(255,255,255,.5);
  }
  div.player .secondary-controls{
    padding-right: 0px;
    padding-top: 8px;
    padding-bottom: 22px;
  }
  /*Loading Overlay*/
  .loading-overlay{
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0px;
    left: 0px;
    background-color: #333333;
    z-index: 9996;
  }
  .loading-text{
    position: fixed;
    color: white;
    font-family: 'Proxima-Nova';
    font-size: 10vw;
    line-height: 100%;
    text-shadow: 1px 1px 0 #444;
    bottom: 5vh;
    right: 10vw;
    z-index: 9997;
  }
</style>
Videos Page Code Backup
<script>
  //Side that Even Albums are Put On
  var evenVideoPosition = "left";
  
  //Side that Odd Albums are Put On
  var oddVideoPosition = "right";
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    ////////Replace Video Link with Youtube iFrame////////
    var videos = document.getElementsByClassName("sqs-video-wrapper");
    for (var i = 0; i < videos.length; i++){
      var iframeStr = videos[i].dataset.html;
      var $iframe = $(iframeStr);
      $iframe.attr("id", "video" + i);
      $(videos[i]).append($iframe);
      var iframeE = document.getElementById("video" + i);
      iframeE.setAttribute("allowfullscreen", "allowfullscreen");
    }
    
    ////////Remove Link from Video Title////////
    var titles = document.getElementsByClassName("summary-title");
    for (var i = 0; i < titles.length; i++){
      var title = titles[i].getElementsByClassName("summary-title-link")[0].innerHTML;
      titles[i].innerHTML = "<span>" + title + "</span>"
    }
    
    ////////Video and Title Position Set////////
    var summaryItems = $(".summary-item");
    for (var i = 0; i < summaryItems.length; i++){
      var video = $(summaryItems[i]).find(".summary-thumbnail-container");
      if (i % 2 == 0){
        if (evenVideoPosition == "left"){
          $(video).css("padding-left", "0px");
          $(video).css("padding-right", "20px");
          $(video).css("float", "left");
          $(summaryItems[i]).find(".summary-content").css("float", "right");
        } else {
          $(video).css("padding-left", "20px");
          $(video).css("padding-right", "0px");
          $(video).css("float", "right");
          $(summaryItems[i]).find(".summary-content").css("float", "left");
        }
      } else {
        if (oddVideoPosition == "left"){
          $(video).css("padding-left", "0px");
          $(video).css("padding-right", "20px");
          $(video).css("float", "left");
          $(summaryItems[i]).find(".summary-content").css("float", "right");
        } else {
          $(video).css("padding-left", "20px");
          $(video).css("padding-right", "0px");
          $(video).css("float", "right");
          $(summaryItems[i]).find(".summary-content").css("float", "left");
        }
      }
    }
  });
</script>
<style>
  @media only screen and (max-width: 640px){
    .summary-item-list-container .summary-item-list .summary-item .summary-thumbnail-container{
      width: 100% !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
    }
    .summary-item-list-container .summary-item-list .summary-item .summary-content{
      width: 100% !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
    }
  } 
  iframe{
    z-index: 10;
  }
</style>
Lessons Page Code Backup
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $(".sqs-gallery-block-grid > .sqs-gallery > .slide > .margin-wrapper > a").attr("target", "_blank");
  });
</script>
Contacts Page Code Backup
<script>
  var captions = [];
    //////// ADD CAPTION TRANSLATIONS BELOW ////////
  captions.push( ["First Name", "Prénom"] );
  captions.push( ["Last Name", "Nom de Famille"] );
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  
    ////////Use Url Variables to Set Inputs and Text Areas////////
    var urlPath = location.href;
    var subjectIndex = urlPath.indexOf("?");
    if (subjectIndex >= 0){
      var arg = urlPath.slice(subjectIndex + 1, urlPath.length).split("&");
      for (var i = 0; i < arg.length; i++){
        var statement = arg[i].split("=");
        var $label = $("label:contains(" + statement[0].replace("_", " ") + ")");
        var $input = $label.parent().find("input");
        if ($input.length){
          $input.val((statement[1]).replace(/_/g, " "));
          var inpVal = $input.val();
          if (inpVal.indexOf(" ;; ")){
            var enToFr = inpVal.split(" ;; ");
            if (en){
              $input.val(enToFr[0]);
            } else {
              $input.val(enToFr[1]);
            }
          }
          continue;
        }
        var $textArea = $label.parent().find("textarea");
        if ($textArea.length){
          $textArea.html((statement[1]).replace(/_/g, " "));
          var text = $textArea.html();
          if (text.indexOf(" ;; ")){
            var enToFr = text.split(" ;; ");
            if (en){
              $textArea.html(enToFr[0]);
            } else {
              $textArea.html(enToFr[1]);
            }
          }
          continue;
        }
      }
    }
      
    ////////Form Contents Translation////////
    var $siteTitle = $(".title:contains(' ;; ')");
    if ($siteTitle.size() > 0){
      for (var i = 0; i < $siteTitle.length; i++){
        var $required = $($siteTitle[i]).find(".required");
        var len = $required.length;
        if (len > 0){
          var $req = $required.detach();
        }
        var enToFr = $($siteTitle[i]).html().split(" ;; ");
        if (en){
          $($siteTitle[i]).html(enToFr[0]);
        } else {
          $($siteTitle[i]).html(enToFr[1]);
        }
        if (len > 0){
          $($siteTitle[i]).append($req);
        }
      }
    }
    
    ////////Form Content Text Translation////////
    if (!en){
      var $captions = $(".caption");
      for (var i = 0; i < $captions.length; i++){
        for (var j = 0; j < captions.length; j++){
          if ($captions[i].innerHTML.includes(captions[j][0])){
            $captions[i].innerHTML = $captions[i].innerHTML.replace(captions[j][0], captions[j][1]);
          }
        }
      }
    }
    
    ////////Submit Button Text Translation////////
    var $input = $("input.button");
    if ($input.length > 0){
      var inpVal = $input.val();
      if (inpVal.indexOf(" ;; ")){
        var enToFr = inpVal.split(" ;; ");
        if (en){
          $input.val(enToFr[0]);
        } else {
          $input.val(enToFr[1]);
        }
      }
    }
  });
</script>
Custom CSS Code Backup
@media only screen and (max-width: 640px){
  .sqs-gallery-design-grid-slide {
    width: 33% !important;
    clear: none !important;
   }
  #title-area h1 {
    margin-bottom: 5px !important;
    padding-bottom: 0px !important; 
  }
  #title-area{
    padding-bottom: 0px !important;
  }
  #content{
    padding-top: 0px;
    padding-bottom: 0px;
  }
  h1{
    margin-top: 0.25em !important;
    margin-bottom: 0.25em;
  }
  #title-area .site-tagline{
    margin-bottom: 0px !important;
    min-height: 0px !important;
  }
}

h1{
  margin-top: 1em;
}
.site-tagline{
  margin-bottom: 28px !important;
  min-height: 28px !important;
}
#innerWrapper{
  margin-bottom:30px !important;
}
.eventlist-event{
  margin-top: 20px;
}
#content{
  padding-bottom: 10px !important;
  padding-top: 30px !important;
}
footer{
  padding: 0px;
}
p{
  margin-top: 0px;
  margin-bottom: 0px;
}
.eventlist-title{
  margin-bottom: 5px !important;
}
Code Injection Header Code Backup
<!-- Add Font Links Here -->
<link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">

<!-- End of Font Links -->

<!-- Variables for the Site's Signature -->
<script>
  //English Site Signature Url
  var englishUrl = "https://static1.squarespace.com/static/57d0269f29687fb0588dfef6/t/57da0a56579fb3865dffe40f/1473907296231/?format=500w";
  
  //French Site Signature Url
  var frenchUrl = "https://static1.squarespace.com/static/57d0269f29687fb0588dfef6/t/57da0a9c9de4bb876e589599/1473907362917/?format=500w";
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
  #top-signature{
    background-image: url("https://static1.squarespace.com/static/57d0269f29687fb0588dfef6/t/57d5a1473e00be430c57d7e3/1473618248290/SignatureTemplate.png?format=1000w");
    width: 300px;
    height: 78.9px;
    position: fixed;
    left: 10px;
    top: 10px;
    z-index: 2;
    visibility: hidden;
    background-size: contain;
    //margin-top: -69px !important;
  }
  body{
    visibility: hidden;
  }
  .site-tagline{
    visibility: hidden;
  }
</style>

<!-- Space for the Site's Signature -->
<a id="top-signature" href="/"></a>

<script>
  ////////Check if Page is for English or French////////
  var en = true;
  var frIndex = window.location.href.indexOf("language=fr");
  if (frIndex >= 0){en = false;}

  ///////////////////////////////
  //Size & Place Site Signature//
  ///////////////////////////////
  function signCtrl(){
    if (document.getElementsByTagName("body")[0].offsetWidth >= 750){
      var mainNav = document.getElementById("main-navigation");
      var topSign = document.getElementById("top-signature");
      if (en){
        topSign.style.backgroundImage = "url(" + englishUrl + ")";
        topSign.style.width = "325px";
        topSign.style.height = "80.5px";
      } else {
        topSign.style.backgroundImage = "url(" + frenchUrl + ")";
        topSign.style.width = "300px";
        topSign.style.height = "111.6px";
      }
      if (mainNav.offsetLeft < (topSign.offsetWidth + 10)){
        topSign.style.visibility = "hidden";
      } else {
        topSign.style.visibility = "visible";
      }
    } else {
      document.querySelector(".site-title").offsetBottom = "5px";
      var topSign = document.getElementById("top-signature");
      topSign.style.visibility = "hidden";
    }
  }
  
  ////////////////////////////////////////////////////
  //Run Site Signature Sizing When Loaded or Resized//
  ////////////////////////////////////////////////////
  window.onload = function(e){
    signCtrl();
    window.addEventListener("resize", function(){
      signCtrl();
    });
  }
</script>
<style>
  #header{
    position: fixed;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 9998;
  }
  #main-navigation ul.cf{
    padding-bottom: 10.4px;
    margin-bottom: 10px;
  }
  #innerWrapper{
    margin-top: 60px;
  }
  #mobile-navigation{
    max-height: 100vh;
    overflow-y: scroll !important;
  }
  nav.social-links{
    position: fixed;
    right; 0px;
  }
  nav.social-links ul li{
    float: right;
    padding: 5px 10.4px 0px 10.4px;
    margin-right: 18.750px !important;
    margin-left: 0px !important;
  }
  @media only screen and (max-width: 750px){
    nav.social-links ul li{
      float: right;
      padding: 5px 0px 0px 0px;
      margin-right: 0px !important;
    }
    nav.social-links ul{
      width: 25px !important;
    }
    nav.social-links{
      margin-top: 58px;
    }
  }
</style>
Code Injection Footer Code Backup
<script>
  ////////////////////////////////////////
  //See if Language was Set by Home Page//
  ////////////////////////////////////////
  if (typeof preDetEn !== "undefined"){
    var en = preDetEn;
  } else {
    var en = true;
    var frIndex = window.location.href.indexOf("language=fr");
    if (frIndex >= 0){en = false;}
  }
  
  /////////////////////////////////////
  //Find All Single Line Translations//
  /////////////////////////////////////
  var allInline = $("#outerWrapper").find(":contains(' ;; '):not(script)");
  for (var i = 0; i < allInline.length; i++){
    if ($(allInline[i]).children().size() <= 0){
      var enToFr = $(allInline[i]).html().split(" ;; ");
      if (en){
        $(allInline[i]).html(enToFr[0]);
      } else {
        $(allInline[i]).html(enToFr[1]);
      }
    }
  }
  
  ////////Set site title////////
  var $siteTitle = $(".site-title");
  $siteTitle.html($("li.active-link > a").html());
  
  ////////////////////////////////////
  //Find All Multi Line Translations//
  ////////////////////////////////////
  var allNewLine = $("#outerWrapper").find(":contains(';;')");
  for (var i = 0; i < allNewLine.length; i++){
    if ($(allNewLine[i]).html() == ';;'){
      $(allNewLine[i]).css("display", "none");
      if ($(allNewLine[i]).siblings().size() > 0){
        if(en){
        $(allNewLine[i]).nextAll(":not(h1)").css("display", "none");
        } else {
          $(allNewLine[i]).prevAll(":not(h1)").css("display", "none");
        }
      } else {
        if(en){
        $(allNewLine[i]).parent().nextAll(":not(h1)").css("display", "none");
        } else {
          $(allNewLine[i]).parent().prevAll(":not(h1)").css("display", "none");
        }
      }
    }
  }

  ////////////////////////////////
  //Get Position of ith m in str//
  ////////////////////////////////
  function getPosition(str, m, i) { 
    return str.split(m, i).join(m).length; 
  }
  
  //////////////////////////////////////////////////
  //Create Expressions for :internal and :external//
  //////////////////////////////////////////////////
  $.expr[':'].internal = function (a) {
    return $(a).attr('href') !== undefined && !$.expr[':'].external(a);
  };
  $.expr[':'].external = function (a) {
    var PATTERN_FOR_EXTERNAL_URLS = /^(\w+:)?\/\//;
    var href = $(a).attr('href');
    return href !== undefined && href.search(PATTERN_FOR_EXTERNAL_URLS) !== -1;
  };
  
  ///////////////////////////////////////////////
  //Correct All Internal Links to Keep Language//
  ///////////////////////////////////////////////
  var internalHref = $("a:internal");
  for (var i = 0; i < internalHref.length; i++){
    var href = $(internalHref[i]).attr("href");
    var position = getPosition(href, "/", 2) + 1;
    var result = [href.slice(0, position), ((en) ? "?language=en" : "?language=fr"), href.slice(position)].join('');
    $(internalHref[i]).attr("href", result);
  }
  
  ///////////////////////////////////////////
  //Translate English Dates to French Dates//
  ///////////////////////////////////////////
  if (window.location.href.indexOf("language=fr") > 0){
    ////////Create Arrays for the English Dates and French Dates////////
    var englishFullMonths = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ],
        englishAbbrMonths = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
        englishFullDays = [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
        englishAbbrDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
        frenchFullMonths = [ 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre' ],
        frenchAbbrMonths = [ 'Janv', 'Févr', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc' ],
        frenchFullDays = [ 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'];

    ////////Wait until DOM is Ready////////
    $(document).ready(function(){
      ////////Specify Elements Which Contain Dates////////
      var dateClasses = ".event-date" +
                        ", .eventitem-pager-date" +
                        ", .eventlist-date-enddate" +
                        ", .eventlist-date-startdate" +
                        ", .summary-metadata-item--date";
      var dates = $(dateClasses);

      ////////Iterate Through All Found Elements
      for(var i = 0; i < dates.length; i++){
        ////////Translate Full Days////////
        for (var j = 0; j < englishFullDays.length; j++){
          if ($(dates[i]).html().indexOf(englishFullDays[j]) >= 0){
            var newDate = $(dates[i]).html().replace(englishFullDays[j], frenchFullDays[j]);
            $(dates[i]).html(newDate);
          }
        }
        
        ////////Translate Full Months////////
        for (var j = 0; j < englishFullMonths.length; j++){
          var index = $(dates[i]).html().indexOf(englishFullMonths[j]);
          if (index >= 0){
            var newDate = $(dates[i]).html().replace(englishFullMonths[j] + " ", "");
            var insertPoint = newDate.indexOf(",", index);
            if (insertPoint > 0){
              newDate = [newDate.slice(0, insertPoint), " " + frenchFullMonths[j], newDate.slice(insertPoint)].join('');
              $(dates[i]).html(newDate);
            } else {
              newDate += " " + frenchFullMonths[j];
              $(dates[i]).html(newDate);
            }
          }
        }
        
        ////////Translate Abbreviated Months////////
        for (var j = 0; j < englishAbbrMonths.length; j++){
          if ($(dates[i]).html().indexOf(englishAbbrMonths[j]) >= 0){
            if(($(dates[i]).html().length <= 4)){
              var index = $(dates[i]).html().indexOf(englishAbbrMonths[j]);
              var newDate = $(dates[i]).html().replace(englishAbbrMonths[j], "");
              newDate = [newDate.slice(0, index), frenchAbbrMonths[j], newDate.slice(insertPoint)].join('');
              $(dates[i]).html(newDate);
            } if($(dates[i]).html().indexOf(englishAbbrMonths[j] + " ") >= 0) {
              var index = $(dates[i]).html().indexOf(englishAbbrMonths[j] + " ");
              var newDate = $(dates[i]).html().replace(englishAbbrMonths[j] + " ", "");
              var insertPoint = newDate.indexOf(",", index);
              if (insertPoint > 0){
                newDate = [newDate.slice(0, insertPoint), " " + frenchAbbrMonths[j], newDate.slice(insertPoint)].join('');
                $(dates[i]).html(newDate);
              } else {
                newDate += " " + frenchAbbrMonths[j];
                $(dates[i]).html(newDate);
              }
            }
          }
        } 
        
        ////////Translate Abbreviated Days////////
        for (var j = 0; j < englishAbbrDays.length; j++){
          if ($(dates[i]).html().indexOf(englishAbbrDays[j] + ",") >= 0){
            var newDate = $(dates[i]).html().replace(englishAbbrDays[j] + ",", "");
            console.log("")
            newDate = frenchFullDays[j] + "," + newDate;
            $(dates[i]).html(newDate);
          }
        } 
      }
    });
  }
  
  //////////////////////////////
  //Translate Local Site Links//
  //////////////////////////////
  var allInline = $("h1.local-site-link:contains(' ;; ')");
  for (var i = 0; i < allInline.length; i++){
    if ($(allInline[i]).children().size() <= 0){
        var enToFr = $(allInline[i]).html().split(" ;; ");
        if (en){
          $(allInline[i]).html(enToFr[0]);
        } else {
          $(allInline[i]).html(enToFr[1]);
        }
     }
  }
  
  /////////////////////////////////////////////////////////////
  //Add Local Navigation Links to All Pages but the Home Page//
  /////////////////////////////////////////////////////////////
  if (typeof homePage === "undefined"){
    var $siteLocalNav = $(".site-tagline");
    $siteLocalNav.empty();
    var $sectionLinks = $(".local-site-link");
    for(var i = 0; i < $sectionLinks.length; i++){
      var $localNavLink = $("<a class='local-nav-menu' name='" + $($sectionLinks[i]).attr('data-name') + "'>&nbsp;&nbsp;" + $($sectionLinks[i]).html() + "&nbsp;&nbsp;</a>");
      $siteLocalNav.append($localNavLink);
      $localNavLink.click(function(){
          $('html, body').animate({scrollTop: $($( this ).attr("name")).offset().top - 100}, 500);
      });
    }
  }
  
  ////////Reposition the Social Icon Links////////
  var $socialLinks = $("nav.social-links");
  $socialLinks.css("height", $("header").height() + "px");
  $socialLinks.css("top",  $("#main-navigation ul").css("margin-top"));
  $socialLinks.css("width", $("#main-navigation").css("margin-right"));
  
  ////////Reorder the Social Links for Mobile////////
  var bLinkSwitch = false;
  if ($(window).width() <= 750){
    var $list = $socialLinks.find("ul");
    var listItems = $list.children('li');
    $list.append(listItems.get().reverse());
    bLinkSwitch = true;
  }
  
  //////////////////////////////////////////////////////
  //Resize Common Page Elements when Window is Resized//
  //////////////////////////////////////////////////////
  $(window).resize(function(){
    $("#innerWrapper").css("margin-top", ($("header").height() + 5) + "px");
    $("#top-signature").css("top", ($("header").height() + 5) + "px");
    $socialLinks.css("height", $("header").height() + "px");
    $socialLinks.css("top",  $("#main-navigation ul").css("margin-top"));
    $socialLinks.css("width", $("#main-navigation").css("margin-right"));
    
    if ($(window).width() <= 750 && bLinkSwitch == false){
      var $list = $socialLinks.find("ul");
      var listItems = $list.children('li');
      $list.append(listItems.get().reverse());
      bLinkSwitch = true;
    } else if ($(window).width() > 750 && bLinkSwitch == true){
      var $list = $socialLinks.find("ul");
      var listItems = $list.children('li');
      $list.append(listItems.get().reverse());
      bLinkSwitch = false;
    }
  });
  
  ////////Adjust Inner Wrapper and Site Signature////////
  $("#innerWrapper").css("margin-top", ($("header").height() + 5) + "px");
  $("#top-signature").css("top", ($("header").height() + 5) + "px");
</script>
<style>
  body{
    visibility: visible !important;
  }
  .site-tagline{
    visibility: visible;
    flex-wrap: wrap;
    display: flex !important;
    justify-content: center;
  }
  .local-nav-menu{
    white-space: nowrap;
    cursor: pointer;
  }
</style>
Block Maker Page Code Backup
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
  ///////////////////////////////////////////
  //Function to Prompt the Copy Body Window//
  ///////////////////////////////////////////
  function copyToClipboard (text) {
    window.prompt ("Press Ctrl+C then Enter", text);
  }

  /////////////////////////////////////////
  //Set the Fonts Availble for the Editor//
  /////////////////////////////////////////
  var fontChoices = 'Proxima-Nova; Arial/Arial, Helvetica, sans-serif; Times New Roman/Times New Roman, Times, serif; Verdana';
  var googleFontsLinks = $("[href^='//fonts.googleapis.com'], [href^='https://fonts.googleapis.com']");
  for (var j = 0; j < googleFontsLinks.length; j++){
    var googleFonts = $(googleFontsLinks[j]).attr("href").split("=")[1];
    var googleAllFonts = googleFonts.split("|");
    for (var i = 0; i < googleAllFonts.length; i++){
      var googleFont = googleAllFonts[i].split(":")[0].replace("+", " ");
      fontChoices += ";" + googleFont;
    }
  }
  
  ///////////////////////////////////////////////
  //Format Page to Remove Default Page Elements//
  ///////////////////////////////////////////////
  $(document).ready(function(){
    $("#top-signature").css("display", "none");
    $("#outerWrapper").css("display", "none");
  });
</script>

<!-- Create the CKEditor Space -->
<script src="//cdn.ckeditor.com/4.5.11/full/ckeditor.js"></script>
<textarea id="ckedit" name="editor1"><p>TYPE HERE<p></textarea>

<script>
  ///////////////////////
  //Create the CKEditor//
  ///////////////////////
  var editor = CKEDITOR.replace( 'editor1', {
    contentsCss: 'https://static1.squarespace.com/static/sitecss/57d0269f29687fb0588dfef6/39/57d045aee6f2e1d7acf430a1/57d045afe6f2e1d7acf430a4/126-05142015/1473636225168/site.css?&filterFeatures=false',
    newpage_html: '<p>TYPE HERE</p>',
    allowedContent: true,
    fullPage: true,
    font_names: fontChoices
  });
  
  ///////////////////////////////////////
  //Adding the Dialog for Create Button//
  ///////////////////////////////////////
  CKEDITOR.dialog.add( 'simpleButtonDialog', function( editor ) {
    return {
      title: 'Create Button Link',
      minWidth: 400,
      minHeight: 200,
      contents: [{
        id: 'tab-basic',
        label: 'Settings',
        elements: [{
          type: 'text',
          id: 'btnText',
          label: 'Button Text',
          validate: CKEDITOR.dialog.validate.notEmpty( "Abbreviation field cannot be empty." )
        },
        {
          type: 'text',
          id: 'btnLink',
          label: 'Button Link',
          validate: CKEDITOR.dialog.validate.notEmpty( "Explanation field cannot be empty." )
        },
        {
          type: 'select',
          id: 'btnWin',
          label: 'Open In:',
          items: [[ 'New Tab' ], [ 'Same Tab' ]],
          'default': 'New Tab'
        }]}
      ],
      onOk: function() {
        var dialog = this;
        var btn = editor.document.createElement( 'a' );
        btn.setAttribute( 'href', dialog.getValueOf( 'tab-basic', 'btnLink' ) );
        btn.setText( dialog.getValueOf( 'tab-basic', 'btnText' ) );
        if (dialog.getValueOf('tab-basic', 'btnWin') == 'New Tab'){
          btn.setAttribute('target', '_blank');
        }
        btn.addClass("sqs-block-button-element");
        btn.addClass("sqs-editable-button");
        btn.addClass("sqs-block-button-element--medium");
        editor.insertElement( btn );
      }
    };
  });
  
  /////////////////////////////////////////////////
  //Adding the Command & Button for Create Button//
  /////////////////////////////////////////////////
  editor.addCommand('buttonD', new CKEDITOR.dialogCommand( 'simpleButtonDialog' ));
  editor.ui.addButton('Create Button', {
    type : 'button',
    id : 'buttonId',
    label : 'Click me',
    command: 'buttonD',
    title : 'Create Button',
    icon: 'http://www.iconsfind.com/wp-content/uploads/2013/11/Image-Edition-Tools-Rounded-rectangle-icon.png'
  });
  
  /////////////////////////////////////
  //Adding the Dialog for Upload Code//
  /////////////////////////////////////
  CKEDITOR.dialog.add( 'reUploadText', function( editor ){
    return {
      title: 'Open Text',
      minWidth: 400,
      minHeight: 200,
      contents: [{
        id: 'tab-basic',
        label: 'Settings',
        elements: [{
          type: 'textarea',
          id: 'reText',
          label: 'Paste Code  Here',
          validate: CKEDITOR.dialog.validate.notEmpty( "Abbreviation field cannot be empty." )
        }]}
      ],
      onOk: function() {
        var textArea = this.getValueOf('tab-basic', 'reText');
        var ckeditor_id = 'ckedit';
        var $ckeditor = CKEDITOR.instances[ckeditor_id];
        var $ckeditor_frame = $('#cke_' + ckeditor_id).find('.cke_wysiwyg_frame');
        var $ckeditor_body  = $ckeditor_frame.contents().find("body");
        $ckeditor_body.append($(textArea));
      }
    };
  });
  
  ///////////////////////////////////////////////
  //Adding the Command & Button for Upload Code//
  ///////////////////////////////////////////////
  editor.addCommand('uploadText', new CKEDITOR.dialogCommand( 'reUploadText' ));
  editor.ui.addButton('Insert Text from Clipboard', {
    type : 'button',
    id : 'uploadId',
    label : 'Click me',
    command: 'uploadText',
    title : 'Insert Text from Clipboard',
    icon: 'http://image.flaticon.com/icons/png/512/1/1230.png'
  });
  
  /////////////////////////////////////////////////////
  //Adding the Command & Button for Copy to Clipboard//
  /////////////////////////////////////////////////////
  editor.addCommand("copyToClip", {
    exec: function(edt) {
      var ckeditor_id = 'ckedit';
      var $ckeditor = CKEDITOR.instances[ckeditor_id];
      var $ckeditor_frame = $('#cke_' + ckeditor_id).find('.cke_wysiwyg_frame');
      var $ckeditor_body  = $ckeditor_frame.contents().find("body");
      copyToClipboard($ckeditor_body.html());
    }
  });
  editor.ui.addButton('CopyToClipboard', {
    label: "Copy to Clip",
    command: 'copyToClip',
    title: 'Finish',
    icon: 'http://plainicon.com/dboard/userprod/2805_fce53/prod_thumb/plainicon.com-44632-512px.png'
  });

  /////////////////////////////////////
  //Add Head Tag Elements to CKEditor//
  /////////////////////////////////////
  function TrueLoad(){
  
    ////////Set CKEditor Variables////////
    var ckeditor_id = 'ckedit';
    var $head = $('head');
    var css_files = [];
    var js_files = [];
    var ssscript;

    ////////Get All CSS Files of the Current Page////////
    $head.find('link[type="text/css"]' ).each(function(i,css){
      css_files.push($(css).attr('href'));
    });

    ////////Get All the JS Files////////
    $head.find('script[type="text/javascript"]' ).each(function(i,js){
      js_files.push($(js).attr('src'));
    });

    ////////Get Other Styles from Head Tag////////
    var styleHead = $head.find( 'style[type="text/css"]' );

    ////////CKEditor Handler/////////
    var $ckeditor = CKEDITOR.instances[ckeditor_id];

    ////////Remove Body Classes////////
    $ckeditor.config.bodyClass = '';

    ////////Wait for the CKEditor Instance to be Initiated////////
    CKEDITOR.on('instanceReady', function(evt){
      evt.editor.execCommand('maximize');
      
      ////////Find the Exact iFrame of the CKEditor Textarea////////
      var $ckeditor_frame = $('#cke_' + ckeditor_id).find('.cke_wysiwyg_frame');

      ////////Head Element of CKEditors iFrame////////
      var $ckeditor_head  = $ckeditor_frame.contents().find("head");

      ////////Add All the CSS Files////////
      $.each(css_files, function(i,css_file){
        $ckeditor_head.append($("<link/>", {
          rel: "stylesheet",
          href: css_file,
          type: "text/css"
        }));
      });

      ////////Add All the Google Font Links////////
      $.each(googleFontsLinks, function(i,css_file){
        $ckeditor_head.append($("<link/>", {
          rel: "stylesheet",
          href: $(css_file).attr("href"),
          type: "text/css"
        }));
      });

      ////////Add the Other Head Styles////////
      $ckeditor_head.append($(styleHead));

      ////////Then Add All the JS Files////////
      $.each(js_files, function(i,js_file){
        $ckeditor_head.append($("<script/>", {
          src: js_file,
          type: "text/javascript"
        }));
      });
    });
  }
  
  ///////////////////////////////
  //Call the True Load Function//
  ///////////////////////////////
  TrueLoad();
</script>

Image Dump

 
ClaireDevlinFrenchLogo