Jeff McClurken and I have been working on a project for his History of American Technology and Culture course that I am pretty excited about. I’m digging this one in particular because it highlights some of the unique possibilities of building an exhibit of student research in WordPress Multi-User. But before I get started, I should note that this course has a long tradition of experimentation and that this incarnation is just the latest iteration in a long line of online presentations.  Jerry Slezak and Jeff have explored everything from Netscape Composer back in the day to MediaWiki last year. But we all knew that when I got my hands on this mother it would be WPMu time, right? Right. So let’s proceed.

Here’s the deal, there are  21 students in this class, each of which will be thoroughly investigating a technology of their choice.  The range of which is fascinating, this year’s group moves from the zipper to toilet paper to the mobile phone to global positioning systems (with a wide range in between). I love the array of technologies from various moments in American culture, it makes for a rich and complex understanding of the very idea of what a technology is and how it relates to our culture at any given moment. McClurken rocks! A number of years back everyone in the course would make their own Netscape Composer sites—many of which were quite good. One of the issues with this approach—beyond the fact that Netscape Composer is now outdated—was that a wide range of different layouts and presentations often made it difficult to present and navigate the research as the larger product of a course. Although, it does preserve and present the individual’s research project quite nicely.

More recently MediaWiki was used, and I think their were some improvements there, but for me MediaWiki is increasingly becoming a bear between spam, a lack of a user-friendly text editor, and a brand new formatting language—however basic.  In fact, I am more and more convinced MediaWiki is a technology of extremes–it is really only useful for huge projects with hundreds or thousands of participants, or just one.  The middle ground is often far more work and maintenance than need be, and do feel free to fight me on this—I’m feeling ornery and could use a good throw down. What’s more, while getting one’s own work out of MediaWiki isn’t difficult, it’s having your own MediaWiki to post it in that may prove impossible (and here’s where a project like this in Wikipedia may be interesting–if not difficult). That said, it’s easy enough to reformat a series of MediaWiki pages for a blog or straight HTML, but there is some additional work involved and we just added several more steps.

Given my sense of the limitations of these two options, and thanks to Jeff’s willingness to experiment, I suggested we actually build the exhibit of student research in UMW Blogs with a customized theme. The logic is as follows; once each student selects the technology they will be researching, they create their own blog with the technology name in the subdomain. For example, a student researching the Birth Control Pill would create a blog along the lines of this URL:  http://thepill.umwblogs.org/. After that, we make available a lightly hacked theme that every student in the class will use to provide a consistency of templates across the 21 students’ research sites. As for the content, Jeff provided the class with specific guidelines outlining the aspects of the technology they need to research, and by formalizing these elements as pages within their own sites we came up with some rather simple steps for creating their site using this class-wide template (you can see them here) .

In other words, the 21 different students create their own blogs wherein they publish their research according to a specific format, they choose a common theme (which is lightly hacked) that creates and over-arching means of navigating the work of the entire class. The homepage is simply a blog Jeff created which contains the iconic images that link to each of the student’s research, along with information about the contributors and an about page. What’s nice about this is that each of the blogs are independently administered and created by the students, so they can export their work as they see fit, or even import it into another blog or portfolio space and organize and theme it as they want.

What’s so cool about this in my mind is that it takes so little effort, I used slightly hacked K2 theme to give the sense of consistency amongst 22 different blogs, and the ability to move easily amongst the distributed research is powerful because the illusion of some kind of visual whole is preserved—while the fact that it’s an individual’s own research that they control remains intact. The students’ research and the exhibit site are still works in progress at this point, but it should be done within the next couple of weeks, and I’ll probably be blogging it again. But, in the mean time, if anyone is interested in reading about the simple theme hacks I used to accomplish this, take the jump with the link below.

I stuck with K2 because I know it inside and out, and I still think the theme is rather elegant an simple in its layout, even if over-used. To make this theme a unique option within UMW Blogs, I simply put a new screenshot.png file in the theme with a shot of the new theme as well as added the following to the top of the styles.css file (what I added is in red):

/*
Theme Name: American Technology and Culture Class Theme
Theme URI: http://getk2.com
Description: Configure from the K2 Options Panel. Visit the support forums, 
the wiki or the bug tracker.

Developed by Michael, Chris, Zeo, 
Steve and Ben Sherratt. 
Protected by GPL.
Version: 0.9.1
Author: Various Artists
Author URI: http://binarybonsai.com

CSS Documentation: http://k2.stikipad.com/docs/show/CSS+Overview
*/

So that will take care of distinguishing this class specific themes from an existing K2 theme.

Now, the only hacks I used were in the header and CSS, I basically created an additional navigation bar in the top-left corner of the header that would show up for anyone that is using this specific theme. There are probably better ways to do this (and I would love recommendations) but I used Suckerfishes Multi-level Drop Down Navigation bar CSS generator. I actually only need one level, but I liked the drop down and that they created the CSS for me—there is also an accompanying WordPress Plugin, but I didn’t see the need for it with this hack.

So, I generated some CSS and copying it into the bottom of the hacked K2’s Style Sheet (style.css). After that, I just tweaked it a bit, and while I’m sure I don;t need all of the CSS below, it was easy enough to generate and who am I to waste good CSS that I can’t write:

