I had a long list of elements within two divs—one of which was initially display:none—and was overlaid by a two-button dock at the bottom. A dock that needed to be position:fixed.

Basically this:

  <div id="container">
    <div id="main" role="main">
          <ul class="lists" id="presentations">
               <li>Thing One</li>
               <li>Thing One</li>
               <li>Thing One</li>
               <li>Thing One</li>
               <li>Thing One</li>
               <li>Thing One</li>
               <li>Thing One</li>
               <li>Thing One</li>
               <li>Thing One</li>
               <li>Thing One</li>
          </ul> <!--! end presentations -->
          <ul class="lists" id="openvisits" style="display:none;">
               <li>Thing Two</li>
               <li>Thing Two</li>
               <li>Thing Two</li>
               <li>Thing Two</li>
               <li>Thing Two</li>
               <li>Thing Two</li>
               <li>Thing Two</li>
               <li>Thing Two</li>
               <li>Thing Two</li>
               <li>Thing Two</li>
          </ul> <!--! end openvisits -->
          <ul id="dock">
               <li><a href="#" id="prezis">presentations</a></li>
               <li><a href="#" id="visits">open visits</a></li>
          </ul>
     </div> <!--! end of #main -->
  </div> <!--! end of #container --> 

Add this before the closing body to make the show/hide work:

<script>
// basic show and hide
 $(document).ready(function() {
    $('#prezis').click( function(event) {
                 event.preventDefault(); // kills the link from linking
    $('ul#presentations').show();
    $('ul#openvisits').hide();

   });
    $('#visits').click( function(e) {
                e.preventDefault(); // kills the link from linking
    $('ul#presentations').hide();
    $('ul#openvisits').show();
   });
 });
</script>

Give your lists some basic style:

ul.lists {
width:100%;
}
     ul.lists li {
     width:97%;
     padding:2% 1%;
     line-height:20px;
     margin:0;
     float:left;
     display:block;
     position:relative;
     }

Don’t leave out the dock:

ul#dock {
height:50px;
padding:0;
width:100%;
position:fixed;
left:0;
bottom:0;
display:block;
overflow:hidden;
}
     ul#dock li {
     border-right:solid 1px #444;
     text-align:center;
     width:49%;
     padding:0;
     margin:0;
     height:50px
     float:left;
     display:inline;
     position:relative;
     clear:none;
     background: transparent;
     }
          ul#dock li a {
          position:relative;
          display:block;
          float:left;
          width:49%;
          padding:14px 0 0 0;
          margin:0;
          height:50px;
          background: transparent;
          color:#444;
          font:normal 500 1em helvetica, arial, sans-serif;
          }

The HTML5 Mobile Boilerplate suggests we add this to the head:

<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Test it on your iOS5 device and you’re ready to roll. Oh yeah. Android. And pre-iOS5. Damn.

Android is fixed by supplementing your viewport meta:

<meta name="viewport" content="width=100%; initial-scale=1.0; maximum-scale=1; minimum-scale=1; user-scalable=no;">

For pre-iOS5, we have to turn to iScroll. Thanks to mobile tuts plus for the iScroll introduction.

Cubiq’s iScroll exists to allow interior elements to scroll in iOS. We’ll have to make some changes to the CSS and HTML, as well as load iScroll.

Add #wrapper and #scroll-content inside of #main.

  <div id="container">
    <div id="main" role="main">
	<div id="wrapper">
		<div id="scroll-content">
			<ul class="lists" id="presentations">
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
			</ul> <!--! end presentations -->
			<ul class="lists" id="openvisits" style="display:none;">
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
			</ul> <!--! end openvisits -->
		</div><!--! end of #scroll-content -->
	</div><!--! end of #wrapper -->
				<ul id="dock">
					<li><a href="#" id="prezis">presentations</a></li>
					<li><a href="#" id="visits">open visits</a></li>
				</ul>
	</div> <!--! end of #main -->
  </div> <!--! end of #container -->

Call iScroll, and make it work

<script type="text/javascript" src="PATH/TO/YOUR/JS/FOLDER/iscroll-lite.js"></script>
<script type="text/javascript">
var theScroll;
function scroll() {
	theScroll = new iScroll('wrapper');
	}
	document.addEventListener('DOMContentLoaded', scroll, false);
</script>

Unfortunately, the #dock needs to be absolutely positioned now, which completely mucks up Android and iOS5. So, we’ll use PHP to work with User Agent strings to only give pre-iOS5 devices iScroll.

<?php
//Detect special conditions devices
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$Android= stripos($_SERVER['HTTP_USER_AGENT'],"Android");
$webOS = stripos($_SERVER['HTTP_USER_AGENT'],"webOS");
?>

Now that we set the device variables, we can load iScroll & its CSS for only pre-iOS5 devices

if( $iPod || $iPhone || $iPad ){
	if(strpos($_SERVER['HTTP_USER_AGENT'], "5_0") == false) {
		echo '<style>ul#dock { position:absolute!important; left:0; bottom:0; } #scroll-content { position:absolute; width:100%; padding:0; }</style>';
		echo '<script type="text/javascript" src="js/iscroll-lite.js"></script>';
		echo '<script type="text/javascript">';
		echo 'var theScroll;';
		echo 'function scroll() {';
		echo "theScroll = new iScroll('wrapper');";
		echo '}';
		echo "document.addEventListener('DOMContentLoaded', scroll, false);";
		echo '</script>';
  }
}else if($Android){
}else if($webOS){
}
?>

Problem solved.

Here’s everything at once:

<!doctype html>
<!-- Conditional comment for mobile ie7 http://blogs.msdn.com/b/iemobile/ -->
<!-- Appcache Facts http://appcachefacts.info/ -->
<!--[if IEMobile 7 ]>    <html class="no-js iem7" manifest="default.appcache?v=1"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>Title</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <!--! Promise me you'll use an external stylesheet when you do this for reals -->
  <style type="text/css">
  /* get some reset action */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* the lists */
ul.lists, ul.lists li, ul.lists li a {
z-index: 1;
}

ul.lists {
width:100%;
}
	ul.lists li {
	width:97%;
	padding:2% 1%;
	line-height:20px;
	margin:0;
	float:left;
	display:block;
	position:relative;
    font: normal 300 1em "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; /* Chris Coyier's brilliant Better Helvetica stack */
	}
		ul.lists li:nth-child(odd){
		background:#f4f4f4;
		}
		ul.lists li:last-child {
		padding-bottom:60px;
		}

