dreamweaver_seisomo_1379x919

Berkeley Seismology Lab: featured site based on the Dreamweaver template

Pre-installation notes

Email Sara Leavitt or Melani King to request permission to download the Dreamweaver web template from gallery.berkeley.edu.

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

  1. Ensure that your server has SSI enabled in Apache. You may need to contact IT to allow SSI.
  2. 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.

eg. Default installation (at web root):

<link href="/lib/css/nav.css" rel="stylesheet">   <img alt="lorem ipsum" src="/lib/img/sm-thumb-01.jpg">

Installed in a sub-directory:

<link href=”/sub-directory/lib/css/nav.css” rel=”stylesheet”> <img alt=”lorem ipsum” src=”/sub-directory/lib/img/sm-thumb-01.jpg”>

Search functionality

If you would like to use a search function on your site, you must follow the Google instructions for adding custom search:

  1. Go to http://www.google.com/cse/all to set up your search account.  Add the site domain and any relevant configuration.
  2. https://support.google.com/customsearch/topic/1717070?hl=en&ref_topic=6001371
  3. Leave the search query parameter as “q”.
  4. Generate the “results-only” code from Google.

Paste the results-only Google code block in the /search/index.shtml page where specified on the page.

IF YOU ARE NOT USING SEARCH FUNCTIONALITY, PLEASE REMOVE THIS CODE FROM /lib/inc/your-header-file.html

<form id="navbar-search" class="navbar-form navbar-right" method="get" action="/search/index.shtml" role="search">  <div class="form-group">  <input class="form-control" type="search" aria-label="search term" placeholder="Search Berkeley Web" name="q">  </div>  <button class="btn btn-default" alt="search" value="Search" aria-label="search" type="submit">  <span class="entypo search"></span>  </button>  </form>

Basic setup

  1. Download the Dreamweaver templates from brand.berkeley.edu and copy the files to the designated location. See pre-installation notes for requirements.
  2. 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.
  3. Choose template(s) to build your homepage and any second-level pages.
  4. Determine what version of banner your site will use.
  5. Fonts
  6. Analytics
  7. Footer
  8. Image sizes

Templates

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.

template-atemplate-btemplate-c

Basic grid layout examples

For a better understanding of the basic grid layout system in Bootstrap see a sampling of Dreamweaver snippets we’ve built for building out pages using different configurations of rows and columns.
Basic grid layout examples of bootstrap rows and columns

Banner

There are two different banner styles to choose from when setting up your site.

bnr-one-line

bnr-two-line-logo

Because the <h1> tag is coded differently for the second-level pages there are two versions of each: one for the homepage and one for second-level pages.

*Homepage header files

home-header-oneline.html
home-header-twoline-logo.html

*Second-level page header files

header-oneline.html
header-twoline-logo.html

If your department/title name is short (eg. Anthropology), then you will use the “one-line” method. If your department name is long, please use the “two-line-logo” method.

Make the following changes in the /lib/inc/your-header-file.html file*

Insert the name of your department/title. Note that you will need to insert <br> tags for two-line-logo.

header-one-line-680x166header-two-line-logo-680x182

Fonts

  • The preferred font “freight-micro-pro” from Typekit is included with the templates.
  • The Typekit javascript has already been added into /lib/inc/js_head_libs.html.

Analytics

Place your code into /lib/inc/analytics.html

Footer

Make your edits in /lib/inc/footer.shtml
There are two sections to the footer:

  • Departmental footer
    Has columns for various collections of links or other content.
  • Universal footer
    Contains the Berkeley logo and copyright information.

dept-footer

universal-footer

Image sizes

Heros

  • 1-story: 1200 x 600px
  • Text box: 800 x 450px
  • Video split: 800 x 450px
  • Landing page: 1200 x 450px

Thumbnails

  • 468 x 312px
  • 468 x 468px (for thumbnail grids)

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.

On Mac OS X Mountain Lion

/lclusr/Library/Application Support/Adobe/Dreamweaver CS6/en_US/Configuration/Snippets

Note: The Library is hidden by default. To unhide:

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.

On Mac OSX Mavericks and Yosemite

/lclusr/Library/Application Support/Adobe/Dreamweaver CC 2014/en_US/Configuration/snippets/

NOTE: The Library is hidden by default. To unhide:

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.

mac-snippets-location11

On PC Windows 8.1

\Program Files (x86)\Adobe\Adobe Dreamweaver CC 2014\Configuration\Snippets\

Navigation

