Theme Kickstart

2. Quick reality check: - Basic HTML knowledge (tags) - Basic CSS knowledge (id, class) - Text editor - Concept of a variable - No fear!

3. Themes turn data into html - the “presentation”. http://drupal.org/theme-guide/6 A theme is a collection of ﬁles that deﬁne the presentation layer.

4. A theme only needs one le. mytheme.info

5. Usually it has at least 3. mytheme.info page.tpl.php style.css

6. Starting from a template http://www.solucija.com/free-templates

7. What les did we get? Life_Is_Simple/images/content.gif Life_Is_Simple/images/footer.gif Life_Is_Simple/images/header.gif Life_Is_Simple/images/logo.gif Life_Is_Simple/images/menufooter.gif Life_Is_Simple/images/menuheader.gif Life_Is_Simple/images/menulink.gif Life_Is_Simple/images/rightcontent.gif Life_Is_Simple/images/rightfooter.gif Life_Is_Simple/images/rightheader.gif Life_Is_Simple/images/style.css Life_Is_Simple/images/Thumbs.db Life_Is_Simple/index.html

8. First steps! What is a hook? http://www. ickr.com/photos/seandreilinger/959870496/ http:// ickr.com/photos/avelino_maestas/2532426169/

9. Create a Directory. sites all themes life-is-simple Depending on your Drupal source, you may need to create sites/all/themes

10. Make the new .info le. name = "Life is simple" description = Example converted theme core = 6.x engine = phptemplate Oh, and I threw in a screenshot.png (approx 150x90 px)

11. ?q=admin/build/themes

12. Enable an Admin Theme. ?q=admin/settings/admin

13. Enable the theme...

14. New front page...

15. Copy in template’s les.

16. Front page progress...

17. One little edit later -<link rel="stylesheet" type="text/css" href="images/style.css" /> +<link rel="stylesheet" type="text/css" href="sites/all/themes/life-is-simple/images/style.css" />

18. What’s in Drupal core?

19. Replace the <head>

22. Move style.css up

23. Find/replace to x paths - background: url(content.gif) top left; + background: url(images/content.gif) top left;

24. Continue replacements -#sadrzaj { +#page {

28. Continue replacements

33. Continue replacements -#zaglavlje { +#header { -#logo { +#site-name {

34. The default regions. see: http://drupal.org/node/171224 regions[left] = Left sidebar regions[right] = Right sidebar regions[content] = Content regions[header] = Header regions[footer] = Footer Since our .info le has no regions de ned, the default values are added automatically.

35. Region name = variable. We need our Drupal content. It’s this easy! <?php print $left; ?> <?php print $right; ?> <?php print $content; ?> <?php print $header; ?> <?php print $footer; ?>

36. Start links and regions

40. CSS changed/added -#lijeva_kolona { +#sidebar-left { -#lijeva_kolona a, #lijeva_kolona a:visited { +#primary a, #primary a:visited { +#primary ul.links li { + padding:0 0; +} -#lijeva_kolona a:hover { +#primary a:hover {

41. Add the right region

42. Add the right region -#desna_kolona { +#sidebar-right {

43. Add the right region -#desna_kolona { +#sidebar-right {

44. Right needs xes too. Looking at the page source we can see how to select the “text” styling class for the right: -.text_desno { +#sidebar-right .content { But it still looks wrong because the titles of blocks are H2 instead of H3.

47. Right needs xes too. Looking at the page source we can see how to select the “text” styling class for the right: -.text_desno { +#sidebar-right .content { But it still looks wrong because the titles of blocks are H2 instead of H3. -h3 { +#sidebar-right h2 {

48. Right needs xes too. Looking at the page source we can see how to select the “text” styling class for the right: -.text_desno { +#sidebar-right .content { But it still looks wrong because the titles of blocks are H2 instead of H3. -h3 { +#sidebar-right h2 {

49. Add the content!

50. Markup doesn’t match node.tpl.php The original template has two nested DIVs to make the top and bottom of each content item.

51. Add template for nodes

52. First round CSS changes -.content_title { +.content-title { -#content_title a, #content_title a:visited { +.content-title a, .content-title a:visited {

53. First round cont’d -.srednja_kolona { +#content { margin-left: 135px; margin-right: 240px; max-width: 34em; +} +#center-content .node { background: url(images/content.gif) top left; -.text { +#center-content .text {

54. Search for a solution http:// ickr.com/photos/sovietuk/141381675/

55. Re-order columns, oat #sidebar-right { Before: - float: right; $left + float: left; $right $center #content { - margin-left: 135px; After: - margin-right: 240px; $left - max-width: 34em; $center + float: left; $right + width: 34em; +#sidebar-right .content li { + text-align:left;

56. Theme hooks? http:// ickr.com/photos/avelino_maestas/2532426169/

57. Theme functions • phptemplate ﬁles (*.tpl.php) are sometimes easier to lay out, but cost some performance. • When the transformation of data to html requires a lot of logic (loops or conditionals) like forms. • There is a default like theme_item_list($list). • This is invoked as theme(‘item_list’, $list). • you can make a template.php ﬁle in your theme and override as hook_item_list() where hook = theme name, e.g. lifeissimple_item_list()

58. Drupal tricks exposed http:// ickr.com/photos/alkalinezoo/32265389/

59. Don’t start from scratch • Drupal 6 provides for easier sub-theming. A sub- theme can jsut be a .info ﬁle and a little extra CSS. • For developing a custom theme, ﬁnd or develop a well-functioning theme as a starting point. E.g. Zen, Dreamy, even Blue Marine. • Beware that the core Garland theme is considered hard to use as a basis for custom themes. • Ask for help in #drupal or on drupal.org.

60. Caching, browsers, etc. • Rebuild the theme registry by submitting the modules page or using cache-clear button. • Use the theme developer module. • Make sure CSS and JS aggregation are off. • Make sure block and page caching are off. • Use browsershots.org or use VMs to multiple OSs/browsers on one machine. • Use Firebug!

61. Learn more http:// ickr.com/photos/margolove/1252522330/

62. Other presentations • http://www.xalking.com/blog/psd-drupal-theme- tutorial-part-i (also parts II and III) • http://www.slideshare.net/rcross/converting-static- html-to-drupal-theme-presentation • http://www.slideshare.net/guest663fb9/bdug- drupal-themes-presentation • http://www.slideshare.net/laurennroth/drupal- theming-an-introduction-1640920

63. http://www.drupalbook.com/ http://frontenddrupal.com/ http://www.packtpub.com/drupal-6-themes/book

Theme Kickstart

Peter

Theme Kickstart