/* pretty dock */
ul#dock {
height:50px;
padding:0;
width:100%;
position:fixed;
left:0;
bottom:0;
z-index: 11;
display:block;
overflow:hidden;
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#333333));
background-image: -webkit-linear-gradient(top, #444444, #333333);
background-image:    -moz-linear-gradient(top, #444444, #333333);
background-image:     -ms-linear-gradient(top, #444444, #333333);
background-image:      -o-linear-gradient(top, #444444, #333333);
background-image:         linear-gradient(top, #444444, #333333);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#333333');
}
	ul#dock li {
	border-right:solid 1px #444;
	text-align:center;
	width:49%;
	padding:0;
	margin:0;
	height:50px
	float:left;
	display:inline;
	position:relative;
	z-index: 12;
	clear:none;
	background: transparent;
	}
		ul#dock li:last-child, ul#dock li:last-child a {
		border:none;
		}
		ul#dock li a {
		font: normal 300 1em "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
		color:#fff;
		text-shadow:1px 1px 0px #444;
		border-right:solid 1px #333;
		border-bottom:none;
		text-decoration:none;
		position:relative;
		z-index: 13;
		display:block;
		float:left;
		width:49%;
		padding:14px 0 0 0;
		margin:0;
		height:50px;
		background: transparent;
		}
</style>
</head>
<body>
<?php
//Detect special conditions devices
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$Android= stripos($_SERVER['HTTP_USER_AGENT'],"Android");
$webOS = stripos($_SERVER['HTTP_USER_AGENT'],"webOS");

if( $iPod || $iPhone || $iPad ){
	if(strpos($_SERVER['HTTP_USER_AGENT'], "5_0") == false) {
		echo '<style>ul#dock { position:absolute!important; left:0; bottom:0; z-index: 11; } #scroll-content { position:absolute; z-index:1; width:100%; padding:0; } header { z-index:9; }</style>';
		echo '<script type="text/javascript" src="js/iscroll-lite.js"></script>';
		echo '<script type="text/javascript">';
		echo 'var theScroll;';
		echo 'function scroll() {';
		echo "theScroll = new iScroll('wrapper');";
		echo '}';
		echo "document.addEventListener('DOMContentLoaded', scroll, false);";
		echo '</script>';
  }
}else if($Android){
}else if($webOS){
}
?>

  <div id="container">
    <div id="main" role="main">
	<div id="wrapper">
		<div id="scroll-content">
			<ul class="lists" id="presentations">
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
				<li>Thing One</li>
			</ul> <!--! end presentations -->
			<ul class="lists" id="openvisits" style="display:none;">
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
				<li>Thing Two</li>
			</ul> <!--! end openvisits -->
		</div><!--! end of #scroll-content -->
	</div><!--! end of #wrapper -->
				<ul id="dock">
					<li><a href="#" id="prezis">presentations</a></li>
					<li><a href="#" id="visits">open visits</a></li>
				</ul>
	</div> <!--! end of #main -->
  </div> <!--! end of #container -->

<script>
// basic show and hide
 $(document).ready(function() {
    $('#prezis').click( function(event) {
  			event.preventDefault();
    $('ul#presentations').show();
    $('ul#openvisits').hide();

   });
    $('#visits').click( function(e) {
 			e.preventDefault();
    $('ul#presentations').hide();
    $('ul#openvisits').show();
   });
 });
</script>
</body>
</html>

When the president of the Chicago campus of The Chicago School of Professional Psychology asked for flatscreen televisions to be hung by each of the elevators and in gathering spaces, most people thought the difficult part would be getting a good price on the TVs.

You won’t be able to afford digital signage technology.

The school is also host to an international institute that focuses on marketing messages; specifically digital signage. They were thrilled that the school was going to jump onto the technology, but were stuck on the cost of existing platforms.

The real challenge was dropped on my plate at the end of a status meeting. I was pumped!

“The flatscreens are happening. Can you design a layout? And make it sustainable to manage?”

I turned to WordPress

But I knew it needed a strict structure, people couldn’t be expected to adhere on their own.

The entire screen is filled with carousel that, using @malsup’s jQuery Cycle Plugin, displays a single post for 18 seconds at a time. There’s also a dock at the bottom of the page with four dynamic sidebars that are driven by jCarouselLite.

• the More Fields plugin allowed me to add the specific fields I would need:
  • background color
  • subhead
  • web address
  • image
  • image alignment
  • 
• the Weather plugin could be customized for Chicago (more details on this later)
• the school uses Google calendars, so the ICS Calendar plugin pulled in the ICS feed for a scrolling list of events
• for a little local color, the KB Advanced RSS plugin scrolled the great events listed on GapersBlock
• the QR Code Tag plugin automatically generates a QR code for a specified URL
• because the design breaks on smaller screens, the WordPress Mobile Edition plugin allowed for mobile visitors to not feel left out
• since none of the events are evergreen, the Post Expirator plugin does just what it says
• I also built a simple current time plugin (more on this later)

Let’s start with functions.php

The first is fairly straightforward about setting up five sidebars. Yes, five. In order to get the time and weather to not remain the same from when the browser started in the morning, the sidebar sidebar doesn’t appear on the page directly, but appears in an iFramed house of mirrors.¹

We’re just registering new sidebars, naming them, giving the title an H3 and a link.

if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'sidebar',
          'before_widget' => '<div>',
          'after_widget' => '</div>',
          'before_title' => '<h3><a href="http://www.weather.com/weather/today/Chicago+IL+USIL0225?lswe=Chicago,%20IL">',
          'after_title' => '</a></h3>',
));
register_sidebar(array('name' => 'DockLeft',
          'before_widget' => '<div>',
          'after_widget' => '</div>',
          'before_title' => '<h3><a href="http://www.weather.com/weather/today/Chicago+IL+USIL0225?lswe=Chicago,%20IL">',
          'after_title' => '</a></h3>',
));
register_sidebar(array('name' => 'DockCenter',
          'before_widget' => '',
          'after_widget' => '',
          'before_title' => '<h3><a href="http://ego.thechicagoschool.edu">',
          'after_title' => '</a></h3>',
));
register_sidebar(array('name' => 'DockRight',
          'before_widget' => '',
          'after_widget' => '',
          'before_title' => '<h3><a href="http://gapersblock.com/" target="_blank">',
          'after_title' => '</a></h3>',
));
register_sidebar(array('name' => 'DockFarRight',
          'before_widget' => '<div>',
          'after_widget' => '</div>',
          'before_title' => '<h3><a href="http://www.thechicagoschool.edu/content.cfm/academic_calendar" target="_blank">',
          'after_title' => '</a></h3>',
));

After the sidebars are registered, we want to get rid of WordPress’ pesky automatic adding of paragraphs to widgets.

remove_filter ('the_content', 'wpautop');

Finally, we need to be able to get all of the data entered into those additional structured fields

function get_custom_field_value($szKey, $bPrint = false) {
     global $post;
     $szValue = get_post_meta($post->ID, $szKey, true);
     if ( $bPrint == false ) return $szValue; else echo $szValue;
}

We’re left with this as functions.php

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'sidebar',
          'before_widget' => '<div>',
          'after_widget' => '</div>',
          'before_title' => '<h3><a href="http://www.weather.com/weather/today/Chicago+IL+USIL0225?lswe=Chicago,%20IL">',
          'after_title' => '</a></h3>',
));
register_sidebar(array('name' => 'DockLeft',
          'before_widget' => '<div>',
          'after_widget' => '</div>',
          'before_title' => '<h3><a href="http://www.weather.com/weather/today/Chicago+IL+USIL0225?lswe=Chicago,%20IL">',
          'after_title' => '</a></h3>',
));
register_sidebar(array('name' => 'DockCenter',
          'before_widget' => '',
          'after_widget' => '',
          'before_title' => '<h3><a href="http://ego.thechicagoschool.edu">',
          'after_title' => '</a></h3>',
));
register_sidebar(array('name' => 'DockRight',
          'before_widget' => '',
          'after_widget' => '',
          'before_title' => '<h3><a href="http://gapersblock.com/" target="_blank">',
          'after_title' => '</a></h3>',
));
register_sidebar(array('name' => 'DockFarRight',
          'before_widget' => '<div>',
          'after_widget' => '</div>',
          'before_title' => '<h3><a href="http://www.thechicagoschool.edu/content.cfm/academic_calendar" target="_blank">',
          'after_title' => '</a></h3>',
));
remove_filter ('the_content', 'wpautop');
function get_custom_field_value($szKey, $bPrint = false) {
     global $post;
     $szValue = get_post_meta($post->ID, $szKey, true);
     if ( $bPrint == false ) return $szValue; else echo $szValue;
}
?>

Next, tackle header.php

This content would be changing regularly and needed to appear fresh as close to immediately as possible, so I added a meta refresh on every hour. Also, a meta nocache.

 <meta http-equiv="refresh" content="3600">
     <meta http-equiv="pragma" content="nocache">

jQuery is called from Google, and jQuery Cycle Plugin and jCarouselLite are called immediately after.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
     <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/scripts/jquery.cycle.all.js"></script>
     <script src="<?php bloginfo('stylesheet_directory'); ?>/scripts/jcarousellite_1.0.1c4.js" type="text/javascript"></script>

Next, the settings for the main windown and the three scrolling sidebars on the dock are set.

     <script type="text/javascript">
          $(document).ready(function(){
               $('#myslides').cycle({
                    fx: 'fade',
                    speed: 1000,
                    timeout: 18000
               });
               $(".scroll").jCarouselLite({
                    vertical: true,
                    hoverPause:false,
                    visible: 1,
                    auto:9000,
                    speed:500
               });
               $(".scroll2").jCarouselLite({
                    vertical: true,
                    hoverPause:false,
                    visible: 2,
                    auto:11000,
                    speed:500
               });
               $(".scroll3").jCarouselLite({
                    vertical: true,
                    hoverPause:false,
                    visible: 2,
                    auto:7000,
                    speed:500
               });
          });
     </script>

That leaves us with this:

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="utf-8" />
     <meta http-equiv="refresh" content="3600">
     <meta http-equiv="pragma" content="nocache">
     <title><?php bloginfo('name'); ?></title>
     <meta name="description" content="<?php bloginfo('description'); ?>" />
     <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
     <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/scripts/jquery.cycle.all.js"></script>
     <script src="<?php bloginfo('stylesheet_directory'); ?>/scripts/jcarousellite_1.0.1c4.js" type="text/javascript"></script>
     <script type="text/javascript">
          $(document).ready(function(){
               $('#myslides').cycle({
                    fx: 'fade',
                    speed: 1000,
                    timeout: 18000
               });
               $(".scroll").jCarouselLite({
                    vertical: true,
                    hoverPause:false,
                    visible: 1,
                    auto:9000,
                    speed:500
               });
               $(".scroll2").jCarouselLite({
                    vertical: true,
                    hoverPause:false,
                    visible: 2,
                    auto:11000,
                    speed:500
               });
               $(".scroll3").jCarouselLite({
                    vertical: true,
                    hoverPause:false,
                    visible: 2,
                    auto:7000,
                    speed:500
               });
          });
     </script>
          <?php wp_head() ?>
</head>
<body>

Home.php is next

I was on a real home.php kick at the time, but there’s no reason why index.php wouldn’t work for this as well. It’s probably smarter that way anyway.

First things first; call header.php

<?php get_header() ?>

Next, the big part. We’ll build out the slideshow. Get the posts, order them randomly and call the background color field to set the class for the wrapper.

<div id="myslides">
          <?php query_posts("orderby=rand"); $i = 1;  ?>
          <?php while (have_posts()) : the_post(); ?>
               <div class="<?php $key="background"; echo get_post_meta($post->ID, $key, true); ?>">

Next, call the post title, subhead field and image field. Call the image alignment field to set the class of the image. Finally, call the content of the post

<h1><?php the_title() ?></h1>
<h2><?php $key="subhead"; echo get_post_meta($post->ID, $key, true); ?></h2>
<p><img src="<?php $key="image"; echo get_post_meta($post->ID, $key, true); ?>" class="<?php $key="imagealign"; echo get_post_meta($post->ID, $key, true); ?>" />
<?php the_content(); ?></p>

Now, the fun part—create the QR code on the fly, by calling the web address field.

<p class="url">
<img src="<?php $key="webaddress";
  global $qrcodetag;
  echo $qrcodetag->getQrCodeUrl(get_post_meta($post->ID, $key, true),248,'UTF-8','L',4,0);
?>" />

Tidy everything up.

                    </div><!--.container-->
               </div><!--color-->
     <?php endwhile; ?>
     </div><!--#myslides-->

