Learn Drupal Theming without a book - Basic to Advanced Videos
Some videos showing how to do theming for Drupal 7, from basics to quite advanced stuff. Contents are as below
1. Introduction to this video Course
2. Themes and Drupal: What are themes? What do themes do? What don't themes do?
3. Creating a sub theme: This is how easy it is to NOT hack core!
4. Working with regions
5. Template files: overriding the markup on your page
6. Preprocess functions: introducing template.php to add new variables to use in template files
7. More preprocessing: a CSS example, and other things to do with preprocess
8. Theme functions: the alternative to template files (and how to use them)
9. Switching between template files and theme functions
10. A special case example: Theming a view
11. Render elements and arrays
12. Theming forms with hook_form_alter
13. Using the #states property to show and hide form elements dynamically
This screencast introduces *themes*:
* What themes do
* Setting the theme on your site, and installing new ones
* Some words about theme engines
* Presentation stuff done by modules, such as block configuration and field display
* Point-and-click tools for theming (Sweaver, Skinr and Livethemer)
* Aggregating and caching CSS and JS
* Don't hack themes! Create sub themes. Useful links:
This screencast shows how easy it is to create a sub theme, so you don't have to hack core. This is done by creating a new folder in your sites/default/themes (or sites/all/themes) directory, and then adding a MYTHEME.info file. This should be populated with: * name = MY THEME * description = MY THEME DESCRIPTION * core = 7.x * base theme = MY_BASE_THEME_MACHINE_NAME You should also have any regions declared. The easiest way to do this is just to copy-paste from the base theme (and tweak if you need to). The screencast also shows how to add CSS files: * You can add new CSS files by adding lines like stylesheets[all] = css/MYCSS.css. * If the CSS file name (folder irrelevant) matches any existing CSS file, your file will replace the old one. * Note that CSS files added like this will be loaded on every page load. Finally, this screencast explains that you should probably not use Bartik as your base theme, since you will have to reset a lot of its CSS. Rather you want to work with a theme made to be overridden. A good place to start is the Zen theme, and then you can also use the Zenophile module to easily create new sub themes with all extra steps included! (When you have gotten used to theming you probably want to use some other base theme, but then you will know more about theming than I do.) Useful links: drupal.org/project/zen drupal.org/project/zenophile drupal.org/project/themesThis screencast shows an alternative – and better – way of overriding small parts of CSS. Instead of overriding the entire CSS file, you can simply add your own file with selective overrides. Pretty smart, when you think about it (since you can continue to rely on the original styling for all the things you *don't* override).This screencast shows how to add new regions to your sub theme (or change the existing ones). This is done in three steps: 1. Add a line regions[REGION_MACHINE_NAME] = REGION HUMAN NAME to your .info file 2. Copy the page.tpl.php file from the base theme to your sub theme 3. Add at some suitable place in page.tpl.php, preferrable wrapped by some HTML markup and maybe an if statement. If you don't declare any regions at all, nine default regions will be added: page_top, page_bottom, content, header, highlight, help, sidebar_first, sidebar_second and footer. (The 'featured' region is not included – sorry for the miss in the recording!) If you declare any regions, you must declare page_top, page_bottom and content, because Drupal requires these to work properly. That's it!