Saturday Workshop: All About Theming

Our Drupal site

Theming

News: Best New Drupal Themes | Customizations to Login Block

Before you start

Set admin theme to Garland (or something else safe) at admin/settings/admin. This way no matter how your new theme screws up you'll be able to disable or change the theme. However it does mean that in order to see the new theme you'll need to get out of the admin portion of the menu.

Some Alternatives (more detail on items 1-3 below)

1. Find one you like as is at themegarden.org/drupal6/
• Acquia provides some very nice themes but these are not available at themegarden so search for them at drupal.org: http://drupal.org/project/themes?text=acquia
2. Start with Zen and modify. Zen is extremely well documented and has won awards as a starting theme for Drupal. If you're interested in customization this is a place to start.
3. Roll your own - start with your own HTML and CSS that has been carefully thought out for drupal usage (breadcrumbs, navigation, login block, etc)
4. Buy a design package and use the program to customize your themes: Artisteer.com: Drupal Theming program for Windows (themes can also be generated for lots of other CMS such as WordPress)
• See some example code (.zip rt click and save) generated by artisteer and learn by looking at that!
• Package is $130 for drupal

1. Find one you like

Some thoughts on How to pick a theme

1. First go to to the themegarden.org to see lots of themes in action. Be sure to look at themes for Drupal 6 only. Then select a theme name from the side of the page and the whole page is redrawn with that theme.
2. In general - pick a theme that is close to what you want, at least in the ways that might be hard to change!
   • Header image - generally easy to change, unless the header image blends or continues into page background - then you might have to change both. The relative size of the header might be a little trickier to change
   • Columns - many 3 column can be made into 2, but not necessarily the other way around
   • Tabs - adding tabs if there are none would be very difficult; changing configuration of tabs might be difficult; if you anticipate using large numbers of tabs some themes will wrap in unattractive ways.
   • Floating vs fixed - although this can often be changed, might want to start with one that's the way you want it.
   • Whitespace - can be added in css
   • Tables vs css - css will be easier to change successfully - you may have to read site notes to figure out which kind of site it is
3. Once you find a theme you're drawn to, select the Project theme_name link found under Current Theme in the sidebar. This will take you to the drupal.org page and tell you more about that theme and how it was constructed (css or tables, fixed or floating, etc)
4. If you find one you like, go ahead and download it while you're on the drupal page. You can put multiple themes up on your site and try them out there.
5. Install the theme (see below)
6. Set admin theme to Garland (or something else safe) at admin/settings/admin.
7. Enable the new theme at /admin/build/themes and make it the default. Go to the home page by clicking on the top graphic to test the theme.
8. To customize the theme, go to admin/build/themes and select the configure button next to the theme you've downloaded

How to install Drupal Themes

Themes are installed just like modules except they are stored in .sites/all/themes instead of .sites/all/modules:

• download to your computer
• upload to the server
• use cPanel to extract
• you should end up with .sites/all/themes/new-theme-name

2. Start with Zen and modify (for self-study)

1. Read about it: http://drupal.org/project/zen
2. Read more about it: http://drupal.org/node/193318 and follow the getting started instructions
3. If you want to customize a different theme...
   1. Start with admin/build/themes and select the configure button next to the theme you've downloaded
   2. If you want to modify the code: look at these files for customizing
      1. drupal/sites/all/themes/xxx for downloaded themes such as zen
      2. drupal/themes/xxx for default themes such as garland
4. Variation on above - investigate the 960 grid system which facilitates complex grid layouts. Very cool!
   1. description of 960 grid system
   2. 960 informatin on drupal.org

3. OR... Roll your Own

Start with HTML and CSS and add in php code to turn it into a drupal theme