1 of 26

Introduction to Theming

Converting a static HTML + CSS site template into a drupal theme.

2 of 26

3 of 26

Zenlike template

http://www.oswd.org/files/designs/3559/zenlike/

4 of 26

Zenlike template

http://www.oswd.org/files/designs/3559/zenlike/

5 of 26

Zenlike template

http://www.oswd.org/files/designs/3559/zenlike/

Rename index.html to page.tpl.php

6 of 26

page.tpl.php: Documentation

http://api.drupal.org/api/drupal/modules--system--page.tpl.php/6

7 of 26

page.tpl.php: View Source

http://api.drupal.org/api/drupal/modules--system--page.tpl.php/6

8 of 26

page.tpl.php: View Source

http://api.drupal.org/api/drupal/modules--system--page.tpl.php/6

9 of 26

page.tpl.php: Matt Vance's minezone cheat sheet:

http://www.minezone.org/blog/2009/02/04/drupal-6-theming-cheat-sheet/

10 of 26

the .info file

​

11 of 26

Upload theme

sites/[sitename]/themes/[theme_name]

​

12 of 26

Theme configuration

/admin/build/themes

​

13 of 26

Zenlike theme

14 of 26

Zenlike theme

bad paths for images and css

​

15 of 26

Regions

​

16 of 26

Zenlike template: Regions

http://www.oswd.org/files/designs/3559/zenlike/

17 of 26

Zenlike template: page.tpl.php

​

18 of 26

Zenlike template: page.tpl.php

replace <head>

​

19 of 26

Zenlike template: page.tpl.php

replace <head>

​

20 of 26

Site name/slogan - <?php print [VARIABLE] ?>

​

21 of 26

<?php print [VARIABLE] ?>

​

22 of 26

Menu - <?php print [VARIABLE] ?>

​

23 of 26

Menu - <?php print [VARIABLE] ?>

​

24 of 26

Zenlike theme

25 of 26

Subtheme

  • Build on an existing site framework
  • Don’t have to style every individual element
  • maintain the integrity of the original theme - can still use original theme
  • Broad frameworks like grids

26 of 26

the .info file: subthemes

http://drupal.org/node/441088

​

name = <your subtheme's display name>description = <whatever works for you>core = 6.xbase theme = <(folder)name of any core or contributed theme or subtheme, e.g. bluemarine>stylesheets[all][] = <subthemename>.css