Now, on to the pseudo dock, where we have a little location message and call our sidebars.

     <div id="dock">
     <a href="http://ego.thechicagoschool.edu/" class="youarehere">The Chicago School, Chicago campus</a>
          <div class="dockleft">
               <?php if(function_exists('dynamic_sidebar') && dynamic_sidebar(DockLeft)) : ?>
               <?php endif; ?>
          </div> <!-- .dockleft -->
          <div class="dockcenter">
               <?php if(function_exists('dynamic_sidebar') && dynamic_sidebar(DockCenter)) : ?>
               <?php endif; ?>
          </div> <!-- .dockcenter -->
          <div class="dockright">
               <?php if(function_exists('dynamic_sidebar') && dynamic_sidebar(DockRight)) : ?>
               <?php endif; ?>
          </div> <!-- .dockright -->
          <div class="dockfarright">
               <?php if(function_exists('dynamic_sidebar') && dynamic_sidebar(DockFarRight)) : ?>
               <?php endif; ?>
          </div> <!-- .dockfarright -->
     </div> <!-- #dock -->

That leaves us with this for the home.php or index.php file

<?php get_header() ?>

<div id="myslides">
          <?php query_posts("orderby=rand"); $i = 1;  ?>
          <?php while (have_posts()) : the_post(); ?>
               <div class="<?php $key="background"; echo get_post_meta($post->ID, $key, true); ?>">
                    <div class="container">
                         <h1><?php the_title() ?></h1>
                         <h2><?php $key="subhead"; echo get_post_meta($post->ID, $key, true); ?></h2>
                         <p><img src="<?php $key="image"; echo get_post_meta($post->ID, $key, true); ?>" class="<?php $key="imagealign"; echo get_post_meta($post->ID, $key, true); ?>" />
                              <?php the_content(); ?></p>
<p class="url">
<img src="<?php $key="webaddress";
  global $qrcodetag;
  echo $qrcodetag->getQrCodeUrl(get_post_meta($post->ID, $key, true),248,'UTF-8','L',4,0);
?>" />
                    </div><!--.container-->
               </div><!--color-->
     <?php endwhile; ?>
     </div><!--#myslides-->
     <div id="dock">
     <a href="http://ego.thechicagoschool.edu/" class="youarehere"><img class="ted" src="http://full/path/to/wp-content/uploads/Ted-Rubenstein1.jpg" /> Dr. Ted Rubenstein, 1964-2010</a>
          <div class="dockleft">
               <?php if(function_exists('dynamic_sidebar') && dynamic_sidebar(DockLeft)) : ?>
               <?php endif; ?>
          </div> <!-- .dockleft -->
          <div class="dockcenter">
               <?php if(function_exists('dynamic_sidebar') && dynamic_sidebar(DockCenter)) : ?>
               <?php endif; ?>
          </div> <!-- .dockcenter -->
          <div class="dockright">
               <?php if(function_exists('dynamic_sidebar') && dynamic_sidebar(DockRight)) : ?>
               <?php endif; ?>
          </div> <!-- .dockright -->
          <div class="dockfarright">
               <?php if(function_exists('dynamic_sidebar') && dynamic_sidebar(DockFarRight)) : ?>
               <?php endif; ?>
          </div> <!-- .dockfarright -->
     </div> <!-- #dock -->
<?php get_footer() ?>

Current Time plugin

After looking and looking for a current time plugin that displayed exactly how I needed, I gave up and decided to write my own simple plugin for it. Look up your PHP timezone, and you’ll be all set.

<?php
/*
Plugin Name: Current Time
Plugin URI: http://nathangjones.com/
Description: Current Time WordPress Plugin
Author: nate jones
Version: 1
Author URI: http://nathangjones.com/
*/

function currentTime()
{
     date_default_timezone_set('America/Chicago');
     $time = date("g:i a");
     $date = date("M j");
     echo '<span class="time">';
     echo $time;
     echo '</span>';
     echo '<br />';
     echo '<span class="date">';
     echo $date;
     echo '</span>';
}

function widget_currentTime($args) {
  extract($args);
  echo $before_widget;
  echo $before_title;?><?php echo $after_title;
  currentTime();
  echo $after_widget;
}

function currentTime_init()
{
  register_sidebar_widget(__('Current Time'), 'widget_currentTime');
}
add_action("plugins_loaded", "currentTime_init");
?>

iFrame house of mirrors

As I mentioned before, displaying weather and time wasn’t a big deal. The big deal was that they’d only be accurate for the first minute of the day. I’m sure there’s a more elegant way to conduct this business, I was just stumped and found this to work for me.

Enter the house of mirrors

We already created the sidebar, but it’s just not displayed on the screen. So we’ll create weather.html and iFrame in that sidebar. Then we’ll iframe weather.html in our dock, and set it to refresh every minute. Unnecessarily complicated, no? First, let’s call the stylesheet and jQuery

<link rel="stylesheet" type="text/css" href="full/path/to/style.css" />
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Next, for a hint of simplicity, we’ll duplicate the same DIVs that appear in the WordPress site.

<dock id="dockleft">
     <div>
          <div class="textwidget">
               <iframe src="http://full/path/to/left-dock/" scrolling="no" height="100%" widht="100%" style="height:100%; width:100%; background:transparent; border:none;"></iframe>
          </div>
     </div>
</div>

Finally, to make the incessant refreshing of content appear a little less obvious and more refined, let’s ease it in and out

<script>
var refreshId = setInterval(function()
{
      $('#dockleft').fadeOut("fast").load('http://full/path/to/left-dock/').fadeIn("fast");
}, 15000);
</script>

That leaves us here for weather.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://full/path/to/style.css" />
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script>
var refreshId = setInterval(function()
{
      $('#dockleft').fadeOut("fast").load('http://full/path/to/left-dock/').fadeIn("fast");
}, 15000);
</script>
</head>
<body>
<dock id="dockleft">
     <div>
          <div class="textwidget">
               <iframe src="http://full/path/to/left-dock/" scrolling="no" height="100%" widht="100%" style="height:100%; width:100%; background:transparent; border:none;"></iframe>
          </div>
     </div>
</div>
</body>

Footer

Nothing to see here. Just closing up the wrapper

     <div class="footer">
          <?php wp_footer() ?>
     </div><!-- footer -->
     </div><!-- wrapper -->
</body>
</html>

Placing the widgets into their respective sidebars

Drag the Weather and Current Time widgets into the sidebar sidebar. Then a text widget into the DockLeft sidebar to iframe in weather.html

<iframe src="http://full/path/to/weather.html" scrolling="no" height="100%" widht="100%" style="height:100%; width:100%; background:transparent;"></iframe>

Finally, some style

CSS is my favorite thing to do. It’s how I decompress and relax.

First the architecture, with one tiny trick. The TVs would be using Chrome to display the site in full-screen. The only problem was that they automatically put the cursor dead-center on the screen, which is a sure give away that it’s a website. So we replace the cursor with an image; a 98% transparent PNG.

html{
height:100%;
margin:0;
padding:0;
width:100%;
background:transparent;
}
* {
margin:0;
padding:0;
}
a:link, a:visited, a:hover, a:active{
outline:none;
color:#fff;
text-shadow:0px 1px 1px #2b2b2b;
}
body{
padding:0;
height:100%;
width:100%;
background:transparent;
text-align:left;
overflow:hidden;
cursor: url(images/blank.png), default;
}

Next, the fonts and content.

@font-face {
     font-family: 'TradeGothicLTStdLight';
     src: url('fonts/TradeGothicLTStd-Light.eot');
     src: local('fonts/Trade Gothic LT Std'), local('fonts/TradeGothicLTStd-Light'), url('fonts/TradeGothicLTStd-Light.woff') format('woff'), url('fonts/TradeGothicLTStd-Light.ttf') format('truetype');
}

@font-face {
     font-family: 'TradeGothicLTStdRegular';
     src: url('fonts/TradeGothicLTStd.eot');
     src: local('fonts/Trade Gothic LT Std'), local('fonts/TradeGothicLTStd'), url('fonts/TradeGothicLTStd.woff') format('woff'), url('fonts/TradeGothicLTStd.ttf') format('truetype');
}

@font-face {
     font-family: 'TradeGothicLTStdBold';
     src: url('fonts/TradeGothicLTStd-Bold.eot');
     src: local('fonts/Trade Gothic LT Std'), local('fonts/TradeGothicLTStd-Bold'), url('fonts/TradeGothicLTStd-Bold.woff') format('woff'), url('fonts/TradeGothicLTStd-Bold.ttf') format('truetype');
}

#myslides h1{
font:normal 500 4.5em 'TradeGothicLTStdBold';
color:#fff;
text-shadow:0px 1px 1px #2b2b2b;
float:left;
display:block;
margin:2% 0 0 2%;
}
#myslides h2{
font:normal 500 3.5em 'TradeGothicLTStdRegular';
color:#d8d8d8;
text-shadow:0px 1px 1px #2b2b2b;
float:left;
display:block;
margin:1% 2%;
clear:left;
}
#myslides p{
font:normal 500 2.5em 'TradeGothicLTStdRegular';
color:#ccc;
text-shadow:0px 1px 1px #2b2b2b;
float:left;
display:block;
margin:1% 2%;
clear:left;
width:90%;
}
#myslides p.url{
font:normal 500 1.5em 'TradeGothicLTStdRegular';
color:#ccc;
text-shadow:0px 1px 1px #2b2b2b;
display:block;
position:absolute;
bottom:6%;
right:2%;
/*-- float:right;
margin:2% 2% 1% 2%;
clear:left; --*/
width:90%;
text-align:right;
}
#myslides p.url a, p.url a:visited{
font:normal 500 1em 'TradeGothicLTStdRegular';
color:#ccc;
text-shadow:0px 1px 1px #2b2b2b;
display:inline;
margin:1% 2%;
width:90%;
text-decoration:none;
}
#myslides p.url a:hover{
text-decoration:underline;
}
#myslides p.url img{
width:10%;
margin:0;
vertical-align: bottom;
}
img.Left, img.left{
box-shadow:0px 0px 12px rgba(0,0,0,.5);
-moz-box-shadow:0px 0px 12px rgba(0,0,0,.5);
-webkit-box-shadow:0px 0px 12px rgba(0,0,0,.5);
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
float:left;
display:inline;
margin:1%;
text-decoration:none;
outline:none;
width:30%;
max-height: 50%;
}
img.Right, img.right{
box-shadow:0px 0px 12px rgba(0,0,0,.5);
-moz-box-shadow:0px 0px 12px rgba(0,0,0,.5);
-webkit-box-shadow:0px 0px 12px rgba(0,0,0,.5);
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
float:right;
display:inline;
margin:1%;
text-decoration:none;
outline:none;
width:30%;
max-height:50%;
}

Now, some styles that are specific to main post. Including the background color of the sllides.

div#myslides{
height:100%;
width:100%;
position:relative;
overflow:hidden;
clear:both;
}
div#myslides div{
height:100%;
width:100%;
float:left;
display:block;
clear:both;
position:relative;
}
div#myslides div.container{
max-height:85%;
width:100%;
position:absolute;
top:0;
left:0;
background:transparent;
}
div#myslides div.Brown{
background:url(background/brown.jpg) 0 0 repeat-x;
}
div#myslides div.Darkblue, div#myslides div.DarkBlue{
background:url(background/darkblue.jpg) 0 0 repeat-x;
}
div#myslides div.Green{
background:url(background/green.jpg) 0 0 repeat-x;
}
div#myslides div.Lightblue{
background:url(background/lightblue.jpg) 0 0 repeat-x;
}
div#myslides div.Orange{
background:url(background/orange.jpg) 0 0 repeat-x;
}
div#myslides div.Purple{
background:url(background/purple.jpg) 0 0 repeat-x;
}
div#myslides div.Red{
background:url(background/red.jpg) 0 0 repeat-x;
}

Next up, the dock.

