Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Theme Kickstart

1.844 visualizaciones

Publicado el

A presentation showing the conversion of a html+css template to a simple Drupal theme. Theme files can be found at http://groups.drupal.org/node/23694#comment-83107

  • Inicia sesión para ver los comentarios

Theme Kickstart

  1. 1. Theme Kickstart - Converting a HTML/CSS Template to a Drupal Theme Peter Wolanin NJ Drupal meetup, July 7th, 2009 © 2009, Acquia, Inc.
  2. 2. Quick reality check: - Basic HTML knowledge (tags) - Basic CSS knowledge (id, class) - Text editor - Concept of a variable - No fear!
  3. 3. Themes turn data into html - the “presentation”. http://drupal.org/theme-guide/6 A theme is a collection of files that define the presentation layer.
  4. 4. A theme only needs one le. mytheme.info
  5. 5. Usually it has at least 3. mytheme.info page.tpl.php style.css
  6. 6. Starting from a template http://www.solucija.com/free-templates
  7. 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. 8. First steps! What is a hook? http://www. ickr.com/photos/seandreilinger/959870496/ http:// ickr.com/photos/avelino_maestas/2532426169/
  9. 9. Create a Directory. sites all themes life-is-simple Depending on your Drupal source, you may need to create sites/all/themes
  10. 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. 11. ?q=admin/build/themes
  12. 12. Enable an Admin Theme. ?q=admin/settings/admin
  13. 13. Enable the theme...
  14. 14. New front page...
  15. 15. Copy in template’s les.
  16. 16. Front page progress...
  17. 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. 18. What’s in Drupal core?
  19. 19. Replace the <head>
  20. 20. Replace the <head>
  21. 21. Replace the <head>
  22. 22. Move style.css up
  23. 23. Find/replace to x paths - background: url(content.gif) top left; + background: url(images/content.gif) top left;
  24. 24. Continue replacements -#sadrzaj { +#page {
  25. 25. Continue replacements -#sadrzaj { +#page {
  26. 26. Continue replacements -#sadrzaj { +#page {
  27. 27. Continue replacements -#sadrzaj { +#page {
  28. 28. Continue replacements
  29. 29. Continue replacements
  30. 30. Continue replacements
  31. 31. Continue replacements
  32. 32. Continue replacements
  33. 33. Continue replacements -#zaglavlje { +#header { -#logo { +#site-name {
  34. 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. 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. 36. Start links and regions
  37. 37. Start links and regions
  38. 38. Start links and regions
  39. 39. Start links and regions
  40. 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. 41. Add the right region
  42. 42. Add the right region -#desna_kolona { +#sidebar-right {
  43. 43. Add the right region -#desna_kolona { +#sidebar-right {
  44. 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.
  45. 45. 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.
  46. 46. 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. 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. 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. 49. Add the content!
  50. 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. 51. Add template for nodes
  52. 52. First round CSS changes -.content_title { +.content-title { -#content_title a, #content_title a:visited { +.content-title a, .content-title a:visited {
  53. 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. 54. Search for a solution http:// ickr.com/photos/sovietuk/141381675/
  55. 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. 56. Theme hooks? http:// ickr.com/photos/avelino_maestas/2532426169/
  57. 57. Theme functions • phptemplate files (*.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 file in your theme and override as hook_item_list() where hook = theme name, e.g. lifeissimple_item_list()
  58. 58. Drupal tricks exposed http:// ickr.com/photos/alkalinezoo/32265389/
  59. 59. Don’t start from scratch • Drupal 6 provides for easier sub-theming. A sub- theme can jsut be a .info file and a little extra CSS. • For developing a custom theme, find 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. 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. 61. Learn more http:// ickr.com/photos/margolove/1252522330/
  62. 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. 63. http://www.drupalbook.com/ http://frontenddrupal.com/ http://www.packtpub.com/drupal-6-themes/book
  64. 64. Thank you! peter.wolanin@acquia.com This presentation is © 2009, Acquia, Inc. Licensed: http://creativecommons.org/licenses/by-nc-sa/2.0/

×