Emma Jane at DrupalConDC2009
See http://dc2009.drupalcon.org/session/themers-toolkit for reference.
What was Emma most excited about?
What does Emma want us to do?
Stream of consciousness notes
Edited conclusions
Emma gave a great presentation yesterday to help us presenters gear up and focus down behind the scenes, but today it’s her turn to present present, and we can just enjoy the results.
True to Emma’s ideas on presenting, the gist should be boiled down to:
What was Emma most excited about?:
How to get set up to be a themer, with your own open source tools.
Audience said best tip: Bazaar. Komodo, Web Developer (I got a free book for that one!)
What does Emma want us to do?:
Find out what you need to get started, choose your own toolkits, get set up.
Stream of consciousness notes:
Packed room, I’m so smart for getting here early and getting juice for my laptop… and a place to sit.
Open source Drupal hat! And socks! So cool.
Themers get the ultimate control: you are like mini-gods. But like Spiderman with great control comes great responsibility…
Book! Front End Drupal! Publisher present. 4 free copies!
http://www.amazon.com/Front-End-Drupal-Designing-Developers/dp/0137136692
3 people fessed up as being theming experts: should share their ideas.What’s your toolkit?
Important files making up a Drupal 6 theme.
.info file: name-value pairs that provides info on theme…
tpl.php files … use php conditionals, print out variables…
template.php: the brains, the scripting, more advanced theming sessions will deal with it: “That’s where the love happens”.
Starter themes:
Zen is a great starter theme: verbose documentation right there in it. Gets you into the right frameset. Highly recommend starting with Zen. You can move on to another theme later on… you can move what you learn over to your own starter theme, maybe based on a grid approach.
Converting from Drupal 5.x and from flat HTML files is really straightforward.
Make your .info file, where the regions are defined… take a look at the most basic Drupal 6 theme, and match up where the differences are.
A couple of variables in template.php… In the Drupal Handbook there is a great upgrade guide, and there is a theming guide also which is great.
Top five tools
firebug
Only a couple of poeple in the room haven’t used it. Selection tool, shows html, css, dom inspector…
screen shot + testing services
Razar shots is a free service, gives you output in a range of different browsers. You can download them for docs. Browser Cam is a paid service but is very good.
devel module
Themer info. Set permissions so that real users don’t see broken page 🙂 It will inform as to which template file you are in, which ones you could use, all of the data about the object. Great for forms and for manipulating different fields. It can take you 3 or 4 levels into an array with a great clicky clicky tool.
design library
zotero allows you to create a design library, by note taking and saving tagged web pages, with their css pages.
grid systems
blueprint
960.gs
5 grids have drupal themes
yahoo, blueprint, 960, golden grid
Allows you to see the columns you can design in.
search: drupal / starter theme / grid
Using the grids, things are going to look “right” (exactly what you are looking for): a common vocabulary when you are working with an external graphic designer.
Revision control:
CVS (few) Subversion (most) Git (few). Emma likes Bazzar.
The distributed systems: you don’t need to be connected to the internet to use it. I can do all my work and commits, and when I have an internet connection I can push my work onto a repository. No work to set up centralized server unless you want to.
Emma wrote a tutorial on how she uses Bazaar. She runs Linux, but there are clients for other operating systems. You can do a lot with just a couple of commands.
Victor Kane edit: I personally use Vim + Konqueror or Eclipse for IDE; Web Developer plugin for Firefox;Â color scheme generators like http://colorschemedesigner.com/
Emma uses Vim!!!! Eclipse!!!
Someone’s using Netbeans with Drupal plugin; Java Linux, OS X and Windows
People love their IDE’s.
Lots of interesting questions and toolkit sharing at the end.
Great question: How to optimize the huge number of CSS files Drupal generates? Emma recommends using the Drupal CSS cache option which puts all the CSS files together in a compressed file, while allowing the themer to be able to separate their stuff into smaller files, without paying a performance penalty.
Another question about templates: Many modules now include template snippets you can copy over to your theme. “The big shiny”.
Another big shiny for Emma is the theme settings module which allows you to include more custom settings in your theme configuration form in admin.
Of the CSS grid systems, 960 is the best documented.