Creating a Theme From Scratch in Drupal

Document Sample
Creating a Theme From Scratch in Drupal Powered By Docstoc
					Creating a Theme From Scratch
           in Drupal
          Theming 101
Drupal Theme Structure
Modules, Themes, and Core
             Why to theme…
• Themes allow you to change the interface of
  your system without affecting the business
  logic or code that is providing the system
  functionality. Think of PAC and MVC design,
  the theme is the view or presentation layer of
  a web application.
       Step 1 – Create a Design
• Create a working design in HTML and CSS
   Step 2 - Create a Theme Folder
• Create a theme folder and place it in your
  drupal site’s theme folder
  – E.g. default/themes/example_theme
      Step 3a – Create a .info file
• Create a a .info file for your theme and save it
  into the theme folder you created.
  – E.g.
 Step 3b – Fill in .info required information

• Add the following information to the .info file:
                   Step 5
• Create a page.tpl.php file & dump your html
  code into the page and save it into the theme
  folder you created.
                     Step 6
• Create a style.css file and place all of your CSS
  code into that file and save it into the theme
  folder you created.
                   Step 7
• Remove all of your CSS code from the
  page.tpl.php file and remove all the
  information / text between the
  <head>….</head> tags.
                      Step 8
• Place this code between the <head> </head>
  tags, this will print out all of your styles, java
  script, page titles, etc…
                    Step 9
• At this point, you will need to place the
  following code, where your main content
  display area is in your design. This will print
  out page content and local menus that appear
  as tabs.
<div id=“content”>

                  Step 10
• In your theme, you should have an area for
  primary and secondary links defined. Replace
  the HTML code that you are using for these
  with this:
                  Step 11a
• You will need to define “Regions” that will
  display “Blocks” of content. By default you
  have the following regions:
• regions[left] = Left sidebar
  regions[right] = Right sidebar
  regions[content] = Content
  regions[header] = Header
  regions[footer] = Footer
11b – Add regions to .info
11c – Print the content of the region in you
page.tpl.php file, locate it where you want
         the content to be placed.

You just made a theme!
• Functions included in this file can be called in
  your theme. To override a function in Drupal
  such as the theme(…) function, you can copy
  the code for the theme function from and then paste it into
  your template.php file. You will need to
  append the name of your theme to the
  function and then modify it’s code to suit your
• Default node theme
• Custom template theme for a specific content
• You can create custom themes for each block
• Custom Front Page

Shared By: