SITE INSTRUCTIONS

This page explains the website architecture and describes the custom code injected into the various pages. Please update this page regularly and make sure it is detailed for the sake of future webmasters. 

Should you have any unanswered questions, you can reach out to the previous webmasters:

Website Template

Our website uses the "Hayden" design template. You can find more information regarding this template on the "Template Information" page provided by SquareSpace under "Pages" . While you can specify different templates for individual pages, we are not currently utilizing this feature.

Page Layouts

Squarespace provides three locations for pages/folders: 

  1. Main Navigation: Pages or folders that show up in the main navigation bar or sidebar.

  2. Secondary Navigation: Pages or folders that show up in an additional navigation menu located in a separate area of the site. We do not have secondary navigation menus.

  3. Not Linked: These pages/folders are public, but are not linked to any pages or navigation bars on the website. We use these types of pages/folders extensively.

In addition, there are many types of pages and folders. The ones of main interest to us are:

  1. Gallery Page: Used to showcase images and videos. The videos and images can be edited when uploaded (crop, color/exposure, effects, etc.). In addition, titles, descriptions, and custom urls can be added. Links to other pages or external sites can also be included so that selecting the image (or title) brings you to a new page. We have six gallery pages, one for each of the research topics/blocks under the "Research" page. Note that all of our gallery pages are under the "Not Linked" category.
    Please see the Research Folder section below for more information on how we used the gallery pages for the current website.

  2. Index Page: Collects images and content from different pages and arranges them visually, creating a single destination where visitors can browse content from multiple sub-pages. We only one index page: the "People_Index" page under the "Not Linked" category. This index page is made up of eight subpages ("Faculty", "Staff", etc.).
    For more information on how this index page is used, please refer to the People Folder section below.

  3. Link: Stand-in pages which are just links to other pages. We use these extensively for the "People" folder.
    For more information on how link pages are used for the website, please refer to the People Folder section below.

  4. Page: A regular page in which various elements or blocks can be added.

  5. Folder: Used to create drop-down navigation menus (also known as nested pages or sub-menus). All pages contained in the folder show up as submenu items in the navigation bar. By default, the first page in the folder is the folder's splash page. Clicking on the folder name in the navigation bar will bring you to this first page.

Home Page

The "Home" page is located under the "Main Navigation" category. It contains two Gallery Blocks: one which is located at the very top of the page and serves as the banner for the home page; and another which is located at the bottom of the page and is made up of four images. These four images represent projects from the past and present which our group is highlighting/emphasizing. 

Note that the banner images rotate/change every few seconds. This setting can be found by editing the "Home" Page, hovering over the top Gallery Block, selecting "Edit," and going to the "Design" tab. The slideshow layout is selected and the "Automatically Transition Between Slides" option is turned on with a five second transition time.

Each image in both Gallery block (under the "Content" tab for each Gallery block) is also linked to the corresponding project page so that when the banner or highlight image is clicked on, users are taken to its information page.

NOTE: Both the banner images and highlight images should be changed out each term (i.e., four times a year).

Research Folder

The "Research" folder, located under the "Main Navigation" category is made up of seven pages. The first page is the "Overview" page, which is the splash page for the folder. The remaining six pages correspond to the six research displines.

The "Overview" page includes a Gallery block (not to be confused with a Gallery Page) made up of six images. Each image is linked to one of the research discipline images. In addition, the Gallery Block images have been altered such that when you hover over the image, it fades and text appears with the discipline name (i.e. hovering over the first block will fade out the image and display "Wind + Sea"). You can find the code used to do this at the end of this section. 

You will also notice that the "Overview" page is not a submenu item on the navigation bar (although it is on the sidebar for mobile or tablet sized screens). Custom CSS code had to be added to the template in order to do this. Please refer to the Custom Code Used for Research Folder subsection for more details. 

The six research discipline pages each include a Summary Block, which calls on one of the Gallery pages located in the "Not Linked" category. For example, the "Wind + Sea" page has a Summary Block that is linked to the "WindSeaGallery". The Summary Blocks  are formatted such that they are in a list layout and the gallery items' titles, thumbnails, and experts/descriptions show. Each image in the Gallery Pages is linked to a project page found in the "Not Linked" section. For example, in the "Wind + Sea" page, the "Contact Line Dynamics" gallery item is linked to the "Contact Line Dynamics" page in the "Not Linked" Section.

Each discipline page also has a banner image corresponding to the image block image from the "Overview" page (the splash page). This image can be edited by going to the discipline page and hovering over the banner image, then selecting "Banner".

Custom Code Used For Research Folder

