Ir’s been fun to do some redesign and alignment of the ds106 web sites. I’ve long had an interest in trying to make the ds106 Assignments site into more of a template that could be used to create similar sites, and that just got a little bit closer to possibility.

The entire 106 fleet is a WordPress multisite, the main site and the Daily Create site both use the Parallelus Salutation theme, so they were easier to coordinate; the one change was using incorporating the stressed 106 logo as part of the TDC. They both use menus at the top, and I’ve set up the rightmost ones to be “ds106” navigation ones.

ds106 new 250
tdc new 250

The ds106 Assignments site was a different beast. It is built on a 960c theme, one of the generic 960 grid system themes. I gave brief thought to trying to render it in Salutation, but it’s a hugely customized theme, and I was not even sure how to do taxonomy archives in Salutation. As is the design is a close-enough match.

The front page used a lot of graphics, and they were all hard code into place (to add a new assignment group meant a new graphics and the template edited):

assignments-front

The “Mission ds106” title was another graphic with its tagline “An anthology of new media projects” that really was not too explanatory. Not only that, I was unable to find the original graphics or even fonts used to modify those graphics.

Likewise, the interior page template used some hard coded icons, which looked nice, for the top navigation. Not easy to update or make more generalized:

assigne icon header

My plan was then to implement the built in WordPress menus for the top navigation, so it would be common on all pages (and be flexible to edit) and maybe to make those front page main icons also be menu driven.

I found a great resource in Justin Tadlock’s Goodbye, headaches. Hello, menus! — it was an open tab in my browser for like 2 weeks, and I think he even changed his blog theme by the time I got back to it.

Getting the WordPress menus implemented was easy, a few lines in my functions.php to enable creation of 2 new built in menus:

This enabled me to start organizing the menus in WordPress:

ass menus

I deleted the old stuff from the header.php template (adding in a new 106ish logo for the left side) and set in the code for basic menus:

What I ended up with was a completely unformatted menu (a simple list). It’s a start.

My first abortive effort was to try and copy out the CSS from the Salutation theme, but it is pretty convoluted and rested on some jQuery and other javascript code libraries to work. And it did not work.

Rewind. It should just be a matter of finding some other CSS and JS code to do drop down menus. They must be a dime a dozen or less. I came across Superfish, a jQuery driven set of code for managing drop down menus and a Capability post about how to add this to WordPress.

Kavin’s approach was to re-arrange the directory structure for the superfish plugin, but I left it as is, putting it in place inside a “sf” directory of my theme folder.

superfish

Including Javascript code in wordpress should no longer be done simply by pathing something into your header.php template, especially with so many themes, plugins, and wordpress itself using jquery, but by using the WordPress enqueue function which takes care of avoiding conflicts. It kind of looks complicated, but its not. For my case, I need to enqueue jQuery (using suggestion how to use the latest version from Google), the suckerfish js plugin, and the suckerfish CSS.

In functions.php of my theme, I will first add an action to do this when WordPress assembles the header stuff, which will put in my new function ds106_bank_scripts to the floe:

And I add my own function which more or less lines up the locations of my scripts and stylesheets (relative to the template directory) and calls them into action. This does the job of adding the JS and CSS to the header of my output pages.

Next I have to add a bit of javascript to the <head>…</head> to initialize via jQuery the menus

Then in the header template where I want to have the menus appear, I modify the call to the function so it uses the classes and wrapper the superfish plugin expects

And it worked! How exciting! I mean that. But they are ugly.

sf menus

I thought it would take a boat load of tinkering, but atrually it was just some changing of colors, background colors, font size, and I made the width wider to fit my menus. And Now the top menus come pretty close to matching the ones on ds106.us

ds106-menu-comp

And changing the menus is super easy by doing it inside the WordPress admin.

But I’m not done yet. I want to make the main front page, with the big graphic buttons, also menu driven. I created two new menus, for a left column and a right column, as I did above, and put them into my front page template

Again, by doing these in menus (the item, as custom taxonomies, come in like categories as options to choose from on the left) I can easily re-arrange them, and their text display can be edited right here:

menu left

With a little fiddling, I was able to change the styles so the left was nice and big. But how to include the icons? That was easy. First, in the menu admin screen options, I enable the box to show CSS classes:

screen options

This means, for each menu item, I can create its own CSS class.

menu css

I put the icons inside my theme folder, in an icons folder within an existing img folder
css

And I just need then to make some custom classes in my CSS sheet for the list item class that put the image in the background, and the link class needs to be offset from the size of the icon

And voila! The new assignments look, totally reconfigurable via wordpress menus. The one thing I would like to do is to make the clickable area for the link extend over the graphic. I should be able to do this via the links padding, but have been blocked by something else in the CSS>

ds106 assignments

I’m really jazzed about this. The next step is going to be how to roll this into options for a template, so much of this could be done as options if this were put on a different site.

Profile Picture for Alan Levine aka CogDog
An early 90s builder of the web and blogging Alan Levine barks at CogDogBlog.com on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *