MAP | CALMAIL |
Page design templates

Website in a box

One design, six variations, infinite options.

These templates from the Public Affairs web team are intended to provide nearly everything you'll need to create or redesign your UC Berkeley-affiliated website with the look and feel of the new campus gateway site — you just supply the content. Our modular templates allow you to include or remove page elements as desired. We've minimized the number of components used, and maximized the sitewide reuse of elements to streamline your maintenance work.

Page styles

Optional page components

  • Campus toolbar (map, email, customizable search)
  • Quick Links dropdown
  • Top navigation strip
  • Section titles
  • Photostrips
  • Content below navigation in left column
  • Sidebar with internal page links and/or related content

All templates include a link back to the campus home page, for branding and navigational purposes, and an automatically updated copyright notice in the customizable footer.

All pages are based around HTML semantic elements and Cascading Style Sheets to separate content from design. They are coded to XHTML and CSS standards, and pass Section 508 accessibility checks. They are tested to display and print properly in Firefox 3, Internet Explorer 6 & 7, Safari 3 and Opera 9.

Support and assistance

These templates are supplied on an as-is basis; Public Affairs cannot customize the designs for you beyond the flexible components outlined above. We have included full documentation in the .ZIP archive explaining how to use the templates and how to make common modifications. The code for the templates and Cascading Style Sheets is also extensively commented to help you find your way.

However, we do want to help you successfully use these templates to create campus websites. We'll do our best to answer questions about how to deploy the templates on your site, how you can create logos that harmonize with the design, how you can obtain photos and fonts for your website, etc. If your needs are more elaborate and/or your web skills more limited, we'll also try to put you in touch with freelance web developers who can help build your site. And as your template-based site nears completion, we'd be happy to review it and offer design or technical suggestions. Please send any such questions or requests to webstyle@berkeley.edu.

Next steps

Public Affairs has commissioned the creation of a UC Berkeley Old Style digital font, based on the current campus signature typography. This typeface is freely available to all campus users for download from the identity.berkeley.edu website. The font can be used for logo creation for these templates, as well as for other web- or print-based design work.

We'll be working with volunteer partners to extend these templates into Content Management Systems commonly used around campus. Aleksandr Vladimirskiy of the College of Engineering has already created a prototype version for use with Plone, and we're working with Tao Starbow of the Drupal Users Group to find someone who can create a Drupal theme based on the templates. In addition, Public Affairs plans to create WordPress themes derived from the template designs. Users of other CMS tools are encouraged to contact webstyle@berkeley.edu if you are willing to build templates or themes based on these designs for sharing with others.

Public Affairs also expects  to deploy a blog (using the gateway theme, once completed) to track the ongoing development of the gateway templates, and to offer the user community a forum to ask questions and share experiences. We'll share the URL for the blog as soon as it's ready for release. (A big shout-out to our friends at the Graduate School of Journalism for their help in cutting our blogging teeth.)

Files included in the .ZIP archive

/pages/fix-nofly.shtml Page template, fixed width, static left nav column
/pages/fix-fly.shtml Page template, fixed width, flyout left nav column
/pages/fix-nonav.shtml Page template, fixed width, no left column
/pages/flex-nofly.shtml Page template, flexible width, static left nav column
/pages/flex-fly.shtml Page template, flexible width, flyout left nav column
/pages/flex-nonav.shtml Page template, flexible width, no left column
/css/UCB.css Main stylesheet, controls typography & positioning
/css/UCB-fix.css Style overrides for fixed-width pages
/css/UCB-fix-nonav.css Style overrrides for fixed-width pages w/o left column
/css/UCB-flex.css Style overrides for flexible-width pages
/css/UCB-flex-nonav.css Style overrrides for flexible-width pages w/o left column
/css/UCB-print.css Styles for printing, without navigational elements
/css/UCB-printall.css Styles for printing all page elements
/css/IE6.css Style overrides for IE6 (invoked w/conditional comment)
/js/getyear.js Javascript to insert current year in footer copyright line
/ssi/footer.htm Server Side Include: Page footer
/ssi/links.htm Server Side Include: Dropdown links in header
/ssi/menu.htm Server Side Include: Static one-level navigational menu
/ssi/menu-flyout.htm Server Side Include: Flyout two-level navigational menu
/ssi/section.htm Server Side Include: Section title and photo strip
/ssi/tools.htm Server Side Include: Toolbar (map/email/search)
/ssi/topnav.htm Server Side Include: Horizontal navigation menu in header
/img/banr1.jpg Banner gradient background; Sather Gate image left
/img/banr2.jpg Banner gradient background; Sather Gate image right
/img/banr3.jpg Banner gradient background; no Sather Gate image
/img/bearpaw.gif GO image for search toolbar
/img/column-bg.gif Faux-column background for left nav; deep blue
/img/column-bg-print.gif Faux-column background for left nav; light gray for printing
/img/list-arrow.gif Double arrow icon for page links unordered list
/img/logo-templates.gif Placeholder logo for header
/img/pagelink-bg.gif Tiling background screen for page links sidebar section
/img/photostrip.jpg Placeholder tiling photo strip; 900x95px standard size
/img/sample.jpg Placeholder image of library and Campanile for page body
readme.shtml This documentation file

