theming

Sweaver: a visual interface for tweaking your Drupal 6 theme

For the upcoming release of Conimbo, a Drupal distribution we're building at One Agency, we needed an easy and attractive way to theme your website without knowing anything of CSS. Having the opportunity to experiment once and a while during our free day at work, one of our colleagues started playing around with jQuery and manipulating the properties directly on the frontend - much like the Themebuilder created by Drupal Gardens, which he used as inspiration. After a while, I joined the coding part and sweaver was born - if you really want to know where the name comes from, that's all explained on Drupal.org.

Writing sweaver was interesting because of three reasons:

  • jQuery: we now probably know the jQuery manual by heart since we've had to look up a lot of new tricks to manipulate all kinds of stuff: iterating through all parents of a css selector, show/hide/close/open tabs and sliders, find out out the type of a selector and keeping it all manageable in a nice interface. It's been a tremendous ride so far and I'm pretty sure we've not reached the end of it.
  • CTools: sweaver uses the CTools plugins and exportables functionality. This means developers heaven both for us as maintainers, but also for other drupal people out there wanting to write their own plugin for this module. We're still into beta phase right now, so we might even use other functionality like object caching, Ajax and form tools.
  • Themes: we've learned that creating a re-usable theme isn't that easy, which is not even related to Drupal. Technology like cufon is fun, but clashed with our module. Switching to @font-face was something we've planned, but now got implemented faster. And I personally learned a lot of cool css tricks, but I'll stick with coding though :)

Interested and want to see how it looks like ? You can watch two video's we've created: a basic introduction and another where we show you how I've used the module to rebuild my own website. There is also a demo site where you can login and play around with it - not all plugins are enabled, but you should be able to create beautiful themes or hideous creatures :)

Downloads and more documentation is available on the project page on Drupal.org. It's important to know that we're still in development, so there are things that still act funky and might change completely during commits before a first release. Happy theming!

Pimping the CCK display fields UI

Ever dreamed of having a node template with only this in it: print $content; ? Well, my sandbox site currently runs a patched version of CCK which does the following: order the fields on every display, not when managing them. You are also able to render the fields in what we call node regions. Screenshots and a first patch is available at the end of this post.

Rendering fields

In the UI of CCK we all know right now, it's possible to set the order of the fields on the 'manage fields' tab. This affects the order on the node form and on the full node, teaser etc view. Since the arrival of http://drupal.org/project/nodeformcols, it's easier to have a more finer control of the node edit form and we wanted to have that same control over the full node, teaser, sticky view .. Adding a weight property wasn't that hard to accomplish. You can see that the order of fields is different in those 3 contexts on the sandbox site. We're still looking howto affect search results too ..

Node Regions

To make our themers happy, we added node regions, so it's easier for them play around with the fields while creating their views, teasers, full nodes etc. They can play with 5 regions without having to create one single template file. Only CSS, that's what they were hired for in the first place :) If you look at the sandbox site, you'll see that with those regions, a full view vs sticky looks different, only through the magic of css.

Extra fields

In the version we currently have at work, we are able to add extra fields with custom formatters. It resembles a bit like the 'content_extra_fields' hook you can currently implement. This gives us the benefit to render the title beneath an image for instance. In the next few days, we'll be looking on howto to extend that functionality in the CCK module.

Patch

We won't release this as a module or as a fork of CCK, the best way to contribute is to release a patch of course. We're still cleaning up the code a bit, but a first version is available. Apply it against the 6--2 branch of CCK - latest dev will probably work too. As soon as we think the patch is clean, we'll post it in the issue queue of CCK. In the meantime, if you have any questions or suggestions, ping us on IRC (swentel, stalski or zuuperman).

Theming is done

Creating a cool layout isn't easy, especially if you also want a tableless layout with css. And I'm not that talented to create a new template in a few hours which is funky and 'web 2.0' enough to publish. So I just used my old template and created a new theme for my drupal installation. I'm pretty satisfied with it and testing on firefox and internet explorer went pretty smooth. I personally like the image galleries which use the complete viewport of your browser, so no problem with huge pictures from now on. The only thing left is adding next and previous buttons when browsing through a gallery looking at individual pictures.

Update Jul 3, 10:36 » Next & previous buttons work on the image galleries!

In the meantime, look around and if you encounter some sort of layout problem, let me know!