#suckerfishnav {
    background:#333 ;
    font-size:12px;
    font-family:'Trebuchet MS', Verdana, Sans-Serif;
    font-weight: normal;
    width:55%;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:40px;
    padding:0;
    border:1px solid #aaa;
    margin:0;
    width:55%;
    }
#suckerfishnav a {
    display:block;
    color:#ffffff;
    text-decoration:none;
    padding:0px 15px;
    }
#suckerfishnav li {
    float:left;
    padding:0;
    }
#suckerfishnav ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:142px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:1px solid #666666;
    }
#suckerfishnav li li {
    width:140px;
    border-bottom:1px solid #666666;
    border-left:1px solid #666666;
    border-right:1px solid #666666;
    font-weight:bold;
    font-family:'Trebuchet MS', Verdana, Sans-Serif;
    }
#suckerfishnav li li a {
    padding:5px 5px;
    width:140px;
    font-size:11px;
    color:#fff;
    }
#suckerfishnav li ul ul {
    margin:-33px 0 0 120px;
    }
#suckerfishnav li li:hover {
    background:#fff;
    }
#suckerfishnav li ul li:hover a, 

#suckerfishnav li ul li li:hover a, 

#suckerfishnav li ul li li li:hover a, 

#suckerfishnav li ul li li li:hover a {
    color:#333;
    }
#suckerfishnav li:hover a, 

#suckerfishnav li.sfhover a {
    color:#333;
    }
#suckerfishnav li:hover li a, 

#suckerfishnav li li:hover li a, 

#suckerfishnav li li li:hover li a, 

#suckerfishnav li li li li:hover li a {
    color:#fff;
    }
#suckerfishnav li:hover ul ul, 

#suckerfishnav li:hover ul ul ul, 

#suckerfishnav li:hover ul ul ul ul, 

#suckerfishnav li.sfhover ul ul, 

#suckerfishnav li.sfhover ul ul ul, 

#suckerfishnav li.sfhover ul ul ul ul {
    left:-999em;
    }
#suckerfishnav li:hover ul,

#suckerfishnav li li:hover ul, 

#suckerfishnav li li li:hover ul, 

#suckerfishnav li li li li:hover ul, 

#suckerfishnav li.sfhover ul, 

#suckerfishnav li li.sfhover ul, 

#suckerfishnav li li li.sfhover ul, 

#suckerfishnav li li li li.sfhover ul {
    left:auto;
    background:#333;
    }
#suckerfishnav li:hover, 

#suckerfishnav li.sfhover {
    background:#ffffff;
    }

After that, I went into the header.php file and added the following lines unordered list with a tab of nested links for the drop down menu (everything I added is in red, and the links that show up below shoudl actually be a href link HTML, I just can;t get the code to paste in this post correctly:

		


>

	

            

		
Exhibit Home
		
About
		
Contributors
		
Featured Technologies
			

				
The Zipper
				
				
The Linotype
				
				
The Colt Revolver
				
				
The Mobile Phone
				
				
Technicolor Film
				
View more here
				
				
		
		
                
American Technology and Culture ##Notice the link in the header has been removed.
		
An Exhibit of Student Work

		

If you’re still following you’ll notice two things about the code above, first I actually included all 21 sites for the featured technology drop down menu. I abandoned this because when the drop down menu goes beyond the header and into the content area I could no longer click on the links–and it looked all weird. (Anyone know of a fix for this?) So, I decided to limit the featured technologies to five, and leave a “View more here” link as the sixth menu item. What I would like to do—but it’s actually beyond my abilities—is to write a little PHP script that randomizes those five featured links from the 21 available links so that every time someone hits that drop down menu, five random technologies get linked to. Not sure how difficult this would be, and I may try to bother a few folks if time allows—anyone have some pointers?

The other thing I did here is got rid of the link to the title of the blog in the header. I only did this because I already have an “Exhibit Home” tab in the new navigation bar that brings users back to the homepage.

Well, that’s just about it, all very, very basic hacks. I guess the only other one is the setup for the front page of the exhibit site which is jut a hacked template that gets rid of the sidebar and extends the content space from the 500px block on the left to the entire 780px space of the template. This was simple, I just created an alternative style for what K2 calls the #primary content area (I titled it #primary2) and added it to the styles.css file. The new style for this are looks as follows:

#primary2 {
	width: 780px;
	float: left;
	padding: 20px 0 10px;
	margin: 0 5px 0 5px;
	display: inline;
	}

After that, I just hacked a new page template that looks like the following and selected that as the template for the front page of the exhibit site. It looks like this:

'>
',''); ?>

		


	
'.__('Pages:','k2_domain').' ', '
', 'number'); ?>


 


 
 


 
	Notice there is no get_sidebar call here :)
 

You’ll notice above that the div id is actually primary2 not primary, which changes the width of the content area in K2. Also, you might notice I deleted the get_sidebar PHP call which basically gives me the single page layout you see on the homepage of the exhibit here.

It may seem like a lot to some, but anyone who knows anything about code knows that this is the most basic of hacks, and that’s what I like about it. It’s dead simple, and the effect is rather powerful—it’s kind of like the Dude’s rug, it really brings the room together.