Pre-installation notes

Before building a site with this Server Side Includes template, please do the following.

Ensure that your server has SSI enabled in Apache. You may need to contact IT to allow SSI.

Please note, failing to follow the steps below will yield a non-working website.

NOTE: This template assumes you are placing your site in a webroot. That is, you have a domain which points to a directory where these site files reside. eg. mysite.berkeley.edu/

If you place this site in a sub-directory (not recommended), you must change ALL paths linking to include files, content images, css files, javascript files and more, by adding the sub-directory onto the path.

Basic setup

Download the Dreamweaver templates from brand.berkeley.edu and copy the files to the designated location. See pre-installation notes for requirements.

Copy the custom snippets folder (Branded_Components) to the appropriate location on your computer. The location will be determined by the computer platform and version of Dreamweaver you are working with. See Custom snippets locations for details.

For a starting point there are three basic templates to choose from. There two sets of templates: homepage and landing page. For each configuration there is a version that includes components and another that does not.

Note about inserting images within your content other than the branded component snippets:

Because the default style for images in the templates is ‘width: 100%’ it may be necessary to include an inline style to override. Set the style to ‘width: auto;’

Custom snippets location

The following locations are for Dreamweaver CS6 and Dreamweaver CC2014. Copy the Branded Components folder into the snippets directory. The path will be determined by the computer platform. If you are working with a different version of Dreamweaver and/or platform than those listed below you will need to search the web to find the pertinent information.

Use Go To Folder. In the Finder’s Go menu type ~/Library and click ‘Go’ to view the folder in the current Finder window.

If there are no custom snippets yet created then the Snippets folder will not show. Open Dreamweaver, display the Snippets pane (Window, Snippets), click the + and add a dummy snippet. You don’t need to add any code. This snippet can be deleted after you have copied the Branded Components folder into the correct path.

Open your home folder (/Users/yourusername) in the Finder. Depending on your Finder settings, this may be as easy as simply opening a new Finder window. Otherwise, choose Home from the Finder’s Go menu (Go > Home); or press Shift-Command-H.

Still in the Finder, choose View > Show View Options (or press Command-J).

Near the bottom of the resulting View-Options palette is a setting called Show Library Folder. Enable this option. Your Library folder is immediately visible.

Note the addition of the class “smallmenu” to the list-item tag with the class “dropdown” as shown in the example. For this tag, CHANGE the id from “admissions” to the name of your menu. For the nested link (a) tag, CHANGE “Admissions” link text to the name of your menu.

Note both submenu columns have been changed to “col-md-12” as shown in the comments. This is required for a small menu.

Change menu links text and href values normally.

Simple menu with no dropdown

If you would like to use a simple menu with no dropdown, COPY the code below and paste into /lib/inc/your-header-file.html between existing <li> tags.

Make sure the components are inserted following the divs defined by column classes.

Replacing existing components in your template

Set your document to split view.

In the design pane click the component you wish to delete.

Along the lower edge you will see the tags that correspond to the architecture of the current selection. This is known as the Tag Selector. Find div .col-md-8 (this could vary depending on which column) and click the div to the right of it. It should now be highlighted in blue.

Click delete

Insert the desired component from the Snippets panel.

Removing a modal component

Using the previous steps to delete components will not delete all of the source code if it is modal. The following components require additional deletion in the code view panel:

Thumbnail with slideshow modal

Video thumbnail with slideshow modal

Replacing the modal video

To replace the current video within the snippet perform a ‘search and replace’ for the Youtube unique ID. There are six instances to replace.

Video thumbnail with modal

For multiple videos on a single page use the three sequential snippets provided. Each video must have a unique ID number. If you plan to have more than three videos you will need to modify the ID to the next sequential number. There are seven instances to update for each video snippet.

The following background color classes work with black and white text: * These classes will work for the profile component as well.

golden-gate

rose-garden

web-founders-rock

web-gray

web-lap-lane

web-medalist

web-soybean

wellman-tile

Replace the current class with one from the list above.

Accordion snippet

The Accordion 1 snippet includes three panels. If you plan to insert additional panels you will need to insert the Accordion 2 snippet and modify the ID to the next sequential number. There are two instances to update for each accordion panel.

Modify the ID to the next sequential number

Make a panel open by default

If you’d like a panel to be open by default, add the additional class ‘in’.

Thumbnail list images

See Photoshop templates to transform a portrait image into a landscape image for use in thumbnail lists.

Along the lower edge you will see the tags that correspond to the architecture of the current selection. This is known as the Tag Selector.For homepage heros: Look for ‘a’ and click it. The hero section should now be highlighted in blue.For landing page heros: Look for ‘section’ and click it. The hero section should now be highlighted in blue.

Click delete.

You can now add a new hero component to your template.

Homepage hero

Landing page hero

Adding the hero component to your template

You will need to be in code view in order to add the hero component.

Place your cursor after the following code

<div id="content" role="main">

Highlight your hero snippet in the Snippets window and click insert

The homepage hero component snippet is wrapped with a link. You will need to either modify this or remove it.