View
122
Download
9
Category
Tags:
Preview:
DESCRIPTION
Overview InstallationConfigurationArchitectureFeatures and basic site-building workflow
Citation preview
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
Recommended