Stanford Modern Templates

From Web Services Wiki

Revision as of 17:59, 12 October 2011 by Hyperboy (Talk | contribs)
Jump to: navigation, search

Contents

Installation

Download the Stanford Modern template zip file.

General Use: Extract the contents to your desktop or pre-production web space.

Dreamweaver Users Only: Extract the contents to your local Dreamweaver site directory.

Create a new web page using the Dreamweaver template

  1. Create a new site or edit an existing site within Dreamweaver.
  2. Download and extract the zip package to the local file folder of your Dreamweaver site.
  3. Open Dreamweaver
    1. Go to File > New...
    2. Create a new page by selecting Page from Template
    3. Select the appropriate template, click Create
  4. On this new web page, you can use the Modify > Template Properties... setting or modify the template parameters by editing the following lines.

<!-- InstanceParam name="body_class" type="text" value="two-sidebars drawer" -->
<!-- InstanceParam name="h1" type="text" value="" -->

Version 2.0 Documentation

Activating the different template options

Select a combination of the following body classes e.g.

<body class="two-sidebars drawer wide ie6-3col">
  • two-sidebars or sidebar-left or sidebar-right
    • Create a two or three column layout
    • Affected div(s): #sidebar-left or #sidebar-right
  • nav or drawer
    • Add horizontal navigation or horizontal navigation with expandable drawer (5 item max limit)
    • Affected div(s): #nav, #nav_drawer, #toggle
  • wide
    • Flexible width layout
  • ie6-3col or ie6-2col
    • Add wide display support for Internet Explorer 6 when used in conjunction with the wide body class.
    • Use ie6-3col for the two-sidebars layout.
    • Use ie6-2col for the sidebar-left or sidebar-right layouts.
  • topic or portal
    • Enable styling for advanced templates such as portal or topic pages.

Activating the CeeBox multimedia Ajax popup

  • Add class="ceebox" to the containing HTML tag (e.g., <div> or <ul>) of the pop up link.
  • Add rel="width:600 height:800" to the <a> tag of the pop up link.
<div class="ceebox">
<a href="http://www.stanford.edu" rel="width:600 height:800">Stanford Home Page</a>
</div>

Customizing the search box text

If you are using Google custom search for your site, you can update the search box text from "Search Stanford..." to "Search this site..." by adding the following code to the custom.js file.

$(document).ready(function(){	
   // Custom Search Box
   $('#header [name=q]').val('Search this site...');
   $('#header [name=q]').focus(function () {
   $('#header [name=q]').val('');
   });	
});

Version 1.5 Documentation

Known Dreamweaver Issues and Solutions

Issue: Dreamweaver fails to update the relative path to the IE stylesheets in conditional comments within the <head> section. When you create a new page from template, you'll notice html code similar to the following after saving the html file:

<!--[if IE 6]>
  <style type="text/css">
    @import url(file:///C|/Users/username/Documents/site_name/css/ie/ie_global.css);
    @import url(file:///C|/Users/username/Documents/site_name/css/ie/ie_tertiary.css);
  </style>
<![endif]-->
<!--[if IE 7]>
  <style type="text/css">
	@import url(file:///C|/Users/username/Documents/site_name/css/ie/ie7.css);
  </style>
<![endif]-->

Solution: Before you publish the html file, open the corresponding Dreamweaver template (e.g. tertiary.dwt) by making a small change, reverting the change, then re-saving the template file. All html files that are based on the template will be updated.

<!--[if IE 6]>
  <style type="text/css">
    @import url(css/ie/ie_global.css);
    @import url(css/ie/ie_tertiary.css);
  </style>
<![endif]-->
<!--[if IE 7]>
  <style type="text/css">
	@import url(css/ie/ie7.css);
  </style>
<![endif]-->

Change Log

  • Version 2.3 (10 Oct 11) Dreamweaver Template Bug Fixes
    • Added as_sitesearch custom search parameter to search box code in header section
    • Restored references to custom CSS and JS
    • Removed sample footer links
    • Updated CSS for page padding and image resizing
    • Dropped IE 6 Support
  • Version 2.2 (20 Sep 11) Dreamweaver Template Update
    • Updated media query Javascript in HTML head
    • Updated search box code in header section
  • Version 2.11 (30 Aug 11) Dreamweaver Template Update
    • Updated copyright text in footer section
    • Updated custom CSS, JS, and banner image paths
  • Version 2.1 (5 Aug 11) Dreamweaver Template Update
    • Added mobile and print support
  • Version 2.01 (13 Jan 11) Dreamweaver Template Bug Fixes
    • Updated the editable region for "doctitle"
  • Version 2.0 (7 Jan 11) Major Release
    • Look and Feel Updates
      • Changed the horizontal banner navigation background from gold to white.
      • Added CSS body classes to activate the various template options such as the navigation drawer or right sidebar.
      • Added template properties to the Dreamweaver templates.
      • Removed all IE conditional statements.
      • Replaced Shadowbox with CeeBox for loading multimedia Ajax pop ups.
      • Fixed a bug where the template layout would break when one uses the zoom function in the browser.
    • Template File Organization
      • All related CSS, JS, and image files are now hosted centrally in WWW.
      • Consolidated all Stanford Modern specific CSS and JS code into stanfordmodern.css and stanfordmodern.js respectively.
      • Added custom.css and custom.js for site specific CSS and JS needs.
    • Template Presentation
      • Reorganized and simplified the web template download page.
      • Retired the Stanford Retro Templates.
  • Version 1.51 (1 Jun 10) Stanford web search code update
    • Changed search box text from "Search web pages..." to "Search..."
  • Version 1.5 (1 Apr 10) Stanford web search code update
    • Modified the Stanford web search box in header section for all templates
    • Added Jquery support for all templates
    • Removed Mootools support for primary templates
    • Revised expanded drawer functionality in primary templates
    • Removed unnecessary JavaScript files
  • Version 1.4 (17 Jul 09) Minor adjustments in reset.css and layout.css
    • Removed the <sub> and <sup> references in reset.css
    • Added a style for preventing the red banner background from appearing on multiple pages when printing in layout.css
  • Version 1.3 (2 Jul 09) Minor adjustment in tertiary template
    • Updated sidebar navigation bullet styles in tertiary.css
  • Version 1.2 (17 Jun 09) Minor adjustment in tertiary template
    • Added heading for sidebar navigation and updated page heading location
    • Updated sidebar image bullet styles in primary.css, secondary.css, and tertiary.css
  • Version 1.1 (18 Dec 08) Dreamweaver template update
    • The IE conditional style sheet paths now update properly (with a minor bug - see Issues and Solutions)
    • Added editable area in <head> section
    • Added <label> tag to search box in header section
  • Version 1.0 (27 Aug 08) Initial Release

Help Resources

Personal tools