Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (12)
Similar to Theme Kickstart
Similar to Theme Kickstart (20)
Recently uploaded
Recently uploaded (20)
Theme Kickstart
- 1. Theme Kickstart - Converting a HTML/CSS Template to a Drupal Theme Peter Wolanin NJ Drupal meetup, July 7th, 2009 Š 2009, Acquia, Inc.
- 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)
- 12. Enable an Admin Theme. ?q=admin/settings/admin
- 15. Copy in templateâs les.
- 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?
- 23. Find/replace to x paths - background: url(content.gif) top left; + background: url(images/content.gif) top left;
- 24. Continue replacements -#sadrzaj { +#page {
- 25. Continue replacements -#sadrzaj { +#page {
- 26. Continue replacements -#sadrzaj { +#page {
- 27. Continue replacements -#sadrzaj { +#page {
- 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
- 37. Start links and regions
- 38. Start links and regions
- 39. 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.
- 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. 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 {
- 55. Search for a solution http:// ickr.com/photos/sovietuk/141381675/
- 56. Re-order columns, oat #sidebar-right { Before: - ďŹoat: right; $left + ďŹoat: left; $right $center #content { - margin-left: 135px; After: - margin-right: 240px; $left - max-width: 34em; $center + ďŹoat: left; $right + width: 34em; +#sidebar-right .content li { + text-align:left;
- 58. Theme hooks? http:// ickr.com/photos/avelino_maestas/2532426169/
- 59. 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()
- 60. Drupal tricks exposed http:// ickr.com/photos/alkalinezoo/32265389/
- 61. 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.
- 62. 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!
- 63. Learn more http:// ickr.com/photos/margolove/1252522330/
- 66. 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
- 67. http://www.drupalbook.com/ http://frontenddrupal.com/ http://www.packtpub.com/drupal-6-themes/book
- 68. Thank you! peter.wolanin@acquia.com This presentation is Š 2009, Acquia, Inc. Licensed: http://creativecommons.org/licenses/by-nc-sa/2.0/
Editor's Notes
- - Here are the tools you&#x2019;ll need to follow along and reproduce this
- - You have data (like the content of your nodes) in the database - you need to &#x201C;present&#x201D; 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&#x2019;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&#x2019;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&#x2019;t playing well with the CSS