Overview  <ul><li>Introduction </li></ul><ul><li>Download themes </li></ul><ul><li>Structure of theme files & folder </li>...
Introduction <ul><li>Change the appearance of an entire site.  </li></ul><ul><li>It is also possible to &quot;theme&quot; ...
Themes Download <ul><li>Free contributed themes at drupal.org (http://drupal.org/project/themes).  </li></ul><ul><li>See d...
Structure of theme files
Directory Structure of Theme Engines
Steps for creating a new theme <ul><li>Create an .info file to describe your new theme to Drupal. </li></ul><ul><li>Create...
Structure of .info file <ul><li>Basic information necessary to incorporate the theme </li></ul><ul><li>into Drupal’s theme...
Adding CSS Files to Your Theme <ul><li>stylesheets[all][] = css/common.css </li></ul><ul><li>stylesheets[all][] = css/link...
Adding Regions to Your Theme <ul><li>regions[header] = Header </li></ul><ul><li>regions[left] = Left </li></ul><ul><li>reg...
Block Regions Demonstration
Adding JavaScript Files <ul><li>scripts[] = js/jcarousel.js </li></ul>
Adding Settings to Your Theme <ul><li>To do this, we’ll create a theme-settings.php file in our Grayscale theme directory ...
Each Template Handles A Region of Your Site <ul><li>html.tpl.php -Master template file for your site </li></ul><ul><li>pag...
Template Hierarchy Home Page page-front.tpl.php page.tpl.php Nodes node-type.tpl.php node.tpl.php Pages page-node-edit.tpl...
Assigning content to Regions
Theme Settings <ul><li>You can locate these settings at  &quot;Administer > Appearance > Settings > themeName&quot;.   </l...
You can locate these  settings at  &quot;Administer > Appearance > Settings > themeName&quot;.  
Example Theme Layout
 
Upcoming SlideShare
Loading in …5
×

Drupal 7 theme by ayushi infotech

2,831 views

Published on

Overview
Installation
Configuration
Architecture
Features and basic site-building workflow

2 Comments
1 Like
Statistics
Notes
No Downloads
Views
Total views
2,831
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
85
Comments
2
Likes
1
Embeds 0
No embeds

No notes for slide

Drupal 7 theme by ayushi infotech

  1. 2. Overview <ul><li>Introduction </li></ul><ul><li>Download themes </li></ul><ul><li>Structure of theme files & folder </li></ul><ul><li>Creating a new theme </li></ul><ul><li>Structure of the .info file </li></ul><ul><li>Structure of .tpl.php Files </li></ul><ul><li>Assign content to regions </li></ul><ul><li>Theme settings </li></ul>
  2. 3. Introduction <ul><li>Change the appearance of an entire site. </li></ul><ul><li>It is also possible to &quot;theme&quot; only certain sections of a site, select types of content, or even individual pages. </li></ul><ul><li>Change layouts, images or fonts </li></ul><ul><li>Hide or display fields dependent on user role </li></ul><ul><li>Dynamically respond to changes in the content or to user input </li></ul><ul><li>Modify or replace text (for example the labels) and variables generated by modules </li></ul>
  3. 4. Themes Download <ul><li>Free contributed themes at drupal.org (http://drupal.org/project/themes). </li></ul><ul><li>See demos of some of them at Theme Garden (http://themegarden.org) </li></ul>
  4. 5. Structure of theme files
  5. 6. Directory Structure of Theme Engines
  6. 7. Steps for creating a new theme <ul><li>Create an .info file to describe your new theme to Drupal. </li></ul><ul><li>Create or modify a CSS file for the site. </li></ul><ul><li>Standardize the file names according to what Drupal expects. </li></ul><ul><li>Insert available variables into your template. </li></ul><ul><li>Create additional files for individual node types, blocks, and so on. </li></ul>
  7. 8. Structure of .info file <ul><li>Basic information necessary to incorporate the theme </li></ul><ul><li>into Drupal’s theme registry </li></ul><ul><ul><li>name = Marinelli </li></ul></ul><ul><ul><li>description = A clean theme still usable over 4000m! </li></ul></ul><ul><ul><li>core = 7.x </li></ul></ul><ul><ul><li>engine = phptemplate </li></ul></ul><ul><ul><li>screenshot = screenshot.png </li></ul></ul>
  8. 9. Adding CSS Files to Your Theme <ul><li>stylesheets[all][] = css/common.css </li></ul><ul><li>stylesheets[all][] = css/links.css </li></ul><ul><li>stylesheets[all][] = css/typography.css </li></ul><ul><li>stylesheets[all][] = css/forms.css </li></ul><ul><li>stylesheets[all][] = css/drupal.css </li></ul><ul><li>stylesheets[all][] = css/layout.css </li></ul><ul><li>stylesheets[all][] = css/primary-links.css </li></ul><ul><li>stylesheets[print][] = css/print/print.css </li></ul>
  9. 10. Adding Regions to Your Theme <ul><li>regions[header] = Header </li></ul><ul><li>regions[left] = Left </li></ul><ul><li>regions[right] = Right </li></ul><ul><li>regions[content] = Middle content </li></ul><ul><li>regions[bottom_left] = Bottom Left </li></ul><ul><li>regions[bottom_right] = Bottom Right </li></ul><ul><li>regions[footer] = Footer </li></ul>
  10. 11. Block Regions Demonstration
  11. 12. Adding JavaScript Files <ul><li>scripts[] = js/jcarousel.js </li></ul>
  12. 13. Adding Settings to Your Theme <ul><li>To 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. </li></ul><ul><li>settings[bartext] = Slide Down </li></ul><ul><li>settings[breadcrumb_title_length] = 50 </li></ul><ul><li>settings[font_family] = 'ff-sss' </li></ul><ul><li>settings[font_size] = 'fs-12‘ </li></ul>
  13. 14. Each Template Handles A Region of Your Site <ul><li>html.tpl.php -Master template file for your site </li></ul><ul><li>page.tpl.php - Entire Page </li></ul><ul><li>front-page.tpl.php - Just Front Page </li></ul><ul><li>block.tpl.php - Blocks </li></ul><ul><li>comment.tpl.php - Comments </li></ul><ul><li>forum.tpl.php – Forums </li></ul><ul><li>field.tpl.php - modules/field/theme </li></ul>
  14. 15. Template Hierarchy Home Page page-front.tpl.php page.tpl.php Nodes node-type.tpl.php node.tpl.php Pages page-node-edit.tpl.php page-node-1.tpl.php page-node.tpl.php page.tpl.php Blocks block-module-delta.tpl.php block-module.tpl.php block-region.tpl.php block.tpl.php Boxes box.tpl.php Comments comment.tpl.php
  15. 16. Assigning content to Regions
  16. 17. Theme Settings <ul><li>You can locate these settings at  &quot;Administer > Appearance > Settings > themeName&quot;.   </li></ul><ul><li>For example, the site's slogan can be suppressed by unchecking the &quot;Site slogan&quot; check box on that page. </li></ul><ul><li>'logo' will enable an upload field for the image along with the checkbox. </li></ul>
  17. 18. You can locate these settings at  &quot;Administer > Appearance > Settings > themeName&quot;.  
  18. 19. Example Theme Layout

×