Them Ing Drupal Intro eBook 2nd Ed

8/3/2019 Them Ing Drupal Intro eBook 2nd Ed

http://slidepdf.com/reader/full/them-ing-drupal-intro-ebook-2nd-ed 1/48

Theming Drupal 6Theming Drupal 6

By Emma Jane Hogbin

www.designtotheme.com

Don’t forget to register now for the first-everResponsive Web Design for Drupal Workshop.Class starts December 1.

For more information, and to register, click on the linky link below:http://designtotheme.com/workshops/responsive-web-design-drupal

http://designtotheme.com/workshops/responsive-web-design-drupal




Table of Contentsable of Contents

Theming Drupal 6...................................................................................................................................................1Introduction...............................................................................................................................................................4

Skills Summary...........................................................................................................................................4Page Elements & HTML Frameworks ............................................................................................................5

Design Tools.................................................................................................................................................5Creating Designs.........................................................................................................................................5Designing for Drupal.................................................................................................................................7Task Summary...........................................................................................................................................12

A Basic Drupal Page..............................................................................................................................................13Define Your Theme..................................................................................................................................13Template Variables..................................................................................................................................14Theme Regions..........................................................................................................................................15

Content.........................................................................................................................................................16Adding Style Sheets................................................................................................................................17Upload and Test Your Theme.............................................................................................................17Task Summary...........................................................................................................................................18

Inserting Navigation.............................................................................................................................................19Conditional Output.............................................................................................................................................20Base (or Starter) Themes....................................................................................................................................21

Evaluating Starter Themes..................................................................................................................22Zen Theme..................................................................................................................................................22960 Grid System.....................................................................................................................................24Task Summary..........................................................................................................................................24

Template Files .......................................................................................................................................................25The Template File node.tpl.php........................................................................................................25Node Template Variables....................................................................................................................26Displaying Content with More Precision.......................................................................................28Accessing Content in the $node Object.......................................................................................30Additional Template Files.....................................................................................................................31Task Summary..........................................................................................................................................32

Customizing Blocks.............................................................................................................................................33

Theming Blocks........................................................................................................................................33

Theming Drupal: A first timer’s guide Page 2 www.designtotheme.com



Collapsible Regions................................................................................................................................34Sharing Your Theme............................................................................................................................................35

Licensing......................................................................................................................................................35Selling Themes.........................................................................................................................................35Contributing Themes to the Drupal Project................................................................................36

Summary..................................................................................................................................................................37Appendix A: Designing with Grids ...............................................................................................................38

Grid Resources..........................................................................................................................................38Task Summary..........................................................................................................................................39

Appendix B.............................................................................................................................................................40About the Author...................................................................................................................................................41Responsive Web Design Workshop.............................................................................................................42Design to Theme Catalogue............................................................................................................................44About Design To Theme....................................................................................................................................47

Accolades....................................................................................................................................................47




IntroductionIntroduction

In this workbook you will learn the steps required to transform a design mockup into aDrupal theme. No more relying on programmers. You’re now in control. Whether youwant to build and sell your own designs, or you're a newly hired designer at a Drupal Webdevelopment shop, this course will give you the confidence to transform your imaginationinto a working Web site.

Skills SummaryThe goal of this workbook is to enable you to:

1. Build designs optimized for transformation to Drupal themes using common designsoftware.

2. Convert Photoshop files into basic Web templates using a text editor.

3. Create and apply a new Drupal theme to a Web site using a text editor and simpleWeb tools such as FTP.

4. Evaluate common base themes and know when to choose between several popularbase themes.

5. Create a new Drupal theme by extending a base theme.

6. Develop common template files (tpl.php) necessary to theme pages and nodes usinga text editor.




Page Elements & HTML FrameworksPage Elements & HTML Frameworks

In this workbook you will convert a design file to a Drupal theme. You may already have adesign file ready to convert, or you may be starting from scratch.

Design Tools You may choose any design software you like (Photoshop, GIMP, Inkscape, whatever!).When I use the word “Photoshop” you can safely substitute this word for any tool you’reusing to design your site. I don’t actually use Photoshop for my work unless I absolutelyhave to. I use a free equivalent calledGIMPfor raster drawings andInkscapefor vector

drawings.

Creating DesignsFor this course I’m going to assume that you’re comfortable with Web design software. Ifyou are a little bit new to Web design as well you can find some good design tutorialsonline by searching for “PSD webdesign tutorial.” A few of the ones I’ve book markedinclude:

1. foliofocushttp://foliofocus.com/category/psd/

2. graphicriverhttp://blog.graphicriver.net/web-design/30-best-psd-website-templates-on

3. grafpedia http://www.grafpedia.com/tutorials/create-business-wordpress-psd-layout

With your design skills refreshed, it’s time to take a look at Designing for Drupal!

The (Cheater) Design Process

I use the following steps when I am creating new Drupal themes:


http://www.gimp.org/

http://www.inkscape.org/

http://www.gimp.org/

http://www.inkscape.org/