#dock{
position:absolute;
z-index:99;
bottom:0;
left:0;
height:20%;
width:100%;
background:-webkit-gradient(linear, left top, left bottom, from(rgba(137,137,137,0.8)), to(rgba(54,54,54,0.8)), color-stop(.3,#333333));
background: -moz-linear-gradient(bottom, rgba(137,137,137,0.8), rgba(54,54,54,0.8));
box-shadow:-2px 0px 12px rgba(0,0,0,.6);
-moz-box-shadow:-2px 0px 12px rgba(0,0,0,.6);
-webkit-box-shadow:-2px 0px 12px rgba(0,0,0,.6);
border-top-left-radius:18px;
-moz-border-radius-topleft:18px;
-webkit-border-top-left-radius:18px;
border-top-right-radius:18px;
-moz-border-radius-topright:18px;
-webkit-border-top-right-radius:18px;
}
#dock div{
float:left;
display:inline;
border-right:dotted .11em #fff;
height:95%;
margin:5px 1% 0 0;
color:#fff;
text-shadow:0px 1px 1px #2b2b2b;
padding:0 1%;
overflow:hidden;
}
#dock div.dockleft{
padding-left:2%;
width:8%;
height:100%;
}
#dock div.dockcenter{
width:26%;
height:100%;
}
#dock div.dockright{
width:26%;
height:100%;
}
#dock div.dockfarright{
width:26%;
border-right:none;
height:100%;
}
#dock div div{
width:100%;
border:none;
height:100%;
margin:0;
color:#fff;
text-shadow:0px 1px 1px #2b2b2b;
padding:0 1%;
}
#dock img{
padding:1%;
}
#dock h3, #pagesidebar h3{
font:normal 500 2.2em 'TradeGothicLTStdBold';
color:#fff;
text-shadow:0px 1px 1px #2b2b2b;
float:left;
display:block;
margin:0 0 5px 0;
line-height:1em;
}
#dock span.temp, #pagesidebar span.temp{
font:normal 500 200% 'TradeGothicLTStdRegular';
color:#fff;
text-shadow:0px 1px 1px #2b2b2b;
float:left;
display:inline;
margin:1% 2%;
}
h3 span.addy{
clear:none;
font:normal 500 40% 'TradeGothicLTStdRegular';
color:#fff;
text-shadow:0px 1px 1px #2b2b2b;
display:inline;
float:right;
margin:1.3em 0 0 4em;
}
#dock ul, #pagesidebar ul{
list-style:none;
width:100%;
float:left;
display:block;
font:normal 500 1.6em 'TradeGothicLTStdRegular';
color:#fff;
text-shadow:0px 1px 1px #2b2b2b;
}
#dock ul li, #pagesidebar ul li{
margin:0 0 .1em 0;
padding-bottom:10px;
}
#dock a, #dock a:visited, #pagesidebar a, #pagesidebar a:visited{
text-decoration:none;
}
#dock a:hover, #pagesidebar a:hover{
text-decoration:underline;
}
#dock .youarehere, #dock a.youarehere:visited{
font:normal 500 1.7em 'TradeGothicLTStdLight';
color:#ccc;
text-shadow:0px 1px 1px #2b2b2b;
text-decoration:none;
display:inline;
position:absolute;
top:-33%;
left:2%;
background:transparent;
width:33%;
}
#dock a.youarehere:hover{
color:#1A1A1A;
text-shadow:0px 1px 1px #f4f4f4;
text-decoration:none;
background:#f4f4f4;
}
img.ted{
background:transparent;
text-decoration:none;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
height:24%;
display:inline;
position:relative;
}
span.time, span.date{
font:normal 500 175% 'TradeGothicLTStdRegular';
color:#fff;
text-shadow:0px 1px 1px #2b2b2b;
float:left;
display:inline;
margin:0;
clear:left;
}
span.time{
border-top:dotted 1px #fff;
}

Some styles for the ICS Calendar widget.

.scroll ul, .scroll2 ul, .scroll3 ul, .scroll ul li, .scroll2 ul li{
height:100%;
}
.scroll3 ul li, .scroll2 ul li{
height:40%;
}
ul#ics-calendar-widget{
width:100%;
list-style:none;
}
ul#ics-calendar-widget li.item{
font-family:'TradeGothicLTStdRegular';
}
ul#ics-calendar-widget li.item a{
font-family:'TradeGothicLTStdBold';
}
div.scroll ul li:first-line{
font-family:'TradeGothicLTStdBold';
}
span.tiny{
font:oblique 500 12px arial;
color:#fff;
text-shadow:0px 1px 1px #2b2b2b;
}
div.scroll3 ul li a, div.scroll2 ul li a, div.scroll ul li a{
font:500 1.2em 'TradeGothicLTStdBold';
}
#dock div.scroll3 ul li{
padding-bottom:5px;
}

Finally, making the time & weather look right.

#pagesidebar{
width:100%;
height:100%;
background:transparent;
display:block;
position:absolute;
top:0;
left:0;
border:none;
}
iframe{
background:transparent;
border:none;
}

That leaves us here for the stylesheet.

/*----------Architecture----------*/
html{
height:100%;
margin:0;
padding:0;
width:100%;
background:transparent;
}
* {
margin:0;
padding:0;
}
a:link, a:visited, a:hover, a:active{
outline:none;
color:#fff;
text-shadow:0px 1px 1px #2b2b2b;
}
body{
padding:0;
height:100%;
width:100%;
background:transparent;
text-align:left;
overflow:hidden;
cursor: url(images/blank.png), default;
}

/*----------CONTENT----------*/
@font-face {
     font-family: 'TradeGothicLTStdLight';
     src: url('fonts/TradeGothicLTStd-Light.eot');
     src: local('fonts/Trade Gothic LT Std'), local('fonts/TradeGothicLTStd-Light'), url('fonts/TradeGothicLTStd-Light.woff') format('woff'), url('fonts/TradeGothicLTStd-Light.ttf') format('truetype');
}

@font-face {
     font-family: 'TradeGothicLTStdRegular';
     src: url('fonts/TradeGothicLTStd.eot');
     src: local('fonts/Trade Gothic LT Std'), local('fonts/TradeGothicLTStd'), url('fonts/TradeGothicLTStd.woff') format('woff'), url('fonts/TradeGothicLTStd.ttf') format('truetype');
}

@font-face {
     font-family: 'TradeGothicLTStdBold';
     src: url('fonts/TradeGothicLTStd-Bold.eot');
     src: local('fonts/Trade Gothic LT Std'), local('fonts/TradeGothicLTStd-Bold'), url('fonts/TradeGothicLTStd-Bold.woff') format('woff'), url('fonts/TradeGothicLTStd-Bold.ttf') format('truetype');
}

#myslides h1{
font:normal 500 4.5em 'TradeGothicLTStdBold';
color:#fff;
text-shadow:0px 1px 1px #2b2b2b;
float:left;
display:block;
margin:2% 0 0 2%;
}
#myslides h2{
font:normal 500 3.5em 'TradeGothicLTStdRegular';
color:#d8d8d8;
text-shadow:0px 1px 1px #2b2b2b;
float:left;
display:block;
margin:1% 2%;
clear:left;
}
#myslides p{
font:normal 500 2.5em 'TradeGothicLTStdRegular';
color:#ccc;
text-shadow:0px 1px 1px #2b2b2b;
float:left;
display:block;
margin:1% 2%;
clear:left;
width:90%;
}
#myslides p.url{
font:normal 500 1.5em 'TradeGothicLTStdRegular';
color:#ccc;
text-shadow:0px 1px 1px #2b2b2b;
display:block;
position:absolute;
bottom:6%;
right:2%;
/*-- float:right;
margin:2% 2% 1% 2%;
clear:left; --*/
width:90%;
text-align:right;
}
#myslides p.url a, p.url a:visited{
font:normal 500 1em 'TradeGothicLTStdRegular';
color:#ccc;
text-shadow:0px 1px 1px #2b2b2b;
display:inline;
margin:1% 2%;
width:90%;
text-decoration:none;
}
#myslides p.url a:hover{
text-decoration:underline;
}
#myslides p.url img{
width:10%;
margin:0;
vertical-align: bottom;
}
img.Left, img.left{
box-shadow:0px 0px 12px rgba(0,0,0,.5);
-moz-box-shadow:0px 0px 12px rgba(0,0,0,.5);
-webkit-box-shadow:0px 0px 12px rgba(0,0,0,.5);
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
float:left;
display:inline;
margin:1%;
text-decoration:none;
outline:none;
width:30%;
max-height: 50%;
}
img.Right, img.right{
box-shadow:0px 0px 12px rgba(0,0,0,.5);
-moz-box-shadow:0px 0px 12px rgba(0,0,0,.5);
-webkit-box-shadow:0px 0px 12px rgba(0,0,0,.5);
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
float:right;
display:inline;
margin:1%;
text-decoration:none;
outline:none;
width:30%;
max-height:50%;
}

