Drupal 7 theme by ayushi infotech
-
Upload
mandakini-kumari -
Category
Documents
-
view
124 -
download
9
description
Transcript of Drupal 7 theme by ayushi infotech
![Page 1: Drupal 7 theme by ayushi infotech](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c829bb4a795923758b466a/html5/thumbnails/1.jpg)
![Page 2: Drupal 7 theme by ayushi infotech](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c829bb4a795923758b466a/html5/thumbnails/2.jpg)
Overview IntroductionDownload themesStructure of theme files & folderCreating a new theme Structure of the .info fileStructure of .tpl.php FilesAssign content to regionsTheme settings
![Page 3: Drupal 7 theme by ayushi infotech](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c829bb4a795923758b466a/html5/thumbnails/3.jpg)
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
![Page 4: Drupal 7 theme by ayushi infotech](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c829bb4a795923758b466a/html5/thumbnails/4.jpg)
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)
![Page 5: Drupal 7 theme by ayushi infotech](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c829bb4a795923758b466a/html5/thumbnails/5.jpg)
Structure of theme files
![Page 6: Drupal 7 theme by ayushi infotech](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c829bb4a795923758b466a/html5/thumbnails/6.jpg)
Directory Structure of Theme Engines
![Page 7: Drupal 7 theme by ayushi infotech](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c829bb4a795923758b466a/html5/thumbnails/7.jpg)
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.
![Page 8: Drupal 7 theme by ayushi infotech](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c829bb4a795923758b466a/html5/thumbnails/8.jpg)
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
![Page 9: Drupal 7 theme by ayushi infotech](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c829bb4a795923758b466a/html5/thumbnails/9.jpg)
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
![Page 10: Drupal 7 theme by ayushi infotech](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c829bb4a795923758b466a/html5/thumbnails/10.jpg)
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
![Page 11: Drupal 7 theme by ayushi infotech](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c829bb4a795923758b466a/html5/thumbnails/11.jpg)
Block Regions Demonstration
![Page 12: Drupal 7 theme by ayushi infotech](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c829bb4a795923758b466a/html5/thumbnails/12.jpg)
Adding JavaScript Files
scripts[] = js/jcarousel.js
![Page 13: Drupal 7 theme by ayushi infotech](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c829bb4a795923758b466a/html5/thumbnails/13.jpg)
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‘
![Page 14: Drupal 7 theme by ayushi infotech](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c829bb4a795923758b466a/html5/thumbnails/14.jpg)
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
![Page 15: Drupal 7 theme by ayushi infotech](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c829bb4a795923758b466a/html5/thumbnails/15.jpg)
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
![Page 16: Drupal 7 theme by ayushi infotech](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c829bb4a795923758b466a/html5/thumbnails/16.jpg)
Assigning content to Regions
![Page 17: Drupal 7 theme by ayushi infotech](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c829bb4a795923758b466a/html5/thumbnails/17.jpg)
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.
![Page 18: Drupal 7 theme by ayushi infotech](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c829bb4a795923758b466a/html5/thumbnails/18.jpg)
You can locate these settings at "Administer > Appearance > Settings > themeName".
![Page 19: Drupal 7 theme by ayushi infotech](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c829bb4a795923758b466a/html5/thumbnails/19.jpg)
Example Theme Layout
![Page 20: Drupal 7 theme by ayushi infotech](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c829bb4a795923758b466a/html5/thumbnails/20.jpg)