1.Create wire frames withBalsamic Mockups(http://balsamiq.com/) and client

specs. See also Top Notch Theme'simportable Mockups Drupal page

elements (http://mockupstogo.net/drupal-cms-components).

2.Find a colour palate from www.colourlovers.com,add a grid (part two of thisweek's lesson) and some imagination to my design program (GIMP) to get a flatfile.

3.Choose a base theme and make the appropriate text files for the theme (you'll

learn more about this later in the lesson).4.Rebuild the PSD in Drupal (or slice and convert to HTML and then further dividethat HTML file into tpl.php files and their variables).

5.Launch the Minimum Viable Theme.6.Theme the rest by user experience, not by module or tpl.php file.

From this set of tasks I break down steps 1-3 as follows:

1.Use the 960.gs grid templates to establish a grid framework.2.Pick a colour palate from colourlovers.com and make refinements onwww.colorschemedesigner.com

3.Make shapes for page elements based on the wire frames and site specifications.4.Add a background (texture, image and/or colour).5.Position page elements according to the wire frames.6.Decorate the page. Add texture, flourishes, illustrations, photography and "brand"or "design" or "flair."

At this point I now switch over to the Drupal theme to finish up the last bits. You maychoose to do this work in your graphics program and then replicate it in Drupal. It's yourchoice! Here's the rest of my basic design tasks:

1.Choose fonts and type size (yes, a proper grid design shouldstart with text, but thisis the Web and I'm lazy).2.Add edges and borders to your pages and blocks.3.Style lists: indents, margins and paddings.4.Style actions: default, hover, active for links, menu items, etc.

An illustrated version of this process is available from:http://www.slideshare.net/emmajane/design-to-theme-cmsexpo


http://balsamiq.com/

http://mockupstogo.net/drupal-cms-components



http://www.colourlovers.com/



http://www.colorschemedesigner.com/

http://www.slideshare.net/emmajane/design-to-theme-cmsexpo

http://balsamiq.com/




http://www.colorschemedesigner.com/

http://www.slideshare.net/emmajane/design-to-theme-cmsexpo



Designing for DrupalDesigners that I’ve worked with in the past have typically run into problems when they tryto design a Web site without a clear understanding of how Drupal is going to assemble allof the pieces. Unlike a static HTML page, Drupal has several puzzle pieces that fit togetherto form a single page. If you haven’t readFront End Drupalplease read page 1 of the onlineversion of Chapter 4:The Drupal page

(http://www.informit.com/articles/article.aspx?p=1336146). You may read to theend of this chapter if you like, but it gets a little more complicated than what you’ll need.

In Chapter 4 ofFront End Drupalyou learn that there are several elements, or templates,that make up a single page. To be successful at creating Drupal themes you need to beable to think in terms of the entire page but also in terms of each of the templates thatmake up that page. If you already have a design file take a close look at it and see if youcan find repeating elements that will become individual template files.

In your design file you need to identify the components that will make up: blocks, nodes,header region, footer region and the rest of the page. You may have more unique

elements than this too. Where possible group “related” items into a single page element.For example: do your sidebar “blocks” all have the same size fonts for the headings? If youare working with a design program that supports layers, group design elements that willbe in the same template files to help organize your thoughts in preparation for thetransition to HTML.

Once I have my template organized I generally start building an HTML file while looking atmy design file. By usingdesign grids I can quickly put together a shell for my site.

Does your site have Four columns? Two columns with sub-columns? Once the generalshape is in place I start filling in details by extracting visual elements from my design file.

This is different from how I built sites before Drupal. Before Drupal I would slice an entiredesign and use the images to bump the HTML structure around so that everything linedup. I no longer use this method because I find that Drupal presents too many layers toeasily bump images together. You may want to think of building your HTML file as startingwith an HTML wire frame and then adding more and more layers to the design until it iscomplete. If you’ve never worked this way before, be brave and give it a shot for thiscourse. You may find that you hate it, but at least you’ll be speaking from experience.

Once you have the wire frame for your theme you need to start thinking about each ofthe page elements you identified and grouped in your design. This is where theming gets


http://www.informit.com/articles/article.aspx?p=1336146

http://my.designtotheme.com/designtotheme-in5/node/32?print&book_recurse


http://www.informit.com/articles/article.aspx?p=1336146




a little bit conceptual. If you create a whole HTML version of your design file you will needto extract elements for each of the template files. For this week: go ahead and create awhole HTML page with all of the elements from your design...AND leave yourselfcomments in the HTML to say where each element begins and ends. For example:.

Seeing Drupal Templates and VariablesRemember the exploded frog diagrams from high school biology? Where all the innardswere showing and you could see every single part of every single bit of a frog from theinside out? It was pretty gross. But it was useful if you needed to know all the parts of afrog. This tutorial shows you how to do that with Drupal themes. (I should probably comeup with a better name for this, but the visual of it is just stuck in my head.) Let's take alook.

Example one: a stark page design

The first comes from a design agency in Bristol, UK. In this example there isvery little additional "embellishment" that needs to be pulled from the design file.

Split the design into regions and page elements. This could include navigation, search box,logo/site name, content, ads and copyright notice.


http://www.open-comms.com/news/0117-made-in-bristol





Convert the designed regions to a plain HTML wireframe.

Identify each type of page element in the wire frame. Add appropriate<divid="whatever">and corresponding CSS to your template. You may want to use a basetheme with a CSS grid framework such asNineSixtyor Blueprint for this step.


http://drupal.org/project/ninesixty

http://drupal.org/project/blueprint







Inside each of your<div>s, print Drupal's page variables:

You now have a minimum viable themethat you are ready to start testing with realDrupal content.


http://www.designtotheme.com/planet/prototyping-and-minimum-viable-themes





Example two: an embellished design

The second example comes from the conference site forConvergeSE. It has moreembellishments. Go take a look at the original site and identify what are (1) images and (2)on-the-fly font face enhancements.

The original site design (front page):

You can probably see a grid before I add any clues to the original site design, but here it is just in case you're struggling to see the shapes in the design.


http://convergese.com/

http://convergese.com/



With Drupal's page variables added:

This site has lots of extra slick styles. But if you break it down it's still a theme that you canbuild. Specifically:

1.There are three blocks across the top. I would put these in a single region and stylethe blocks in that region to have special 960.gs width classes. The outside twocould be custom menus as they lead to internal pages. You will need to add the

background images and style the fonts. View HTML source on the live site. They'reusing very simple lists for navigation (like Drupal spits out) but with a LOT of style.2.The Twitter and Facebook links I would do as a custom block with images and links.3.The main body of the page is a very simple left/right layout. The right side isfurther sub-divided into two columns. One way to approach this would be to haveone region (e.g.$left) that has blocks taking up the full width of the region and thesecond region (e.g.$right) has blocks that are styled to 50% of the region.

4.The logo (in yellow) is a picture with a squid-shark appearing as a backgroundimage. z-indexes make up the funky layering effect with the menu above.

These are both pretty simple sites in terms of the amount of content that's displayed, butit should give you a good sense of how to explode a Web site to find its correspondingDrupal page template variables.

Task Summary

1. Read Chapter 4 ofFront End Drupal(http://www.informit.com/articles/article.aspx?p=1336146)

2. Find page elements in your design templates. Organize design elements into groupsaccording to the template files they will be appearing in (e.g. nodes and blocks).

3. Create an HTML wire frame for your new theme. You can sketch it onto paper first ifyou want.

4. To your HTML wire frame, fill in each of your page elements. Don’t forget to addHTML comments to show you where they begin and end.

5. Bonus Task: Read Appendix A on design grids and complete the tasks outlined in it.




A Basic Drupal PageA Basic Drupal Page

In the first section of this guide you created a simple HTML mockup for your design. Nowyou’re going to follow a few basic steps and convert that mockup into a theme! I’ll giveyou step-by-step instructions to ensure things go smoothly.

At this point you cannot proceed if you don’t have a single HTML page which holds allpage elements from your design. Have you completed each of the tasks from theprevious section?

Define Your Theme

Your theme will need a container for all of the associated files you are about to create.Create a new folder using only lowercase letters and numbers (no spaces!). For example:you could name your theme: bluebird or skatergrrl.

In this folder create a new text file namedYOURTHEME.info. For example:bluebird.infoorskatergrrl.info. This info file is a glossary of definitions that tells Drupal about yourtheme. In it you need to include the following text:

name = Your Theme Namedescription = A description which will appear in the theme selector.core = 6.x

engine = phptemplate

To find out more about this info file, please read:the drupal page (http://drupal.org/node/171205).

With the folder you just created and an info file you now have a theme! It will use all ofthe default templates provided by core. It won’t even look like Garland...it’ll just be plain,plain, plain!


http://drupal.org/node/171205







Template VariablesEach theme has template files that allow you to define the HTML structure for therelevant page elements. By completing these steps you will convert a static HTML pageinto a dynamic Drupal template. This is the last time that you’ll be able to look at yourHTML page without also running it through Drupal.

Copy your HTML page into the theme directory and rename it:page.tpl.php.

Open your renamed HTML file and replace static content with the appropriate variablenames forpage.tpl.php. Each variable must be added to the template as follows:

<?phpprint $VARIABLE_NAME;

?>

Head Variables

Start with the following variables inside the HTML tag<head>:

4.$head_titleA modified version of the page title, for use in the TITLE tag.5.$headMarkup for the HEAD section (including meta tags, keyword tags, and so on).6.$stylesStyle tags necessary to import all CSS files for the page.7.$scriptsScript tags necessary to load the JavaScript files and settings for the page.

For example the$head_titleHTML snippet would be as follows:

<title><?php print $head_title; ?></title>

The default page.tpl.php file can be viewed online athttp://api.drupal.org/api/drupal/modules--system--page.tpl.php/6/source

Body Variables

In the body of your page add HTML divs with a unique id for the following body variables:

8.$logouse this only if you want to upload your logo via the theme’s administration

section




9.$search_boxonly displays if you’ve enabled search in your theme’s administration10.$helpDynamic help text, mostly for admin pages.11.$messagesHTML for status and error messages. Should be displayed prominently.

Another really handy variable that Drupal creates is the variable$body_classes. Itcontains CSS classes which give each page on your Web site a unique ID. You can takeadvantage of these to change background images and headers from your style sheets. Toadd this to your template use the following snippet:

<body class="<?php print $body_classes; ?>">

The sample output from the front page and the user profile page is as follows:

<body class="front logged-in page-node one-sidebar sidebar-right"><body class="not-front logged-in page-user one-sidebar sidebar-right">

Additional page template variables are listed at:http://api.drupal.org/api/drupal/modules—system--page.tpl.php/6

Closure

A special variable is needed at the bottom of your page. This variable is used by modulessuch as Google Analytics. To add this variable put the following snippet just before theend body tag on your theme.

<?phpprint $closure;

?>

Theme RegionsThere are three regions available to you by default: left, right and footer. To enable theseregions in your theme you must print them using the same technique described above.For example:




<?phpprint $left;

?>

If your HTML design that has wrapper divs that are used OUTSIDE of the region, addthem now. For example you may have<div id='left'><?php print $left; ?></div>.

If you have HTML elements that go INSIDE the region (i.e. the headings for each block)this will need to be moved to the template fileblock.tpl.php. Usually it is sufficient touse CSS to change the way a block will look though. Think hard about whether you reallyneed custom HTML inside your blocks. Themes that rely on the default HTML are a LOTeasier to maintain.

If your design has more regions than this that you would like to place blocks into, you willneed to let Drupal know about them. In a text editor open up your theme’s info file andadd your region definitions to the bottom of the file using the structure:

regions[your_new_region_name] = Name of region listed on the blocks page

For example:

regions[left_one] = Left sidebar, column 1regions[left_two] = Left sidebar, column 2regions[right] = Right sidebarregions[footer] = Footerregions[header] = Header

For more information about regions, please read http://drupal.org/node/171224.

ContentFinally we need to add the variables for placing content onto your page. This may be a listof content (e.g. the front page of your site) or a single node of content. To make this work,you will need to add the following variables to your template file:

12.$titlethe content title (i.e. the stuff that appears at the top of a node)

13.$tabsTabs linking to any sub-pages beneath the current page (e.g., the view and






edit tabs when displaying a node).14.$contentThe main content of the current Drupal page.

Later you will learn how to break$contentinto its component parts using anode.tpl.phpfile.

Adding Style Sheets

If you already have the CSS files ready for your design, great! You can include all relevantCSS and JavaScript files automatically by registering the files in your theme’s.infofile.Open up your text editor and add the following to the bottom of your file:

; Include the following CSS files automaticallystylesheets[all][] = my_theme_styles.css

; Include the following javascript files automaticallyscripts[] = myscript.js

You may add as many lines as you have CSS and Javascript files. For more informationabout adding CSS files please readhttp://drupal.org/node/171209. For moreinformation about adding JS files, please read http://drupal.org/node/171213.

Upload and Test Your ThemeIt’s now time to enable your theme! Go ahead and upload this entire folder to your Drupalsite. It should be placed into the sites directory. If you want it to be available to all sitesinstalled on this server upload it to:sites/all/themes/bluebirdorsites/all/themes/sk8tergrrl(as appropriate). If you want it to be accessible to a singledomain upload the theme folder to the following location:sites/domainname.com/themes/MY_THEME_NAME.

You’re now ready to test your theme for the first time and see how it works!

Fix the markup so that you have enough containers for each element that you want tostyle. Take a look at the mark that Drupal has provided you for blocks and content areas.Can you see how you would adjust your theme’s style using only CSS? Makingadjustments using only style sheets will result in a theme that is a lot easier to maintain

over time.






Task Summary

1. Create a theme folder and an info file for your theme.

2. Add variables to your HTML template to make it into a page.tpl.php Drupal theme.

3. Add variables to your page.tpl.php for regions, define new regions if necessary.

4. Add the variables for content display.

5. Add the closure variable.

6. If you have style sheets, add them now. If you don’t have CSS ready, go ahead andcreate the CSS you need based on the markup you have. Use the “live” theme tosee what selectors you need to use to style each element.




Inserting NavigationInserting Navigation

The previous section had a lot of variables to add to your page template. Two of thevariables we didn’t add were for primary and secondary navigation. These variables areactually special kinds of variables called arrays that need some extra work before they canbe printed to the page. An array is a bit like a filing cabinet with multiple drawers ofinformation instead of a simple file folder. The primary and secondary links need to berun through a special Drupal theming function which converts the filing cabinet ofinformation into a series of file folders. At this time you may also add a CSS class to yournavigation.

This is how the default page template correctly inserts primary links:

<?phpprint theme('links', $primary_links,

array('class' => 'links primary-links'));?>

The CSS classes that are added are “links” and “primary-links.” To change the CSS classesadded alter the text that appears in bold in the previous code example.

To print the secondary links, copy the code above and replace the two instances of theword “primary” with the word “secondary.”




Conditional OutputConditional Output

Sometimes you want HTML to appear, and sometimes (especially if a region has nocontent) you don’t. In the core page template file you will see a number of “if” statements.Please take a look at the page as you readthis next bit: (http://api.drupal.org/api/drupal/modules--system--page.tpl.php/6/source )

Here is some sample output from that file:

<?php if (!empty($left)): ?><div id="sidebar-left" class="column sidebar">

<?php print $left; ?></div> 

<?php endif; ?>

The first line reads as follows: if the left region is NOT empty, print the following HTML.

You may have also seen a second way to add conditional statements to your templatefiles:

<?phpif (!empty($left)) {

// do stuff here}

?>

This uses{brackets}to open and close the conditional statement. In this secondexample I have also not switched back and forth between HTML and PHP words. Theentire snippet is PHP. Look for<?phpopen and?>close statements in both examples andfind the lines which are HTML output and PHP output.

Using thepage.tpl.phpfile as an example, add at least two conditional statements toyour own page template.


http://api.drupal.org/api/drupal/modules--system--page.tpl.php/6/source








Base (or Starter) ThemesBase (or Starter) Themes

You do not need to rely exclusively on your imagination to create both the visual designand the code for a truly excellent theme. The default theme, Garland, has received a goodscrub and can now be used as inspiration for your new theme. Several other starter kitsare available as well. These kits, which typically have very little style, are intended to serveas a launching point for building your own unique Drupal theme. Each kit uses a CSS,table-free layout and has been tested in a variety of browsers. The documentationexplaining how to implement each starter kit ranges from poor to excellent. Following arethe sources for some popular starter kits:

1. Zenhttp://www.drupal.org/project/zen2. 960.gshttp://drupal.org/project/ninesixty3. Genesishttp://www.drupal.org/project/genesis4. ATCKhttp://www.drupal.org/project/atck5. Basichttp://www.drupal.org/project/basic6. Beginninghttp://www.drupal.org/project/beginning7. Blueprinthttp://www.drupal.org/project/Blueprint8. Cleanhttp://www.drupal.org/project/clean9. Flexible 2http://www.drupal.org/project/flexible10. Foundationhttp://www.drupal.org/project/foundation11. Frameworkhttp://www.drupal.org/project/framework

12. Hunchbaquehttp://www.drupal.org/project/hunchbaque13. Tenduhttp://www.drupal.org/project/tendu

(There are a lot more too!)

Among the many advantages of using a base theme is that there are many short cutsprepared for you. For example: the Zen Theme converts the array for primary links into avariable that can be printed immediately.




Base themes can be applied at any time by updating your info file with the followingsnippet:

base theme = themename

Replace “themename” with the folder name of the base theme. Your theme does not needto be a sub-folder of its parent, but it does need to be available within your Drupal

installation.

Evaluating Starter ThemesThere are a lot of starter themes! If you are already using a specific CSS grid frameworkyou may be immediately drawn to one of the starter themes listed above. I encourageyou to download them all and look at the documentation to see which may be the mostappropriate for you. Questions you may want to ask yourself include:

1. does this theme support simplified layouts for print and/or mobile?2. how is the documentation for this theme?3. what is the developer community like? how often are updates made? how manyunsolved issues are in the queue?

4. does the theme use a CSS framework that I know about and/or already use and like?

A longer blog post on evaluating base themes is available here:http://www.designtotheme.com/blog/evaluating-base-themes It includes a (ratherlong video) of me walking through the base themes AdaptiveTheme and Omega.

Zen ThemeTouted as being “the ultimate starting theme for Drupal,” the Zen starter kit provides anexample of how to implement all of the basics. Its markup is clean and extensivelydocumented. Whether you use it as a reference guide, pulling out the elements you need,or use the actual files as a base for your own theme, Zen will help you to produce cleanerthemes, faster. Even a simple design is worthy of beginning with a starter kit like Zen.Although it is a simple templateThe Memory Garden Retreats

(www.memorygardenretreats.com

) Web site was built using Zen. Going from a graphic file


http://www.designtotheme.com/blog/evaluating-base-themes


http://memorygardenretreats.com/

http://memorygardenretreats.com/




in GiMP to a deployed theme took less than a day—all because of Zen. The headaches offiguring out cross-browser, CSS-based design were completely eliminated.

You can download the Zen theme from drupal.org (http://www.drupal.org/project/zen).Unpackage the files and place the entiredirectory (and subdirectories) into the themes folder. The Zen theme will help you toidentify each area of a Drupal installation that can be customized and themed.

The steps outlined below assume that you are creating a new theme. Go ahead andcomplete these steps. You may decide to use Zen as the base for your theme (or perhapsfuture themes); however, at this point start with the only the design that Zen provides andsee what this theme looks like unstyled.

1. Create your own Zen subtheme by making a copy of the STARTERKIT folder with yourtheme name.

2. Rename the folder to your new theme name; rename the.infofile contained in thecopiedSTARTERKITfolder to the same name as the folder it is contained in. For example,if you named your directory blackbird, the corresponding .info file would be namedblackbird.info. Adjust the contents of the info file according to the steps in last week’slessons.

3. Copy the CSS filezen.cssfrom the zen folder into your theme’s folder.

4. Copy the liquid, or fixed-width, CSS file from the main zen folder into your theme’s folder.

5. Copy the print CSS file from the main zen folder into your theme’s folder.

6. Edit thetemplate.phpandtheme-settings.phpfiles and change all instances ofSTARTERKIT to your theme’s name (“blackbird,” in this example).

7. Enable your new theme in Drupal’s administrative Web interface by navigating toAdminister, Site building, Themes.

8. Continue to adjust each of your new theme’s settings and styles to suit your needs. Inaddition to the Zen project, a series of default templates are available for many differentDrupal components. Most of these files correspond to specific modules and can becopied directly from your Drupal installation. For example, three template files areavailable within the modules/comment folder:comment-folded.tpl.php,comment-wrapper.tpl.php, andcomment.tpl.php.The online documentation for Zen is comprehensive. To learn more about it, please read

the relevant pages (http://drupal.org/node/193318).


http://www.drupal.org/project/zen













You may find the Zen Theme Garden

(http://groups.drupal.org/taxonomy/term/5171) andZen sub-theme page

(http://drupal.org/node/340837)to be of particular interest.

960 Grid SystemIf you haven’t tried the 960.gs before, now is the time. Complete the following steps:

1.Download the Drupal ninesixy theme here

(http://drupal.org/project/ninesixty)and unpack it.

2.Read the README.txt file. There are even more tutorials listed in this file on workingwith grid systems.

3.Create a new theme and list its base theme as ninesixty.

That’s it! There is no need to copy any files from the ninesixty folder as you did for the Zentheme. All of the CSS classes which enable 960 layouts can now be used in your theme

as well. If your HTML template is based on the 960.gs you can add it as your base themeand remove all of the 960-specific CSS grid files from your theme’s directory.

Task Summary

1. Add primary and secondary links to your page template.

2. Compare the two examples of conditional statements and find the lines written inPHP and HTML..

3. Add your own conditional statements to your page template.

4. Create a new theme using Zen as your starter theme.

5. Create a new theme using 960.gs as your starter theme.

6. Find a starter theme that makes sense for your projects. Apply it to your theme andadjust CSS classes and variables as necessary to take advantage of your base theme.

7. Download the sample sub-themes attached to this page. Examine their contents andcopy and relevant CSS or tpl.php files to your own theme.


http://groups.drupal.org/taxonomy/term/5171
























Template FilesTemplate Files

In the previous section you cleaned up your template file by adding some new variablesand choosing a base theme. Depending on the base theme you may have added a CSSgrid framework (960.gs) or a series of helper functions (Zen theme). This section does nottechnically build on the content from the previous section; however, I do recommendcompleting each of the activities before proceeding.

The Template File node.tpl.phpThe node template controls how each unit of content is displayed within the larger pagetemplate. By default, this includes everything between the editing “tabs” of the contentdown to (but not including) the orange RSS feed icon.

To create a custom node template, you must create a new file namednode.tpl.phpinyour theme directory.

Compared to a page template with a full HTML framework for multiple regions andheaders, the default node template contains very little markup. The default nodetemplate is shown in this section. It includes the default CSS classes that can be used toprovide sophisticated and customized context-sensitive designs. Two items of note: If thenode being displayed is in “teaser” mode, the node title links to the full page of content.

The second item to note is that the page template is also configured to display a title. Forexample, when the Blog module is enabled, an additional title, “Blogs,” appears onexample.com/blog. The second title is part of the page template and is set by the moduleBlog. Note: The editing tabs for a node are actually configured within the page templatewith the variable$tabs.




<div id="node-<?php print $node->nid; ?>" class="node<?php if ($sticky) { print ' sticky'; } ?>

<?php if (!$status) { print ' node-unpublished'; } ?> clear-block"><?php print $picture ?><?php if (!$page) { ?>

<h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>

<?php } ?>

<div class="meta"><?php if ($submitted) { ?>

<span class="submitted"><?php print $submitted ?></span><?php } ?><?php if ($terms) { ?>

<div class="terms terms-inline"><?php print $terms ?></div><?php } ?></div><div class="content">

<?php print $content ?></div><?php print $links; ?>

</div>

The node module has, by default, two types of node templates:node.tpl.php, for allnodes that do not have a more specific template, andnode-contenttypename.tpl.php,for each type of content. The template file used to theme the workshop registrationpages on Design to Theme is available in Appendix B.

Node Template Variables You may print any of the following variables into your node template file:

1.$contentNode body or teaser depending on the contents of the variable2.$teaserThis variable contains all of the display information for the node stuffed intoa single variable. Later in this lesson you will learn how to use the $node variable topick out individual fields for display.

3.$termsA list of themed links for each of the relevant Drupal categories for thiscontent.

4.$linksA list of themed links related to modules other than taxonomy. The links mayinclude “Read more” (which is displayed on the teaser) and “Add new comment”




(which is displayed based on the comment settings).5.$node_urlThe URL of the current node. This link is useful for “permalinks” to thepage. It is commonly used to link the date a blog entry was created to the full node.

6.$submittedThe full themed submission information (for example, “Submitted byWiarton Willie on 2 February 2009—9:46 am”). This information can be broken intothe variable$dateand the user data (see the last point in this list).

7.$dateThe formatted creation date. This variable uses the Drupal “short” date setting.

You can configure formatting of the date by navigating to Administer -> Siteconfiguration -> Date and time. To display a custom-formatted date, you may usethe variable$createdand the Drupal functionformat_date().

8.$picture(the author’s profile photo),$name(username of node author), and$uid(the author’s ID).

The variable$titleis available in the node template as well and should be output for listsof nodes; however, you may need to adjust your templates to distinguish between thetitle displayed in the page template and the title displayed in the node template(especially on pages that display lists of content).

In addition to the variables that you print to the page and are visible to the Web sitevisitor, many other variables contain information about the node that may help you toformat the page appropriately. These variables can be classified into several categories.

Content-Related Variables

These variables contain information about the node that is being displayed. They includevariables that are relevant to a single node display page as well as variables that arerelevant to a page containing a list of teasers to several different nodes.

1.$typeThe content type of the node (for example, story, page, blog, and customcontent types).2.$teaserThe variable that announces Drupal is requesting the “teaser” view for thecontent. When the page is displayed in full, the related variable$pagereturns true.

3.$readmoreIf the teaser content of the node does not contain the full content, a“read more” link is displayed.

4.$zebraDisplays either “even” or “odd”; to be used for zebra striping in teaser listings.5.$idPosition of the node within a list of nodes (for example, on the front page). Thisvariable is incremented each time a node is output.

6.$nodeThe full array containing all data for the node. This variable may contain




“unsafe” data and should be used with caution.

Site Visitor Variables

These variables are related not to the content, but rather to the visitor who is viewing thecontent. They can be useful when you are customizing the options for authenticatedusers and administrators.

1.$logged_in

Returns true when the current user is a logged-in member.2.$is_adminReturns true when the current user is an administrator.

Comment-Related Variables

These variables are related to the comments for this node, including whether commentsare enabled for this node.

1.$commentIndicates whether comments are enabled for this node.2.$comment_countNumber of comments for this node.

Status of the Node ContentThese variables are related to the “Publishing options” for a given node.

1.$promoteIdentifies whether this node should be displayed on the front page.($is_frontallows you to check whether the page being displayed is the front page.)

2.$stickyIdentifies whether this node ought to be displayed at the top of lists ofcontent.

3.$statusIdentifies whether this page is “published.”

A full list of these variables is availablehere

(http://api.drupal.org/api/file/modules/node/node.tpl.php/6).You may alsorefer to the default node template file within your own Drupal system files. The defaulttemplate can be found within your Drupal core files atmodules/node/node.tpl.php.

Displaying Content with More PrecisionThe variable$contentcontains both the field labels and the content values for all displayinformation for each content type. The variable$contentcomes prepackaged, so youcannot use it if you want to insert markup around individual content fields or add

explanatory text between fields. To accomplish these kinds of customizations, you must


http://api.drupal.org/api/file/modules/node/node.tpl.php/6







use the variable$nodeinstead. The variable$nodeis an object containing all node-relateddata for the node you are viewing. It includes everything from the node ID to thecategories for the node. By carefully selecting the right part of the variable$node, youmay use any of this information in your template.

Deciphering the Object $node

There are two ways to view the contents of$node

. If you have the Devel module installedand enabled, you may use the functiondsm()to create an easy-to-read display of theinformation. In your node template file (node.tpl.php), add the following snippet:

<?phpdsm($node);

?>

If you do not have the Devel module enabled, you may use the PHP functionprint_rinstead with the following snippet:

<?phpprint "<pre>";print_r($node);print "</pre>";

?>

Using the HTML tags<pre>helps you to see each of the indents that represent thestructure of the object. You may also choose to print the variable without the<pre>tagsand view the source of the rendered Web page to see the indents.

Each of the items listed in the printed output can be accessed by referencing$node->object_property. For example, if you wanted to print the node ID (nid) content type(type) to the page, you would include the following snippet in your node template file:

<?php print $node->nid; ?>

<?php print $node->type; ?>

This node object contains four subsections:




4. body: contains the same data as the variable$content5. content: a full listing of the data to be printed to the page as well as formattinginstructions

6. links: the contents of the variable$linksseparated into its component parts

Within these subsections, the body contains text and the last three subsections containarrays.

This content type contains only one extra field. Thus, if five fields were added to thecontent type, there would be a total of eight subsections in the node object.

Accessing Content in the $node ObjectContent is contained in multiple places within the node object. For example, the bodyfield for the node can be accessed from the variable as follows:$node->bodyand$node->content['body']['#value']. It makes sense to use the shortest variable nameto access the content you need; however, if you need content that is buried deep withinthe node object, it can be a frustrating task to find the right variable name if you are notcomfortable with complex array structures. To show you how to retrieve information fromany point in the node object, the next example retrieves the body field from the pit ofdespair ($node->content['body']['#value']).

The array contains the following code:content (Array, 5 elements)

body (Array, 5 elements)#weight (Integer) 0#value (String, 25 characters ) <p>With some content</p>#title (NULL)#description (NULL)

#printed (Boolean) TRUE#title (NULL)#description (NULL)#children (String, 25 characters ) <p>With some content</p>#printed (Boolean) TRUE

To access the contents of the body field, you would start with the node object and thenwalk through each of the nested arrays to build the variable:$node->content['body']['#value'].




To access information for custom fields in CCK content types, you can use the contentvariable (shown above). Much of the same information also appears as a sub-section ofthe node object. The shortcut reveals the content of the field, but not the label. If youneed to display the label text as well, you will need to use the contents of the array$node->content. For example, to print the contents of a custom field called “Extra text,”you could use either of the following variables:

$node->field_extratext[0]['safe']$node->content['field_extratext']['field']['items'][0]['#item']['safe']

To access the label for this field, you could use only the following variable:

$node->content['field_extratext']['field']['#title']

Additional Template FilesIn addition to the node template file there are also template files available for blocks,comments, user profiles and many other modules. To find the template files that areavailable for the Drupal core modules check this out

(http://api.drupal.org/api/search/6/.tpl.php).For a list of tpl.php files that areavailable for contributed modules, take a peek inside the modules folder and look for filesending intpl.php.

Some of the commonly customized template files include:

1.Search form (http://api.drupal.org/api/drupal/modules--search--search-theme-form.tpl)

2.User profile (http://api.drupal.org/api/drupal/modules--user--user-profile.tpl.php/6)

3. Book navigation (http://api.drupal.org/api/drupal/modules--book--book-navigation.tpl.php/6)

4. Blocks (http://api.drupal.org/api/drupal/modules--system--block.tpl.php/6)


http://api.drupal.org/api/search/6/.tpl.php




http://api.drupal.org/api/drupal/modules--search--search-theme-form.tpl.php/6





http://api.drupal.org/api/drupal/modules--user--user-profile.tpl.php/6


http://api.drupal.org/api/drupal/modules--book--book-navigation.tpl.php/6





http://api.drupal.org/api/drupal/modules--system--block.tpl.php/6





















Task Summary

1. Create and customize the template file which controls the output of each node on apage using only the variables provided by Drupal core.

2. Extract content from the node object and print it to your node template. Examplesare given in the text as well as the sample tpl.php file. Note: this is typically onlydone when you are using CCK to create additional fields of content.

3. Examine each of the core template files that are available for theming. If appropriateadd one or more custom template files to your theme. In many cases this isnot required as you may control a lot of output using only CSS; however, go ahead andtheme as many files from the complete list so that you understand what you wouldneed to do if you had to.

4. Create a custom template file for a specific content type. (For example: the workshopfile attached.) If you do not have a custom content type you can still change thestyle for either Page or Story by using the template naming conventions describedin the lesson.




Customizing BlocksCustomizing Blocks

In the previous section you created a custom template file for nodes on your site. Youmay have even created a few node template files for each of the different content typeson your site. In this section we’ll extend that information and customize the blocktemplate as well.

Theming BlocksBlocks may contain a wide range of “things” from site navigation to plain text content touser login to just about anything else the core and contributed modules are capable ofspitting out.

1. Copy the default fileblock.tpl.php fromhttp://api.drupal.org/api/drupal/modules--system--block.tpl.php/6/source

into a new file in your theme directory. This file should be namedblock.tpl.php.

2. Arrange the variables according to how you want all blocks to appear on your site. Thevariables available to you are listed athttp://api.drupal.org/api/drupal/modules--system--block.tpl.php/6.

It’s as simple as that!

Theming Only Some Blocks

But what if you want to change only SOME blocks? The first step is to decide whichblock(s) you want to change, then you’ll need to create a corresponding template filewhich uses Drupal’s rules for that specific type of block. Here are your options:

1. Theme all blocks within a specific region (e.g. the footer):block-REGIONNAME.tpl.php

2. Theme all blocks output from a specific module:block-MODULENAME.tpl.php


http://api.drupal.org/api/drupal/modules--system--block.tpl.php/6/source






3. Theme one single block:block-MODULENAME-DELTA.tpl.php

The term “delta” refers to the unique identifier that Drupal has assigned that specificblock created by that specific module. The combination of module name and delta(number) will be unique.

To find the unique identifier for your block:

1. Navigate to Admin, Build, Blocks.

2. Scroll down to the block you want to customize and hover over the link labeled“configure.” A module name and number will be revealed at the end of the URL.

3. Create a new block template file using the module name and number in the file nameusing the formula:block-MODULENAME-DELTA.tpl.php.

The configuration link will also provide you with additional options which allow you tocustomize under what conditions a block is displayed on your site.

Collapsible RegionsOne of the most annoying things in a theme is an empty region that holds its place forblocks that don’t exist. There are a number of themes that do an excellent job ofcollapsing their unused regions. The conditional statements you learned previously are just one way to collapse unused regions. If you want to see even more examples ofthemes which have collapsible regions take a look at:

5. Acquia Marina (http://drupal.org/project/acquia_marina)

6. LiteJazz (http://drupal.org/project/litejazz)

7. Amity Island (http://drupal.org/project/amity_island)

8.A3 Atlantis (smart columns)

(http://drupal.org/project/a3_atlantis)

You may have other favourites as well.


http://drupal.org/project/acquia_marina





http://drupal.org/project/litejazz



http://drupal.org/project/amity_island



http://drupal.org/project/a3_atlantis













Sharing Your ThemeSharing Your Theme

The final step in creating your own Drupal themes: sharing your work with others. Whenyou uploaded your theme to your Web server you probably FTPed (or SCPed) individualfiles. To share your theme with others you’ll need to put them into some kind of wrapper.Typically a.zipor a.tar.gzfile is sufficient. Most utilities capable of unzipping thesearchive formats can also create archives of this format. You will need to check theinstructions for your specific application. If there are any “gotchas” for your theme youmay also want to include a plain text file named, README.txt with the extra installationinstructions. For example: if your theme is optimized for a specific content type you maywant to include information on how to configure Drupal so that the theme worksproperly.

Whether you are sharing your theme with a client or the rest of the world there are a fewextra considerations you’ll need to be aware of.

LicensingDrupal is released under the GPL (GNU Public License). Any projects hosted on drupal.orgare licensed under the same conditions. The full text of the license is availablefrom

this site:(http://www.gnu.org/copyleft/gpl.html).Although you are encouraged

to use this license for your themes, there is no obligation to do so if you’re not hosting

your theme on drupal.org. You may also want to use a Creative Commons license(http://creativecommons.org/choose/).When choosing your license you need tomake sure you have the right to distribute all parts of your theme under the new license--including graphics and photographs.

Selling Themes You may also choose to retain complete copyright over your theme and sell it on theInternet.Top Notch Themes (http://www.topnotchthemes.com/)is the gold


http://www.gnu.org/copyleft/gpl.html






http://creativecommons.org/choose/



http://www.topnotchthemes.com/















standard for selling Drupal themes online. There are other companies that also sellthemes. For more ideas on how to sell your themes online do a search for “drupalthemes” and see how other businesses have set up their sites.

Contributing Themes to the Drupal ProjectOf course you can upload your theme to your own Web site and have people download it

from there. If, however, you’d like to have your theme included in the main Drupal Website there are a few extra steps you’ll need to go through. There are two guides you’ll needto read. Yes they involve scary revision control information. Mostly we use this to scare offpeople who are only mildly interested in contributing their theme. It is worth the learningcurve you’ll have to go through to be able to promote your design on drupal.org!

• Starter guide on contributing to Drupal projects (themesand modules)(http://drupal.org/node/7765).

If you are IRC-friendly the easiest thing to do is to read through the the starter guide andthen hop into irc.freenode.net in the channel #drupal-contribute and let people knowyou’re ready for help. You will need to learn the version control system Git to share yourfiles on Drupal.org.









SummarySummary

The first step in creating a great Drupal theme is to find the page elements in your designfile that will be controlled by Drupal template files. Your theme may include the followingpage elements:

1. blocks contained in regions (aka sidebars)2. page content3. headings4. navigation

Next you converted your simple HTML page into a Drupal theme. This step made itpossible for you to test your theme for the first time. You created the info file used by

Drupal to identify parts of your theme and added Drupal variables to your modest HTMLwireframe from the first section. The variables you added to your page template mayhave included:

1. regions2. logo3. content

You may have also had additional CSS files to include in your theme. These would havebeen added as part of the second step of making your Drupal theme.

Your next step was to add navigation to your page template. You learned how to wrap

conditional statements around things that you only wanted to be displayed “sometimes.” You also evaluated Base (or Starter) themes. If you completed each of the activities to thispoint you would have read the project pages for over ten different starter themes andtried at least one of the Zen, NineSixty or Fusion starter themes.

Then it was time to get into the details of a Drupal theme: you created a template file tostyle the guts of every node and block that is displayed within the page template.

Finally you learned the basics of how to share your theme with others.




Appendix A: Designing with GridsAppendix A: Designing with Grids

Grid Based Design is good. CSS Frameworks are lovely. If you haven’t spent time withthem, dig in! Using CSS Frameworks will make the HTML and CSS part of designing forDrupal a LOT easier. There are lots of grid systems available for the Web.Raj Dashwrote a good article1 on why you should use a CSS Grid Framework and gives abrief comparison of a few systems including his reasons for usingBlueprint CSS2.

I quite like the 960 Grid System. You can download design templates and see samplesites at:www.960.gs. Four Kitchens has created a very extensive slidedeck onAccelerated Grid Theming Using NineSixty3.

Drupal has a number of starter themes available for the various CSS grid frameworks.

Don’t worry about picking the “wrong” one. You can always incorporate your CSSframework into any Drupal theme you create. (Although you can’t mix and matchframeworks...so do choose whether you want to work with 960.gs or Blueprint or...)

Grid Resources4. Grid Based Design: Six Creative Column TechniquesSmashingMagazinehttp://www.smashingmagazine.com/2008/03/26/grid-based-design-six-creative-column-techniques/

5. Outside the Grid A List Aparthttp://www.alistapart.com/articles/outsidethegrid

6. Five Simple Steps to Designing Grid Systemsby Mark Boultonhttp://v3.markboulton.co.uk/articles/detail/five_simple_steps_to_designing_grid_systems/

7. 30 Blogs with Grid Based Design cssJuicehttp://www.devwebpro.com/30-weblogs-with-grid-based-design/

8.Grid and Column DesignsWeb Designer Wall

1 http://net.tutsplus.com/tutorials/html-css-techniques/which-css-grid-framework-should-you-use-for-web-design/

2 http://www.blueprintcss.org/

3 http://fourkitchens.com/sites/default/files/accelerated-grid-theming-2009-08-02.pdf


http://net.tutsplus.com/tutorials/html-css-techniques/which-css-grid-framework-should-you-use-for-web-design/


http://www.blueprintcss.org/

http://fourkitchens.com/sites/default/files/accelerated-grid-theming-2009-08-02.pdf

http://www.smashingmagazine.com/2008/03/26/grid-based-design-six-creative-column-techniques/


http://www.alistapart.com/articles/outsidethegrid



http://v3.markboulton.co.uk/articles/detail/five_simple_steps_to_designing_grid_systems/


http://www.devwebpro.com/30-weblogs-with-grid-based-design/



http://www.webdesignerwall.com/trends/grid-and-column-designs/

















Want more? Do a little research to find the difference between a “horizontal” and“vertical” grid and read the references at Smashing Magazine onDesigning with

Grid-Based Approach4.

Task Summary

1. Download the design templates for the960 Grid System (www.960.gs).You

may choose from Fireworks, InDesign, Inkscape, Illustrator, OmniGraffle, Photoshop,Visio or Expression Design.

2. Open them in your design tool of choice.

3. Adjust your site’s design to fit into the constraints of the grid.

4. Create an HTML wireframe to hold your content. You may findthe followingtutorial useful http://dabrook.org/blog/articles/tutorial-for-

the-960-grid-system-css-framework.

5. Add design components (and relevant CSS) to your static HTML page.

4 http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/


http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/


http://960.gs/

http://960.gs/

http://960.gs/

http://dabrook.org/blog/articles/tutorial-for-the-960-grid-system-css-framework/








http://960.gs/

http://960.gs/







Appendix BAppendix B

node-workshop.tpl.php file

<div id="node-<?php print $node->type; ?>" class="node clear-block">

<div id="product-info"><h2 class="title"><?php print $node->title; ?> Registration</h2>

<p>Dates:<?php print date_format(date_create($field_date[0]['value']), "M j"); ?> to<?php print date_format(date_create($field_date[0]['value2']), "M j"); ?></p>

<p>Fee: $ <?php print number_format($sell_price, 2); ?></p><?php print $node->content['add_to_cart']['#value']; ?>

<p class="cancellation"><a href="/cancellation-policy">Cancellation Policy</a>

</p></div>

<div class="content"><?php if($node->content['image']['#printed']): ?>

<?php print $node->content['image']['#value']; ?><?php endif; ?>

<div id="content-body"><?php print $node->content['body']['#value']; ?>

</div></div>

<?php if ($links): ?><div class="links"><?php print $links; ?></div>

<?php endif; ?>

</div>




About the AuthorAbout the Author

Emma Jane Hogbin (drupal.org user emmajane) is an internationally renowned technical

author and trainer who specializes in teaching people, just like you, to make beautiful Websites. She has been teaching internet technologies since 2002 and has been buildingWeb sites for over ten years. Emma's first book,Front End Drupal,is recognized in

the industry as the most important book for Drupal designers. Her second book,DrupalUser’s Guide, is quickly becoming an old favourite for many Drupal site builders.

A frequent speaker at technical conferences in Canada, the US and Europe and Emmaalso likes single malt whiskey. These two things are probably not related. Herpresentations have taken her to France, Belgium, Hungary, Canada, New Zealand,England and the United States. In addition to her engaging conference presentations,

Emma has also worked as a technical college instructor at Humber College and SenecaCollege, and has worked on curriculum development for Humber College and the UbuntuLinux distribution.

Emma encourages non-traditional participation in technology through craft and believesthat everyone is capable of mastering the tools that surround them. To help engage newways of participating in technology, she open sourced one of her knitting patterns so thatyou can make your very ownDrupal Socks(as featured in CRAFTzine). She is the

recipient of the Google Diversity Award for helping to encourage women in technologyand is the sponsor of Creative Use of Technology which is awarded every year to a female

student at West Hill Secondary School in Owen Sound, Canada.


http://www.amazon.com/gp/product/0137136692/ref=as_li_ss_tl?ie=UTF8&tag=ht073-20&linkCode=as2&camp=217145&creative=399369&creativeASIN=0137136692




http://www.emmajane.net/craft/drupal

http://blog.craftzine.com/archive/2008/08/drupal_knitting_charts.html



http://www.emmajane.net/craft/drupal







Responsive Web Design WorkshopResponsive Web Design Workshop

Ready to take your Drupal knowledge to the next level? Starting December 1stDrupal

trainer Emma Jane Hogbin will help you take your Drupal theming skills to the next levelwith the first-ever Responsive Web Design Workshop for Drupal 7.

Who Is This Course For

This course is perfect for freelance web designers who need a little structure to learnresponsive web design. You have experience building web sites but you’re overwhelmedby the thought of having to learn yet another web technology. You typically build Websites for $5k-$50k with a very small team (typically fewer than 5 people and sometimes

it's just you). You learn by doing, but don’t want to charge a client to learn how to buildresponsive web sites in case it goes wrong and you end up having to do loads of work forfree on a site that never works (the idea of bidding on a project to “learn” a new skillactually makes you hyperventilate because of that one time where you did just that andyou were thoroughly punished and almost lost your shirt).

You're definitely working in the web industry. This course is not for hobbyists who wantcasual information. This if for professionals who are under the gun to deliver responsiveweb sites now. If you’re a hobbyist, buy the 2nd edition of the bookFront End Drupalwhen it comes out.

Course Outline

There are six lessons (three in December, three in January with two weeks off over theholiday season).

1.HTML, CSS and PHP for Drupal - December 1st2.Building with grids and CSS grid frameworks - December 8th3.Responsive design - December 154.Case study 1: a retrofit of the themeDomicile. January 5th

5.Case study 2: responsive themes from scratch - 2 columns - January 12


d h f h l l

http://drupal.org/project/domicile

http://drupal.org/project/domicile



6.Case study 3: responsive themes from scratch - multi columns - January 19

The webinars will happen on each of the dates listed above probablyat 1PM EasternStandard Time. If you are unable to attend, you will be able to view the recordings later inthe week when they are posted.

Register NOW for Responsive Web Design for Drupal at:


Class starts December 1st, registration closes Tuesday November 29th.






Design to Theme CatalogueDesign to Theme Catalogue

All workbooks are available in PDF format only and can be downloaded immediately once

they are purchased. PayPal payments accepted.

Building and Theming a MicroSite with Drupal 7

Learn how to build a small business Website with Drupal 7 and core modules. Clearstep-by-step instructions will guide youthrough the process of building a site, andconverting a Photoshop file into your first

theme.

Build and Theme a PortfolioSite with jQuery and Drupal 7

The ultimate guide to the most popular

image and jQuery effects for Drupal. If youwant to learn how to add lightbox effects,image carousels and rotating banners toyour Web sites, look no further than thisguide.... and the best part is that you don'thave to be a programmer to add theseeffects to your site.


i d ild i

http://www.designtotheme.com/ebooks/sbe-guide-micro-site


http://www.designtotheme.com/ebooks/sbe-guide-portfolio






http://www.designtotheme.com/ebooks/sbe-guide-business-directory




Design and Build a BusinessDirectory With Drupal 7

Over the years I have built more businessdirectories for community groups than I canshake a stick at. It's a popular request, andwith Drupal it's trivial to build...if you knowhow. In this comprehensive 100-page

guide you will learn step-by-step how tobuild a business directory with Drupal.

Design and Build a CommunitySite With Drupal 7

For this site recipe you will learn how toenhance Drupal's core modules for a basiccommunity Web site. Features include a

member-only forum. In-depth explanationof how to use the NineSixty base theme tocreate a flexible grid-based layout.


PHP f D l D i C d F D l L t ith



http://www.designtotheme.com/ebooks/sbe-guide-community-site






http://www.designtotheme.com/ebooks/php-drupal-designers

http://www.designtotheme.com/ebooks/code-free-drupal-layout-skinr-fusion-and-panels





PHP for Drupal Designers

PHP for Drupal Designers helps you buildbetter themes. It was written for designerswho need help with PHP to use advancedtheming techniques. This 32-page eBook(PDF format) jumps right into using PHP forDrupal. All of the examples are specifically

related to theme development. If you're awanna be module developer this book isnot for you. The ebook covers all the basictopics that always get skipped.

Code-Free Drupal Layout withSkinr, Fusion and Panels

Learn how to use some of the most popularadvanced layout tools that Drupal has tooffer. If you want to achieve a higher degreeof control over your site but don't want tolearn PHP, this workbook is the place to

start. This ebook covers advanced Drupal 6modules so that you don’t have to learnhow to be an advanced coder.

PSD to Drupal Theme

Ever wondered how you take a flat designfile and make it into a gorgeous, interactiveDrupal theme? You aren't alone. This was

the most requested topic in a recent Designto Theme survey. Caving to public pressure,Emma Jane has written her longest-everDrupal theming workbook covering one ofthe most in-demand topics: how thetofurkey do I made a frigging Drupal themeout of this Photoshop file?

Top Ten Mistakes People MakeWhen Theming Drupal, TipsSheet

I have a dent in my forehead fromrepeatedly banging my head against thedesk at simple mistakes people make whentheming Drupal. So I wrote a simple tipssheet for you to print and staple to yourcomputer monitor.

All workbooks are available for sale fromwww.designtotheme.com.





http://www.designtotheme.com/ebooks/psd-drupal-theme

http://www.designtotheme.com/ebooks/top-ten-mistakes-people-make-when-theming-drupal



http://www.designtotheme.com/






http://www.designtotheme.com/ebooks/psd-drupal-theme






About Design To ThemeAbout Design To Theme

Emma Jane Hogbin is the founder of a great little Drupal consulting and training agency,

Design to Theme (www.designtotheme.com). She makes theming Drupal easier,faster and more profitable.

• Drupal Training: Drupal site building and theming training sessions are availableon-line. Check the web for a list of upcoming workshops. Custom training is alsoavailable.

• Support for Small Businesses and Designers: Did you get in over your head a littlebit with a project? We can help you get unstuck with gentle technical support thatwill make you feel smart and wonderful and capable of taking back control of your

Drupal project.

Accolades“Thank you for sharing your experience through e-books in addition to seminars andpresentations. It's really helpful to have short,easy-to-use examples to learn from aswell as refer back towhile trying to develop good Drupal theming skills.” — Spence

“Emma Jane worked with me on a dramatically ambitious Drupal project a couple of yearsago. She managed to keep my overactive imagination in check so we focused on realistic

goals and milestones, all the whilemaking me feel like I could get my hands dirtyin theproject. She was timely, proficient, and a joy to work with.” — Kim Werker, founder ofCrochetMe.com

“Emma Jane combines the perfect amount of predictability and spontaneity...hertechnique hassparked my excitementabout developments in technology and hasinspired me to engage in new projects. She presents herself as very approachable andalways answers questions thoroughly, making sure that the user feels comfortable and atease.” — Jorge Castro, External Developer Relations, Canonical Ltd.

“Taking your course is one of thebest investments I have made.” — Louise


ThemingDrupal6





Theming Drupal 6

© 2010, 2011 by Emma Jane Hogbin

440-13thStreet East

Owen Sound, Ontario

N4K 1W6

www.designtotheme.com

This 2ndedition includes minor formatting changes and edits.

License

Creative Commons: Attribution-Noncommercial-No Derivative Works 2.5 Canada

CreditsPortions of this ebook are adapted fromFront End Drupalby Emma Jane Hogbin andKonstantin Kaefer. They are included here by permission of Pearson Education.

Documents

Them Ing Drupal Intro eBook 2nd Ed