/*----------SLIDER----------*/
div#myslides{
height:100%;
width:100%;
position:relative;
overflow:hidden;
clear:both;
}
div#myslides div{
height:100%;
width:100%;
float:left;
display:block;
clear:both;
position:relative;
}
div#myslides div.container{
max-height:85%;
width:100%;
position:absolute;
top:0;
left:0;
background:transparent;
}
div#myslides div.Brown{
background:url(background/brown.jpg) 0 0 repeat-x;
}
div#myslides div.Darkblue, div#myslides div.DarkBlue{
background:url(background/darkblue.jpg) 0 0 repeat-x;
}
div#myslides div.Green{
background:url(background/green.jpg) 0 0 repeat-x;
}
div#myslides div.Lightblue{
background:url(background/lightblue.jpg) 0 0 repeat-x;
}
div#myslides div.Orange{
background:url(background/orange.jpg) 0 0 repeat-x;
}
div#myslides div.Purple{
background:url(background/purple.jpg) 0 0 repeat-x;
}
div#myslides div.Red{
background:url(background/red.jpg) 0 0 repeat-x;
}

/*----------DOCK----------*/
#dock{
position:absolute;
z-index:99;
bottom:0;
left:0;
height:20%;
width:100%;
background:-webkit-gradient(linear, left top, left bottom, from(rgba(137,137,137,0.8)), to(rgba(54,54,54,0.8)), color-stop(.3,#333333));
background: -moz-linear-gradient(bottom, rgba(137,137,137,0.8), rgba(54,54,54,0.8));
box-shadow:-2px 0px 12px rgba(0,0,0,.6);
-moz-box-shadow:-2px 0px 12px rgba(0,0,0,.6);
-webkit-box-shadow:-2px 0px 12px rgba(0,0,0,.6);
border-top-left-radius:18px;
-moz-border-radius-topleft:18px;
-webkit-border-top-left-radius:18px;
border-top-right-radius:18px;
-moz-border-radius-topright:18px;
-webkit-border-top-right-radius:18px;
}
#dock div{
float:left;
display:inline;
border-right:dotted .11em #fff;
height:95%;
margin:5px 1% 0 0;
color:#fff;
text-shadow:0px 1px 1px #2b2b2b;
padding:0 1%;
overflow:hidden;
}
#dock div.dockleft{
padding-left:2%;
width:8%;
height:100%;
}
#dock div.dockcenter{
width:26%;
height:100%;
}
#dock div.dockright{
width:26%;
height:100%;
}
#dock div.dockfarright{
width:26%;
border-right:none;
height:100%;
}
#dock div div{
width:100%;
border:none;
height:100%;
margin:0;
color:#fff;
text-shadow:0px 1px 1px #2b2b2b;
padding:0 1%;
}
#dock img{
padding:1%;
}
#dock h3, #pagesidebar h3{
font:normal 500 2.2em 'TradeGothicLTStdBold';
color:#fff;
text-shadow:0px 1px 1px #2b2b2b;
float:left;
display:block;
margin:0 0 5px 0;
line-height:1em;
}
#dock span.temp, #pagesidebar span.temp{
font:normal 500 200% 'TradeGothicLTStdRegular';
color:#fff;
text-shadow:0px 1px 1px #2b2b2b;
float:left;
display:inline;
margin:1% 2%;
}
h3 span.addy{
clear:none;
font:normal 500 40% 'TradeGothicLTStdRegular';
color:#fff;
text-shadow:0px 1px 1px #2b2b2b;
display:inline;
float:right;
margin:1.3em 0 0 4em;
}
#dock ul, #pagesidebar ul{
list-style:none;
width:100%;
float:left;
display:block;
font:normal 500 1.6em 'TradeGothicLTStdRegular';
color:#fff;
text-shadow:0px 1px 1px #2b2b2b;
}
#dock ul li, #pagesidebar ul li{
margin:0 0 .1em 0;
padding-bottom:10px;
}
#dock a, #dock a:visited, #pagesidebar a, #pagesidebar a:visited{
text-decoration:none;
}
#dock a:hover, #pagesidebar a:hover{
text-decoration:underline;
}
#dock .youarehere, #dock a.youarehere:visited{
font:normal 500 1.7em 'TradeGothicLTStdLight';
color:#ccc;
text-shadow:0px 1px 1px #2b2b2b;
text-decoration:none;
display:inline;
position:absolute;
top:-33%;
left:2%;
background:transparent;
width:33%;
}
#dock a.youarehere:hover{
color:#1A1A1A;
text-shadow:0px 1px 1px #f4f4f4;
text-decoration:none;
background:#f4f4f4;
}
span.time, span.date{
font:normal 500 175% 'TradeGothicLTStdRegular';
color:#fff;
text-shadow:0px 1px 1px #2b2b2b;
float:left;
display:inline;
margin:0;
clear:left;
}
span.time{
border-top:dotted 1px #fff;
}
/*----------GCAL----------*/
.scroll ul, .scroll2 ul, .scroll3 ul, .scroll ul li, .scroll2 ul li{
height:100%;
}
.scroll3 ul li, .scroll2 ul li{
height:40%;
}
ul#ics-calendar-widget{
width:100%;
list-style:none;
}
ul#ics-calendar-widget li.item{
font-family:'TradeGothicLTStdRegular';
}
ul#ics-calendar-widget li.item a{
font-family:'TradeGothicLTStdBold';
}
div.scroll ul li:first-line{
font-family:'TradeGothicLTStdBold';
}
span.tiny{
font:oblique 500 12px arial;
color:#fff;
text-shadow:0px 1px 1px #2b2b2b;
}
div.scroll3 ul li a, div.scroll2 ul li a, div.scroll ul li a{
font:500 1.2em 'TradeGothicLTStdBold';
}
#dock div.scroll3 ul li{
padding-bottom:5px;
}

