header photo

via positiva

Styles On a Train

This week, Matt and I have been in Chicago working with the folks from After School Matters, an amazing organization that puts together tons of after school learning projects for the city's high school students. As part of the process, we took them through building Drupal modules, converting a static HTML/CSS design to an active Drupal theme, and so on. I'd never seen the latter in action (or at least, I'd never seen it done as quickly as Matt was able to) and I was impressed. So, I decided I'd do something I've been meaning to for a while.

Movable Type is a venerable blogging/web publishing tool that's been around since the early days of blogging. TypePad runs on it, and until I found Drupal, it's what ran Via Positiva as well. It has a lot of downsides, but one real strength is an active community of CSS designers cranking out new layout styles for it. Since Movable Type tends to have a very structured HTML output, and most people stick to skinning that with CSS, I always thought it should be relatively easy to make a Drupal theme that outputs the right MT-compatible HTML to use those styles.

So. On the train rides to and from the city, I did it. Most of the tricky stuff involved overriding certain Drupal theme functions in template.php to ensure our 'helpful' default styles didn't collide with Movable Type's. Once that was in place, though, I started downloading MT styles from sites like The Style Archive and dropping them in. Lo and behold... they worked!

A few styles are unhappy when they don't see VERY specific MT structures there (like the 'categories' sidebar) but the vast majority work nicely, and many even intelligently adjust to Drupal's flexible appearing-and-disappearing sidebars. The net result is that hundreds of existing Movable Type visual styles can now be used with Drupal.

It's a really awesome example of how Drupal's flexible templating system allows it to adapt, squeezing into more restrictive structures when necessary. And tinkering with it has helped me feel a bit more confident when messing around with complicated bits in the templating system. Hooray for open source!

styles.gif

There's a small handful

of people who seem to account for 80% (or more) of the best new ideas for Drupal - and you're consistently one of them Jeff.

This is really a great thing for people who are new to the platform and want to get something cool up and running quickly.

You've been Dugg

[[http://digg.com/software/Use_Movable_Type_styles_on_Drupal]]

Zounds!

I guess it's time to turn on caching. ;-)

Awesome

This is very good. Any ideas of how it might be integrated with the MySite module? I think I know.

I'd love to be able to let users select from an array of MT themes to stylize their personal page.

[[http://drupal.org/node/124408]]

Whats your site? MySite does

Whats your site? MySite does not check themes for validity in any way, but it should work normally.

Props

crazy stuff

This is very cool - thanks for sharing

While they are very pretty - I just don't really like the fixed width themes I have found so far but it is awesome that they work.

Thanks again

Brilliant idea

Suddenly we have some hundred additional themes (and may I say some beautiful ones) to "borrow". I assume there aren't any license conflicts between Drupal and Movable Type styles? Anyway, well spent time on the train :)

Ps. You have a typo in the link to The Style Archive.

No conflicts

I assume there aren't any license conflicts between Drupal and Movable Type styles?

It's important to note that I'm not distributing or bundling any Movable Type styles with the Gutenberg theme -- it's designed to output only the standard HTML markup necessary for those styles to work. So there's no licensing issue at all. Hooray!

fix your theme :) i use IE7

fix your theme :) i use IE7 and your theme is not compatibly to my IE. in firefox is ok.

A lot of web sites (not just

A lot of web sites (not just some drupal themes) aren't IE7 compatible.

IE7 (as IE6 was) is the nightmare of web designers - MS likes pain :-(

I'm a Mac guy...

...So until I have time to get BootCamp up and running, I can't really test on IE7. Sorry. :)

IE7 Question

So, what's this IE7? Is that some sort of web application? it is similar to firefox? Should I try it? My computer came with ubuntu from Dell... and I never heard of it. (/fud)

Are you joking? You never

Are you joking? You never heard from IE7? lol

Theres been an upgrade to

Theres been an upgrade to the movable type import module, a few issues resolved >:) even better

Not working with Drupal 5.3?

I loaded the Gutenberg theme plus different themes from http://www.thestylecontest.com/browser/ in a subfolder. But they are not showing up. Any ideas?

It's really working ?

It's really working ?

after school learning projects

I am looking for after school learning projects and with Google I ended up here. Thanks for the link to the folks from After School Matters, with a lot of information for high school students.

fix your theme :) i use IE7

fix your theme :) i use IE7 and your theme is not compatibly to my IE. in firefox is ok.

nice!

wow, nice blog jeff, i like ur template used, can u tell me where did you get this? or you just made this, i mean, you just customized this..
___________________________
texas whitetail deer hunting | texas fallow deer hunting

Interesting article. Drupal

Interesting article. Drupal has always interested me.

// Gräsklippare

Interesting article. Drupal

Interesting article. Drupal has always interested me.

// Gräsklippare

hats off

were you guys teaching the high school students a chicago for free?
dating ideas
dating advice

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote> <img> <i> <b> <strike> <h3> <h4>
  • Lines and paragraphs break automatically.
  • You may use [inline:xx] tags to display uploaded files or images inline.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Twitter-style @usersnames are linked to their Twitter account pages.
  • Twitter-style #hashtags are linked to search.twitter.com.

More information about formatting options

Miniblog

  • Totally got the third item in that list from @blakehall btw. He's the clever one! 44 min ago
  • There are two hard problems in CompSci: optimal cache invalidation, naming things, and off-by-one errors. 1 hour ago
  • OH: "Well, the Title title can just be the title, but reign_title can't be the reign title, or the title title." 4 hours ago
  • Know Drupal? Dig wrestling? Looks like the WWE is hiring... http://j.mp/bSu4pB 2 days ago
  • I want to be the Malcolm Gladwell of Drupal APIs. My breakout book will be named 'Clear Cache.' 4 days ago

SXSW Interactive 2011!