Preparing Boys for Life.

Homepage Instructions

Main Slideshow

To create a new 'slide' for the homepage:

1. add a new 3-column layout container in the order in which you want it to appear in the slideshow. Make sure it is within the homepage slideshow container where all of the other existing slides reside.

2. In the first column, add the shared element 'Homepage Main Slideshow Image A'
- Image Size: 720 wide x 715 high (In attached screenshot "Image 1")

3. In the second column, add the shared element 'Homepage Main Slideshow Image B'
- Image Size: 360 wide x 305 high (In attached screenshot "Image 2")

4. In the third column, add the shared element 'Homepage Main Slideshow Image C'
- Image Size: 360 wide x 490 high (In attached screenshot "Image 3")

5. Once you have added the 3 images to your slide, click on the 'shared' button in the top right corner to orphan and edit your element.

6. In the element settings under design > background-image you can choose your replacement image for each of the shared image elements.

7. repeat for each Homepage Main Slideshow Image

8. Add the shared element 'Homepage Main Slideshow Slide Text' beneath the Homepage Main Slideshow Image A in the first column and update the content in the element settings

You have now created a new slide for your slideshow. You will not see your slideshow in action in compose mode, this is to make it easier for you to update and edit the content. Turn off compose mode and refresh the page to activate your updated slideshow.

If updating the images, you will want to follow the image sizes above and just replace the image on the slide.

Screenshot of Image Layout

How it Happens

Image Size: 590 wide x 360 wide

1. When in Compose Mode scroll down to the How it Happens section. Hover over the image/text and click on the gear icon in the upper right hand corner.

a. To update the text below the image, change the Resource's title (in Resources Manager).
b. To update the image, change the Resource Element's targeted image. 
c. Save element

2. To update the text that appears when a user hovers over it, update the description field on the resource in Resources Manager.

a. To create a "Learn More" link, highlight the "Learn More" text, then add the "golden-text" style from the Styles dropdown menu in the editor toolbar.
b. Add link to the text.

3. Save


Get to Know Us

Image Size: 400 x 400

1. Media Manager feeds this section. To update/add images you will navigate to the Homepage Photo Slider in Media Manager (Enhancements Channel>Photo Slider Folder>Homepage Photo Slider).

2. Add images to the slideshow.

3. Remove those items you wish to no longer display.

4. Click on the Pencil for the image added or needing to be updated. In the Photo Description update/add the copy
a. html should look like this:

Time-honored traditions of bench ball, the Key Man, and our Walk of Virtues keep Haverford’s legacy alive.

Learn More

5. Save

Change Button

  1. Click on the gear icon of the surrounding container to open up the settings

  2. Open the Design dropdown

  3. The button is located in the Footer Content (

Where Tradition Lives

1. In compose mode click on the gear icon for the container that houses the photo and text.

2. Title feeds the title on the image

3. Click On "Design" to update the image and text above the links
- Image size: 1440 x 400 (save as a .png)

4. Save

5. To update the text/links click into each of the content elements and update.
a. html should look like this:

History & Legacy

b. Best to update in the html to avoid losing styles.

Modifying the default top banner

Many parts of the top banner are stored as shared elements in the Elements section. Other parts are modified directly within the banner through the Banners section. You can click the Pages button here to return to the main menu and reach Elements or Banners. Here's a quick overview of what is edited where:

ComponentWhere EditedElement Name (if applicable)
Portal navigationElementsPortal Navigation
Around the Quad linkElementsUtil-Link Quad
Calendar linkElementsUtil-Link Calendar
Visit Haverford linkElementsUtil-Link Visit
QuicklinksElementsUtil-Link Quicklinks
Search siteElementsHeader Search
Search directoryBannersN/A
Popular PagesBannersN/A
Site info containerBannersN/A
Main navigationElementsMain Navigation

To find instructions to update the enhancements click here