/*----------WEATHER/TIME----------*/
#pagesidebar{
width:100%;
height:100%;
background:transparent;
display:block;
position:absolute;
top:0;
left:0;
border:none;
}
iframe{
background:transparent;
border:none;
}

Security

Also, because I’m paranoid, I installed these security plugins and have a 50-character password safely generated by 1Password

• Audit Trail
• Invisible Defender
• Login LockDown
• Secure WordPress
• WP Security Scan
• WordPress Database Backup

You won’t be able to afford digital signage technology.

The school is also host to an international institute that focuses on marketing messages; specifically digital signage. They were thrilled that the school was going to jump onto the technology, but were stuck on the cost of existing platforms.

The real challenge was dropped on my plate at the end of a status meeting.

“The flatscreens are happening. Can you design a layout? And make it sustainable to manage?”

The digital signs are displayed on at least 15 52″ televisions in two buildings that run Chrome in full-screen. Each post is displayed for 18 seconds, and a dock at the bottom of the screen displays the time, weather, local events, academic events & campus events.

I wrote an entirely too long blog post that spells out each step and aspect of the entire operation.

In the middle of an 18 month website redesign that spanned 14 sites, I read about Yammer and realized that having an internal social network for the project would be incredibly useful to crowd source questions and reap the shared benefits of the answers. In addition to the new design and organization of the sites, we were taking on an entirely new web content management system—Seamless.

I created multiple networks to act as user groups for different software that is used by the institution, invited the appropriate users and started off with a few posts. Unsurprisingly, Yammer use took off within the marketing department—especially driven by interactive marketing.

Then we all received an email about a massive budget gap and the ensuing reorganization.

A Common Focus

Did you Yammer that yet? became a common refrain as announcements about server downtime or planned site maintenance would need to be known by everyone. We all hunkered down and were able to streamline communication through a single tool. Unexpectedly, emails were reduced—replaced by mentioning others in posts and direct messages. The weekly departmental update email slowly became less than weekly, as everyone already knew what was going on.

Distraction

Cats That Look Like Row Swanson, The Monkeys You Ordered, new additions to a shared iTunes playlist; the distractions provided by our Yammer community helped to defuse the sometimes tense situation in the office.

Comedy

Much of this fell into the distraction category, but looking beyond the value of distraction, personalities emerged. People who were otherwise fairly self-contained shared rather funny tidbits or hysterical links. Clearly everyone is a bit different in a professional setting, but it was enlightening and comforting to see actual, likable people emerge from the strangers with whom I spend my days.

A Safe Place

While the work-related posts were certainly incredibly useful and we all benefitted from the answers, the real value of Yammer came through when we first learned of the impending reorganization. Having a safe place to figuratively circle the wagons, take care of each other and act as a community really helped to soften the sustained barrage of layoffs and firings that spanned a number of weeks.

A Shared Experience

Yammer gave everyone a chance to be in the loop. The network was embraced for posting everything from software workarounds, PDFs of the newest brochures, relevant articles and planned server down time, to funny tumblrs and the latest whereabouts of food trucks. If one of us received news, we all had the opportunity to know. We were all able to share in the experience and use the community as a ballast as we negotiated the shifting corporate landscape. Together.

On June 15, I ordered AT&T U-verse internet for our new condo. They quickly sent a confirmation message for my self-install kit, with an activation date of June 23. I was puzzled as to why flipping on a port in an office would take eight days, but whatever. The modem and router arrived from UPS on Monday, June 20. Perfect.

Les, an installation tech came out on June 23 to do something–perhaps make sure we were wired from the box to our unit–even though it’s a self-install. He left me a voicemail as he was leaving because he said he wasn’t sure which line was our line. He said he would have come in to see if the line was toning in our unit, but he didn’t know which unit was our unit. Also said it would be a waste of his time to connect one, in case it was the wrong one.

There are only two units in our building.*

He said he didn’t see our name on the buzzer. Yet, he saw a buzzer labeled with the not our last name, and a buzzer that was not labeled.* My wife stayed home the entire day just in case he would need to be let in. He never tried.

I immediately called tech support, and they rescheduled for another technician to come out the next day, between 9:00AM and 11:00AM. My wife was forced to spend a second day off, at home.

No one came.

I called tech support again. The agent on the phone said that he was seeing some strange notes on our account, and that a computer glitch had caused the appointment to not actually be scheduled. I’m not sure if he thought he was speaking with his grandmother, but computers don’t have glitches. People mess up. So he rescheduled for a technician to come out between 11:00AM and 1:00PM.

No one came.

As of 2:45, still no one had come. I called tech support again. This time I was told that the appointment was actually scheduled for between 1:00PM and 3:00PM.

I was advanced to tier two support for some unknown reason. After 12 minutes, that agent determined he should submit a ticket to the central office to turn on our port, and that no one would need to physically come to our condo.

He said that our service would be turned on within four to 12 hours. I’m not holding my breath.

It’s now 3:30PM, and no one has come.

We’ve since gone over our iPhone data limit, and have had to pay for more data. I told the tech support agent that it’s not just widly inconvenient, but that these AT&T errors are now costing us money too. He said I would have to call back after my account was set up and ask for billing to see if they could issue a credit. I’m sorry, what?

I’ve just started interacting with @ATTCustomerCare and @ATTJason, hopefully they can make it better.

*I see a great opportunity to consult for AT&T. They have a tremendous need for development of deductive reasoning skills.

Armed with a grant from The Chicago Community Trust, they planned various forms of outreach, including budgeting $130,000 for a website and online directory.

After having an initial interactive branding meeting with them, I asked for a few days to see what I could whip up.

Combining the open source WordPress with its outstanding BuddyPress plugin gave me much of the functionality that was needed. After a few tweaks to emphasize the member searching and downplay the blogging, I presented the concept to the LMHPN leadership, and they were thrilled.

I put in some more time in customizing the theme and training content owners, and the site was ready to launch—ahead of schedule. Oh yeah, and for free.

They put that $130,000 into other means of community service & outreach.

The site features statics content pages, an expanded registration page and a search that queries the members’ specializations, locations, populations served & interests.