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:
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!)
Find out what you need to get started, choose your own toolkits, get set up.
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!
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”.
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
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.
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.
zotero allows you to create a design library, by note taking and saving tagged web pages, with their css pages.
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.
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.