Roll your own ... Theming
Info File || HTML file || CSS file
Getting Started Theming
Three Files to start with
- .sites/all/themes/mytheme/mytheme.info - this defines the theme and is required
- .../mytheme/page.tpl.php (page."tipple-fip") from an html file
- .../mytheme/style.css from a css file
The Info File
Format: text file
Adding this file is required for Drupal to "see" the theme and add it to the Admin/Theme area. This file describes to Drupal what features and capabilities your theme takes advantage of. Only the bold lines are required.
name = My theme
description = The theme for my site.
core = 6.x
engine = phptemplate
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[anything] = Anything (shows up in Site Bldg>Blocks)
features[] = logo
features[] = favicon
features[] = name
features[] = slogan
stylesheets[all][] = style.css
stylesheets[print][] = print.css
scripts[] = utilities.js
screenshot
= screenshot.jpg
Name, Core, Description
All Required.
Name is the human-readable name, but should closely match the name of the file which is how Drupal will name it.
Description is how other users will decide whether they want to use your theme - let them know what the purpose of it is and whether it is table or css based.
Core prevents themes from being loaded into the wrong version of Drupal.
Regions
- For each region you add, a choice is added in the drop down box on Admin > SiteBuilding > Blocks
- The defaults are left, right, header, footer, content
- You can add your own!! This allows you to add additional areas to your pages.
Features
- For each feature you add, a choice is added to admin>build>themes>settings
- The pre-defined defaults are : logo, name, slogan, mission, node_user_picture, comment_user_picture, search, favicon, primary_links, secondary_links but your theme doesn't have to provide all these.
Screenshot
a small image of what your theme looks like.
Stylesheets
as many as you want, but list them all here. Indicate whether they're for all views, or just print, etc. These are added to your header by using the print $scripts code. (see header info below in page.tpl.php)
Scripts
as many as you want but list them all here. These are added to your header by using the print $styles code.
Go on to HTML file || CSS file
Useful Resources for Developers
- Set admin theme to Garland (or something else safe) at admin/settings/admin. This allows you to experiment with a theme without losing admin capability if you've forgotten to include something
- Use Developer Module for assistance. Devel module allows you to hover over areas of the page and see the classes or tipple fips that are called out (and also generate users and content for debugging!)
- Download Devel Module from Drupal.org and it's related module Theme developer - both have to be included. Don't forget to enable the modules and set permissions for them
- Learn by seeing - look at other examples of tipple-fips
- artisteer.zip (artisteer - sample)
- oranges.zip (lullabot)
- garland (default theme for drupal - find at ./themes/garland/page.tpl.php)