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
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)
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" />
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; ?>
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 {
59. 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()
61. 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.
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/
64.
65.
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
- 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