PHP Template

The iastate-theme package contains the public assets (image, stylesheet) and php class needed to quickly create new pages using the ISU Template.

Overview

Included in the package are the following files:

iastate-theme/
 |-- public/
 |    |-- css/
 |    |    `-- base.css
 |    |-- img/
 |    |    `-- sprite.png
 |    `-- favicon.ico
 `-- src/
	  `-- IastateTheme/
           `-- Theme.php
  1. base.css contains all the basic styling information for the ISU Template along with some helpful default components.
  2. sprite.png contains the Iowa State University nameplates in white and red for the header and footer.
  3. favicon.ico contains the new Iowa State University favicon.
  4. Theme.php defines the IastateTheme\Theme class containing the core templating functionalities and markup for the new ISU Template

How to install

Let's say your web server uses the /mysite/www/ directory as its document root. We will install our theme package in /mysite/ and write an additional file to customize the theme for your site. Then we will learn how to use this theme class from an individual page to render the ISU Template.

Your document root is used to serve up webpages and is the directory users see when viewing your site from a browser. This directory could be named public_html, public, web, etc. depending on your server.

So, to start out we assume your server looks something like this:

mysite/
 |-- config/
 `-- www/ # Let's assume this is your document root
      |-- css/
      `-- index.php

Once we are done, the server should look like this:

mysite/
 |-- autoload.php # [4]
 |-- config/
 |-- src/
 |    `-- Sample/
 |         `-- Theme.php # [3]
 |-- vendor/
 |    `-- iastate-theme/ # [1]
 `-- www/
      |-- css/
      |    `-- base.css # [2]
      |-- img/
      |    `-- sprite.png # [2]
      |-- favicon.ico # [2]
      `-- index.php # [5]

1. iastate-theme package

Place the theme package in the vendor/ directory in your site root.

The vendor/ directory contains third party code. Packages are namespaced to ensure we don't cause conflicts with other libraries.

Note: Please do not modify any of the package contents. This will ensure you can update the package later on without causing any conflicts.

2. Public assets

Create symlinks for the public assets or copy them over to your document root:

  • /mysite/vendor/iastate-theme/public/favicon.ico to /mysite/www/favicon.ico
  • /mysite/vendor/iastate-theme/public/css/base.css to /mysite/www/css/base.css
  • /mysite/vendor/iastate-theme/public/img/sprite.png to /mysite/www/img/sprite.png

Note: Please do not modify any of these assets. Make sure to replace them with the newer versions when you update the package.

You can isolate all theme specific assets into one place by using the theme_asset_path option. Create a symlink to the theme's public/ directory from your document root and then change the theme_asset_path option to point to this directory.

3. Sample theme

Create /mysite/src/Sample/Theme.php with the following:

<?php
namespace Sample;

class Theme extends \IastateTheme\Theme
{
	public function init()
	{
		$this->setOptions(array(
			'site_title' => 'Department Title',
			'sidebar' => array(
				array(
					'label' => 'Home',
					'uri' => '/',
				),
				array(
					'label' => 'Sample',
					'uri' => '/sample/',
				),
			),
			'page_footer' => '<p>Unit name, address, (555) 555-5555, '. $this->email('email') .'.</p>',
		));
	}
}

This will be our custom theme class. We will be using this class to render all our pages.

The src/ directory will contain code written by you. Again, packages are namespaced to ensure we don't cause conflicts with other libraries. The namespace is used as the directory name and the file is named the same as the class name.

4. Autoloader

Create /mysite/autoload.php with the following to load the necessary classes from each package:

<?php
require 'vendor/iastate-theme/src/IastateTheme/Theme.php';
require 'src/Sample/Theme.php';

You must include this file before you can use any of the classes.

5. Render theme

Create /mysite/www/index.php with the following to use the theme:

<?php
require '/mysite/autoload.php';

$theme = new Sample\Theme('Hello world!');
$theme->drawHeader();
?>

<p>Welcome!</p>

<?php
$theme->drawFooter();

Now you can visit this page from your browser and see the theme in action.

Documentation

Please refer to the documentation page.

Upgrading from 0.x

If you have been using the 0.x branch of the theme (previously known as webdev-php-template), please take a look at the transition guide to see what has changed.

Documentation and downloads for the 0.x branch can be found on the 0.x legacy page.

Archive

  • iastate-theme-1.4.67.zip (v1.4.67, 2016-11-04, 70KiB)
    • Font Awesome to 4.6.1
    • Fixed NavBar
    • Fixed TopStripMenu Event Handling
  • iastate-theme-1.4.44.zip (v1.4.44, 2016-01-11, 68KiB)
    • Added "shim" components for compatability with Bootstrap.
    • Updated FontAwesome to 4.5.0.
    • Changed sidebar menu chevrons to FontAwesome glyphs that can be styled.
  • iastate-theme-1.4.36.zip (v1.4.36, 2015-09-08, 66KiB)
    • Changed Outlook link in header from exchange.iastate.edu to outlook.iastate.edu
    • Rounded corner for active chevron on sub-nav links
    • Removed overflow-scroll on paginator table container
    • Fixed margin for buttons in chrome
    • Updated font-awesome version
    • Linked footer to org-url
  • iastate-theme-1.4.31.zip (v1.4.31, 2015-09-08, 66KiB)
    • Added responsive_disable_large option (refer to documentation)
    • Fixed bug in navigation rendering to activate only the most active trail(s)
    • Mark active items in dropdown navigation with selected attribute
    • Add chevrons to items in top strip menu to denote dropdowns
    • Use actual <button> tags for responsive toggles for accessibility
  • iastate-theme-1.4.22.zip (v1.4.22, 2015-09-08, 66KiB)
    • Focus/blur search box when toggled on/off in mobile view
    • Added .wd-Grid--fitToFill layout (refer to documentation)
    • Added .wd-Grid--alignXXX alignment options (refer to documentation)
    • Off canvas sidebar now scrolls by itself separate from the page content. Allows for sidebars longer than content.
  • iastate-theme-1.4.13.zip (v1.4.13, 2015-09-08, 67KiB)
    • Fix sidebar pattern and nopattern options to properly match regex
    • Make sure sidebar node and subnav is not rendered if none of the child links are rendered
    • Rename skip anchor from #content to #skip-content to prevent collisions
    • Change dropdown styles to light theme and add border between nodes
  • iastate-theme-1.4.8.zip (v1.4.8, 2015-09-08, 67KiB)
    • Added .wd-Grid--reverse and .wd-Grid--XXXPrint layouts (refer to documentation)
    • Overflow of items in the top toolbar now scrollable in mobile view
    • Refactor navigation styles and cut down bloat
  • iastate-theme-1.4.1.zip (v1.4.1, 2015-09-08, 80KiB)
    • Fix regressions in navigation component
    • Add IE8 support for grid layouts
  • iastate-theme-1.4.0.zip (v1.4.0, 2015-09-08, 78KiB)
    • Refactor class names to be more structured and use bem naming convention
    • Allow zooming via viewport meta tag
    • Disable off-canvas element animations on mobile devices
    • Revamped grid component (refer to documentation)
    • Revamped button component (refer to documentation)
  • iastate-theme-1.3.6.zip (v1.3.6, 2015-09-08, 55KiB)
    • Fix favicon for mobile
    • Added theme_asset_path option separate from user asset_path option (refer to documentation)
    • Added drop shadow between sidebar and content pane
  • iastate-theme-1.3.5.zip (v1.3.5, 2015-09-08, 54KiB)
    • setOptions should merge arrays with numeric keys instead of replacing them
  • iastate-theme-1.3.4.zip (v1.3.4, 2015-09-08, 54KiB)
    • Updated .clearfix method
    • Don't hide overflow in content pane by default
    • Heading font sizes bumped down
    • Version number now appended to asset URLs
  • iastate-theme-1.3.2.zip (v1.3.2, 2015-09-08, 54KiB)
    • Responsive css and html
    • Classes to toggle responsive visibility (refer to examples)
    • Lock mobile zooming
    • Add 'responsive' config option