The following code was added to the page (click on the gear by the "Overview" page's name, then go to the advanced tab) in order to create a white screen which fades in and displays the image title as you hover over an image in a gallery block:

<style>
.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
   display: block; 
   position: absolute;
   top: -10px;
   right: 0;
   bottom: -10px;
   left: 0;
   padding-left:.1em;
   padding-right:.1em;
   padding-top:50%;
   -webkit-transition: all 300ms ease-out; 
   -moz-transition: all 300ms ease-out; 
   -o-transition: all 300ms ease-out; 
   -ms-transition: all 300ms ease-out; 
   transition: all 300ms ease-out; } 
 
 .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
   background: rgba(255,255,255,0.8); }
 
 .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
   font-family: europa;
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing:2px;
   color: #000;
   opacity: 0; }
 
 .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
   font-family: europa;
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing:2px;
   color: #000;
   opacity: 1;
 pointer-events: none;}
  </style>

The following code was added to the Custom CSS (Design -> Custom CSS) in order to keep the "Overview" splash page from being listed as a submenu item on the main navigation bar.

#mainNavigation a[href*="/research-overview"]{display:none;}

In addition, the following was entered into the Custom CSS so that the the "Overview" page does not display the "Research" folder navigation bar that the Hayden template includes.

.folder-nav { display: none; }

People Folder

The "People" folder, located in the "Main Navigation" category, is made up of eight linked pages. Each linked page is linked to its corresponding subpage in the "People_Index" under the "Not Linked" category. For example, the "Faculty" link-page under the "People" folder is linked to the "Previous Members" subpage in the "People_Index". This is done by entering the following external url: "/people_ind#previous-members" where the "previous-members" portion is the custom url for the "Previous Members" subpage in the "People_Index" page. Note you can find the custom url (or link, in the case of linked pages) for any page by selecting the gear button beside each page/folder name under the "Pages" menu to the left. 

As with all folders, folder name shows up as a title in the main navigation bar (or sidebar), while the linked page names show up as submenu items. If you click on "People" in the main navigation bar, it will bring you to the faculty page. You can then scroll down to see the rest of the subpages ("Staff", "Research Staff", etc.). Or, if you are interested in going to the "Previous Member" subpage directly instead of scrolling down to it, you can go to the submenu and select the "Previous Member".

If we had simply put the "People_Index" page in the "Main Navigation" category, we would not have had any submenu options. You would not be able to directly go to the "Previous Members" subpage. Hence the roundabout use of linked pages.

Publications Folder

This folder contains five pages: "Publications", "Papers", "Patents", "Proceedings", and "Posters + Videos".

The "Papers" page lists all papers published by the group, sorted by publishing year with the most recent year at the top. If you have links to any of these papers, please add them to this page so that users can easily access our groups work. The "Patents" page lists all the patents by year,  in descending order. All conference proceedings (presentations and conference papers) are listed under the "Proceedings" page. Any posters, videos, or other multimedia resources are located under the "Posters + Videos" section. 

The "Publications" page is the splash page for the folder. It includes a Gallery Block, which contains four images (designed and created by Morgane Grivel). Each image corresponds and links to one of the remaining four pages in the folder. 

You will also note that the "Publications" page does not appear in the submenu of the main navigation bar. This is done by injecting the following code into the Custom CSS (Design -> Custom CSS):

#mainNavigation a[href*="/publications"],
#mobileNavigation a[href*="/publications"]{
  display:none;}

Resources Folder

This folder contains four pages: "News", "Facilities", "Startups", and "Contacts". 

Please keep the contacts page up to date and make sure to check the webmaster email account (mggroup@caltech.edu) weekly.

Custom Code for the Entire Site

The following is used to create the "Back to Top" button that you see on every page of the site. You can find more information regarding this code at https://answers.squarespace.com/questions/10479/how-can-i-add-a-scroll-to-top-button.html.

The button image (which Morgane Grivel created) is uploaded to the site and can be found under Design -> Custom CSS -> Manage Custom Files.

Custom CSS Code (Design -> Custom CSS):

.scrollup {
   width: 40px;
   height: 40px;
   opacity: 0.7;
   position: fixed;
   bottom: 30px;
   right: 60px;
   display: none;
   text-indent: -9999px;
   background: url('https://static1.squarespace.com/static/5762e33cc534a57f8bb35952/t/5809d91af5e231d0f4b47adb/1477040412736/BackToTop2.png') no-repeat;
  background-size: cover;
 }

Page Header Code (Settings ->  Advanced -> Code Injection -> Header):

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
 <script>
   $(document).ready(function () {
       $(window).scroll(function () {
           if ($(this).scrollTop() > 500) {
               $('.scrollup').fadeIn();
           } else {
               $('.scrollup').fadeOut();
           }
       });
       $('.scrollup').click(function () {
           $("html, body").animate({
               scrollTop: 0
           }, 600);
           return false;
       });
   });
 </script>

Footer Code (Go to the bottom of any page until you see the "Footer Content" box. Select "Edit", then add a "Code" block with the following code):

<a href="#" class="scrollup">Back To Top</a>