Navigation is modified in your selected header file. e.g. /lib/inc/home-header-twoline.html

Mega-menu
Simple dropdown menu
Simple menu with no dropdown
No navigation

Mega-menu

Default menus are “mega-menus”.

mega-menu

Simple dropdown menu

dropdown

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

<!-- EXAMPLE OF SMALL MENU -->   <li class="dropdown yamm-fw smallmenu" id="admissions"><!-- <--ADD smallmenu CLASS. Change id value -->   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Admissions <b class="caret"></b></a> <!-- Change Link Text -->   <ul class="dropdown-menu">   <li>   <div class="yamm-content">   <div class="row">   <div class="col-md-12"> <!-- <--CHANGE TO col-md-12 -->   <div class="subnav">   <div class="row">   <div class="col-md-12"> <!-- <--CHANGE TO col-md-12 -->   <ul class="list-unstyled">   <li><a href="#">Subnav</a></li>   <li><a href="#">Subnav with really long link because we know someone will do this!</a></li>   <li><a href="#">Subnav</a></li>   <li><a href="#">Subnav</a></li>   </ul>   </div>   </div> <!-- row -->   </div> <!-- sub-nav -->   </div>   </div> <!-- row -->   </div> <!-- yamm-content -->   </li>   </ul>   </li>

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.

dropdown-code

Simple menu with no dropdown

simple-menu-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.

<li class="dropdown yamm-fw smallmenu" id="admissions">  <a href=“#” role="button" aria-expanded="false">link1</a>  </li>  <li class="dropdown yamm-fw smallmenu" id="admissions">  <a href="#" role="button" aria-expanded="false">link2</a>  </li>  <li class="dropdown yamm-fw smallmenu" id="admissions">  <a href="#" role="button" aria-expanded="false">link3</a>  </li>

For this tag, CHANGE the id from “admissions” to the name of your menu.

Change menu links text and href values normally.

simple-menu-no-dropdown-code

No navigation

If your site doesn’t require any menus then remove the navigation code in /lib/inc/your-header-file.html between existing <li> tags.

Comment out or remove the following code that displays the ‘hamburger’ in mobile devices.

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">   <span class="sr-only">Toggle navigation</span>   <span class="icon-bar"></span>   <span class="icon-bar"></span>   <span class="icon-bar"></span>   </button>

Also make the following style change in nav.css

header#site-header {   position: relative;   z-index: 999;   border-top: 4px solid #003262;   /* -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2); */   /* box-shadow: 0 1px 3px 0 rgba(0,0,0,.2); */   }

Image sizes

Heros

  • 1-story: 1200 x 600px
  • Text box: 800 x 450px
  • Video split: 800 x 450px
  • Landing page: 1200 x 450px

Thumbnails

  • 468 x 312px

Components snippets

Your site content can easily be populated with preformatted components using the snippets delivered with your downloaded templates.

snippets-windowSee the sample page of component Dreamweaver snippets.

Adding components to the body of your template

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

column-classinsert-snippetReplacing existing components in your template

  1. Set your document to split view.
  2. In the design pane click the component you wish to delete.
  3. 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.
  4. Click delete
  5. Insert the desired component from the Snippets panel.

remove-componentRemoving 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.

youtube-replaceVideo 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.

videomodal

Modifying the background color of a Promo snippet

In accordance with the systemwide UC Information Technology Accessibility Policy, and to help serve those with low vision, our color palette is restricted on the web and in digital materials. See an in-depth guide to the web-accessible palettes.

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.

color-classAccordion 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.

accordion-insert

accordion-sequential

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’.

accordion-open

Thumbnail list images

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

Hero components

There are five different types of hero components. See a sample page of component Dreamweaver snippets.

Homepage: The <h1> wraps the wordmark

  • Text Box: Colors are Berkeley Blue, Founder’s Rock, Pacific
  • 1-Story
  • Video Split

Second-level: The <h1> is the editable caption or heading

  • Landing
  • Color Band: Colors are Founder’s Rock, Soybean, Web Medalist, Wellman Tile

Removing the hero component from the template

  1. Set your document to split view.
  2. In the design pane click the current hero.
  3. 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.
  4. Click delete.
  5. You can now add a new hero component to your template.

homepage-hero-remove1-680x25
Homepage hero

landing-hero-remove

Landing page hero

Adding the hero component to your template

  1. You will need to be in code view in order to add the hero component.
  2. Place your cursor after the following code
    <div id="content" role="main">
  3. Highlight your hero snippet in the Snippets window and click insert

insert-hero

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