Theme Kickstart

1,691 views

Published on

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

Published in: Business, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,691
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
65
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • - Here are the tools you’ll need to follow along and reproduce this
  • - You have data (like the content of your nodes) in the database
    - you need to “present” that data as html to site visitors
  • - An .info file which is in .ini (text) format.
    - Naming it .info lets Drupal find the file.
  • - An .info file which is in .ini (text) format.
    - A php file called page.tpl.php - this is a phptemplate file
    - A .css file with the default name style.css.
  • - If you want to contribute your theme to drupal.org it must be GPL or compatible (public domain, new BSD, etc).
    - For your own site starting from a Creative Commons licensed template is fine, but you can’t include it in drupal.org CVS as a project.
  • - Most templates will have a css file and an index.html file
    - these will be the basis for our style.css and page.tpl.php
  • - We need to get Drupal to recognize our new theme exists.
    - After enabling the theme we can figure out how to move forward.
  • - Put all your custom themes in sites/all/themes
  • - Most templates will have a css file and an index.html file
    - these will be the basis for our style.css and page.tpl.php
  • - with just the .info file (and the bonus a screenshot) our theme shows up on the admin screen.
  • - Having an administrative theme will allow us to admin the site even while our new theme is not yet functional.
  • - A theme with just a .info file use any and all default theme elements
    - This gives you an idea of what the html from Drupal looks like with no CSS.
  • - A theme with just a .info file use any and all default theme elements
    - This gives you an idea of what the html from Drupal looks like with no CSS.
  • - Put all your custom themes in sites/all/themes
  • - We now have the html, but are missing the CSS
  • - Correcting the CSS path makes gives us just the dummy content
  • - let’s open up the page.tpl.php that comes with system module
  • - We replace the hard-coded CSS with the printed content of a variable.
    - Same for other values in this part of the document.
  • - We replace the hard-coded CSS with the printed content of a variable.
    - Same for other values in this part of the document.
  • - We replace the hard-coded CSS with the printed content of a variable.
    - Same for other values in this part of the document.
  • - In the css url(foo.gif) gets renamed to url(images/foo.gif)
    - The browser bar now reflects our site name.
  • - What language was this in - anyhow, we can match the structure.
  • - What language was this in - anyhow, we can match the structure.
  • - What language was this in - anyhow, we can match the structure.
  • - What language was this in - anyhow, we can match the structure.
  • - What language was this in - anyhow, we can match the structure.
  • - What language was this in - anyhow, we can match the structure.
  • - What language was this in - anyhow, we can match the structure.
  • - What language was this in - anyhow, we can match the structure.
  • - What language was this in - anyhow, we can match the structure.
  • - Regions are labels for where blocks and other content appear
    - For a simple theme the defaults are likely to be sufficient
  • - In the template file we can call print $name; for each region defined in .info, or in tis case for the default regions.
  • - A little unexpected padding around the list items
  • - A little unexpected padding around the list items
  • - A little unexpected padding around the list items
  • - Zero out the padding and life is simple again
  • - We can get part of the way there with this simple change
  • - We can get part of the way there with this simple change
  • - We can get part of the way there with this simple change
  • - We can get part of the way there with this simple change
  • - We can get part of the way there with this simple change
  • - We can get part of the way there with this simple change
  • - Zero out the padding and life is simple again
  • - Add a node.tpl.php
  • - Add a node.tpl.php
  • - Zero out the padding and life is simple again
  • - Zero out the padding and life is simple again
  • - Apparently the extra wrapper div for the #content region isn’t playing well with the CSS
  • 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/

    ×