Overview IntroductionDownload themesStructure of theme files & folderCreating a new theme Structure of the .info fileStructure of .tpl.php FilesAssign content to regionsTheme settings

IntroductionChange the appearance of an entire site. It is also possible to "theme" only certain

sections of a site, select types of content, or even individual pages.

Change layouts, images or fontsHide or display fields dependent on user roleDynamically respond to changes in the

content or to user inputModify or replace text (for example the

labels) and variables generated by modules

Themes Download

Free contributed themes at drupal.org (http://drupal.org/project/themes).

See demos of some of them at Theme Garden (http://themegarden.org)

Structure of theme files

Directory Structure of Theme Engines

Steps for creating a new theme

Create an .info file to describe your new theme to Drupal.

Create or modify a CSS file for the site.Standardize the file names according to what

Drupal expects.Insert available variables into your template.Create additional files for individual node

types, blocks, and so on.

Structure of .info fileBasic information necessary to incorporate

the theme into Drupal’s theme registry

name = Marinellidescription = A clean theme still usable over

4000m!core = 7.xengine = phptemplatescreenshot = screenshot.png

Adding CSS Files to Your Themestylesheets[all][] = css/common.cssstylesheets[all][] = css/links.cssstylesheets[all][] = css/typography.cssstylesheets[all][] = css/forms.cssstylesheets[all][] = css/drupal.cssstylesheets[all][] = css/layout.cssstylesheets[all][] = css/primary-links.cssstylesheets[print][] = css/print/print.css

Adding Regions to Your Theme

regions[header] = Headerregions[left] = Leftregions[right] = Rightregions[content] = Middle contentregions[bottom_left] = Bottom Leftregions[bottom_right] = Bottom Rightregions[footer] = Footer

Block Regions Demonstration

Adding JavaScript Files

scripts[] = js/jcarousel.js

Adding Settings to Your ThemeTo do this, we’ll create a theme-settings.php file in our

Grayscale theme directory and add the form elements necessary to collect the values for font family and font size. In the theme-settings.php file, we’ll use the hook_form_system_theme_settings_alter() function to add the fields for setting the font family and font size.

settings[bartext] = Slide Downsettings[breadcrumb_title_length] = 50settings[font_family] = 'ff-sss'settings[font_size] = 'fs-12‘

Each Template HandlesA Region of Your Site

html.tpl.php -Master template file for your site

page.tpl.php - Entire Pagefront-page.tpl.php - Just Front Pageblock.tpl.php - Blockscomment.tpl.php - Commentsforum.tpl.php – Forumsfield.tpl.php - modules/field/theme

Template HierarchyHome Pagepage-front.tpl.phppage.tpl.php

Nodesnode-type.tpl.phpnode.tpl.php

Pagespage-node-edit.tpl.phppage-node-1.tpl.phppage-node.tpl.phppage.tpl.php

Blocksblock-module-delta.tpl.phpblock-module.tpl.phpblock-region.tpl.phpblock.tpl.php

Boxesbox.tpl.php

Commentscomment.tpl.php

Assigning content to Regions

Theme SettingsYou can locate these settings at "Administer >

Appearance > Settings > themeName". For example, the site's slogan can be

suppressed by unchecking the "Site slogan" check box on that page.

'logo' will enable an upload field for the image along with the checkbox.

You can locate these settings at "Administer > Appearance > Settings > themeName". 

Example Theme Layout