Quick-start instructions

These instructions envision a site built from scratch. If you are replacing existing files, you'll need to design a file structure and workflow to accommodate the temporary existence of new and old versions of your site.

  1. Copy all files from the .ZIP archive into the root level of your site, retaining the folder structure provided.
  2. Determine which basic page design you want, from the six options provided in the /pages/ folder.
  3. Create a logo for your department/unit with a transparent background to float over the gradient banner background. Place this .GIF or .PNG file in the /img directory, and point to it in the div#logo of your chosen template, modifying the alt=" " tag to suit.
  4. Select the best background for your logo (banr1/banr2/banr3), and point to it in the #banr section of UCB.css.
  5.  In the <head> section of the template .shtml file, change the following items:
    • Give the template a generic title and generic meta-description appropriate to your website.
    • If you want navigation sections to appear on user printouts, change /css/UCB-print.css to /css/UCB-printall.css
  6. Decide which of the optional sections you wish to remove (toolbar, Quick Links, top navigation, extra left-column info, section title, photostrip, sidebar page links and/or infobox) and delete them from the template code (see detailed instructions below).
  7. Delete the placeholder text, headlines and photos from the #content section of the template page. You may want to keep one headline and brief text for placement purposes. You can either retain or remove the right #sidebar, depending on which look will be more common on your site, and then restore (or remove) it on individual pages as needed. Likewise, if you retained the #addon section below the left navigation, you can include its content in the page template (making it global across your site), or you can supply it on a page-by-page basis.
  8. Save the modified template page.
  9. If you retained the Quick Links, open the links.htm file in the /ssi folder and replace the generic text and links in the <li>s with your site's top links, adding or removing <li>s as needed.
  10. If you retained the top navigation, open the topnav.htm file in the /ssi folder and replace the generic text and links in the <li>s with your site's navigational links, adding or removing <li>s as needed.
  11. If your chosen page design uses a left navigation column, open the appropriate file in /ssi (either menu.htm or menu-flyout.htm) and replace the generic text and links in the <li>s with your site's navigational links, adding or removing <li>s as needed. If you're using the flyout navigation design, make sure you adhere to the nesting structure for the second-level links.
  12. If you retained the section title and photostrip, open the section.htm file in the /ssi folder and change the text as needed. You can supply a new photostrip (900x95 px; change the path in the #pstrip section of UCB.css) or keep the placeholder image provided.
  13. Open the footer.htm file in the /ssi folder and replace the generic text and links in the <li>s with your site's navigational links, adding or removing <li>s as needed.
  14. Save any of the SSI files that you modified, and then upload the contents of the /css, /img, /js and /ssi folders to your server.
  15. Open your modified template file and Save As the index page of your site, retaining the .shtml suffix (needed to parse the server side includes) and placing it in the root-level folder. Add page content as needed, adhering to semantic structure (H1 through H6 for headings; <p> for text paragraphs, <ol>/<ul>/<li> tags for lists) for optimal accessibility and search engine findability. Make sure to include an appropriate page title and meta-description information. Save and upload this new index page to your server.
  16. Open the page in a web browser and make sure all is as planned.
  17. To create additional pages, repeat steps 15 and 16 as needed, creating a folder structure for your pages as desired.

Common modifications

To remove optional modules

The tools, Quick Links and horizontal top navigation blocks can be removed from the page header by deleting the relevant <!--#include virtual=" " --> line from the template code. The #addon left column content and/or the right-floated #sidebar can be removed by deleting the <div> of the same ID and its content from the template code.

To remove the photostrip but retain the section title, in the section.htm file remove the <div id="pstrip"></div> tags, and in the UCB.css file remove the margin-top:70px; line from #content and remove the height:3em; line from #section.

To remove both section title and photostrip, delete the <!--#include virtual="ssi/section.htm" --> line from the template code, and then in the UCB.css file remove the margin-top:70px; line from #content.

To change widths

  • Fixed-width page: Change the width value for #outside in UCB-fix.css and/or UCB-fix-nonav.css
  • Flexible-width page – minimum width: The Jello Mold concept on which the flexible pages are based uses negative horizontal margins and offsetting positive horizontal padding to establish the minimum width (in addition to a min-width value, which is not recognized by all browsers). The padding and margin values are each one-half of the total desired minimum width, since the values get applied to both left and right sides of the selected elements. To adjust this minimum width, change the following in UCB-flex.css and/or UCB-flex-nonav.css
    • in body, change the horizontal padding (385px in default) to one-half your desired minimum width
    • in #expander, change margin-left and margin-right to one half your minimum width
    • in #expander and #outside, change min-width to your full minimum width
  • Flexible-width page – maximum width: This one requires more experimentation, because the maximum width is calculated on the fly using a combination of the Jello Mold padding and negative margins, and the percentage width and max-width values of #sizer. Adjusting #sizer width: will change the size of the margins between the page border and the edge of the browser; adjusting #sizer max-width: will change the overall maximum width of the page body. Experiment with these values to get the maximum width and borders you want. NOTE: Max-width limits don't work in IE6.
  • Left navigation column: In UCB.css, adjust #navcol width: and #contentcol padding-left by the same amount in the same direction (higher for a wider column, lower for a narrower column). Also adjust #menu a width: and/or #menu-flyout width: and #menu-flyout a width: and #menu-flyout ul left: by this same amount and direction. Finally, create new faux-column background images column-bg.gif and column-bg-print.gif in which the colored section is narrower or wider by the same amount changed above.

To use an alternate banner & logo on individual page(s)

Insert the following into the <head> section of the desired page(s):

<style type="text/css">
<!--
#banr {background-image:url(/img/banr#.jpg);}
-->
</style>

replacing banr#.jpg with the file name of the appropriate banner background. Then in the <body> section, change the logo image:

<img src="/img/logo-templates.gif" alt="UC Berkeley templates" />

to point to your alternate logo image file.

To search your site, rather than the entire berkeley.edu domain

If you haven't done so already, set up a Google Custom Search Engine to search the URLs you wish (details at http://www.google.com/coop/cse/). Then, in the tools.htm file in the /ssi folder, in the search form, replace the long string in value=" " for the cx input with the similar cx value for your Google CSE (you can find this value in the Code section of your CSE's Control Panel).

To add tracking code

If you use Google Analytics, copy the Javascript code block from your GA account (Analytics Settings  >  Profile Settings  >  Tracking Code) at the indicated place at the bottom of the page template, just before the closing </body> tag. For users of other analytical tools, follow your tool's instructions.

Variable section titles

If you will be using the section titles (with or without photostrips) but want a different title on most pages, you'll want to replace the section title SSI line in your template(s) with the actual code from the section.htm file. That way you can change text on a per-page basis. NOTE: The section title should not be used as the page title/headline; that must go inside the <h1> tag for accessibility and search engine optimization reasons.

To change the section title background color globally

In UCB.css, supply a different hex value for background-color: in #section. To override the color on a per-page basis, add this code at the end of the <head> section on the desired page(s):

<style type="text/css">
<!--
#section {background-color: #000000;}
-->
</style>

replacing #000000 with your desired color's hex code.

Dreamweaver templates

The .shtml files in /pages can easily be converted into Dreamweaver templates (.dwt files) for use in Dreamweaver and Contribute. To do so, follow the instructions with your version of Dreamweaver, and select which areas should be editable by users. We recommend:

  • One line at the end of the template's <head> section, for insertion of page-specific CSS styles, scripts, <meta> tags or other info.
  •  All code inside the <div id="content"> tags. If you will be using section titles that vary from page to page, you'll instead want to make all code within the <div id="contentcol"> tags editable (and see note above about replacing the section title SSI with editable code).
  • All code inside the <div id="addon"> tags (unless you remove this section, or make it a sitewide SSI as well)