Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR


Published on


You can read the write up here
Day1- http://gauravmishra.wordpress.com/2011/01/16/d7-iit-9-jan-2011/

Day2- http://gauravmishra.wordpress.com/2011/01/16/drupal7-release-party-iit-jan8/

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR

  1. 1. 9th Jan 2011 Drupal 7 Theming Workshop #d7rp #d7rp_delhi Venue: Bharti Building,501, IIT
  2. 2. About your presenter Drupal Themer from 2007-current... Worked as Blender 3d animator (2006-2007) For more you may check at twitter @gauravmishr
  3. 3. Checklist before we start ● You are an experienced person working with Drupal ● You know CSS/HTML/PHP or Javascript
  4. 4. Checklist ● No Problem even if you are a newcomer /NOOB I mean newbie.
  5. 5. What we will cover ● Brief Rapid Intro on XHTML,CSS, PHP and JavaScript. ● Few words on Drupal ● Need of theming and purpose. ● Overview of Drupal theming architecture ● Taking a HTML template and Drupalizing it.
  6. 6. XHTML XHTML is a stricter and cleaner version of HTML. - w3schools.com
  7. 7. So ...HTML! ● HTML is a markup language ● Markup tags used to describe a web page ● HTML page consist of head and body
  8. 8. HTML continued... ● Head to find the title, css declaration and meta information (search engine and etc.) <head> <title>Title of the document</title> <link rel="stylesheet" type="text/css" href="mystyle.css" /> <meta name="author" content="Anonymous" /> </head> ● Body <body> The content of the document...... </body>
  9. 9. HTML (visually) <html> <head> <title>Bare back Tatoo</title> </head> <body> <h1>Heading</h1> <p>paragraph.</p> </body> </html> http://www.ratchetup.com/eyes/2005/01/browser_complia.html
  10. 10. Back to XHTML!
  11. 11. Characteristics of XHTML ● DOCTYPE is must for XHTML document. “it is an instruction to the web browser about what version of the markup language the page is written in.” <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  12. 12. XHTML continued... ● No empty tags<hr> , <br> and <img> <hr /> <br /> <img /> ● All tags in lowercase. <body><p>paragraphy</p></body>
  13. 13. You can also validate the XHTML At http://validator.w3.org
  14. 14. CSS – Cascade stylesheets ● Styling language http://www.flickr.com/photos/eelkedekker/3166324179/
  15. 15. CSS BOX Model Box model is crucial when are you are designing the LAYOUTS
  16. 16. CSS code.. /* demo.css */ body{ background-color:#d0e4fe; } h1{ color:orange; text-align:center; } p{ font-family:"Trebuchet MS",Verdana,Arial; font-size:20px; }
  17. 17. PHP ● Welcome the Programming language which add the OPENESS in business and open source culture. but! ● PHP is a server-side, cross-platform, HTML embedded scripting language.
  18. 18. PHP syntax //Variables <?php $txt="Hello World"; echo $txt; ?> //Function <?php echo strlen("Hello world!"); ?> //Conditional operators <?php $d=date("D"); if ($d=="Sunday") echo "Have a nice Sunday!"; ?> //Operators, while Loops, function //ETC(etc word anonymously powerful)- kidding
  19. 19. And most imortantly Arrays! * Numeric array * Associative array * Multidimensional array //numeric $planets=array("Mercury","Venus","Earth","Mars",”Pluto? Eh?”); //associative $ages = array("Peter"=>32, "Quagmire"=>30, "Joe"=>34); //multi dimensional $families = array ( "A"=>array ( "aa","ab","ac" ) "B"=>array ( "ba","bb","bc" ) );
  20. 20. PHP+HTML code <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>PHP Test</title> </head> <body> <?php $content = “User input content! Feed the variable”; echo 'Hello World'; print $content; ?> </body> </html>
  21. 21. Javascript ● Scripting language <html> <body> <script type="text/javascript"> document.write("This is my first write right in JavaScript!"); </script> </body> </html> ● Used by web developers/designers to add interactivity to web pages.
  22. 22. Drupal ● Free and Open Source Content Managment system distributed under GNU General Public License ● And also described as Web application framework. ● Consist of Core modules, themes and contributed modules by COMMUNITY!
  23. 23. Drupal Theming and its purpose!! A webpage has content visually categorized in following regions: ● Header ● First sidebar ● Second sidebar ● Content region ● Footer
  24. 24. Drupal theme Anatomy sites/all/themes/Newtheme ● .info files ● .tpl Templates ● .css Stylesheet ● .js Javascript ● Preprocess and process files (NEW) ● .jpg, .png or .gif Images ● Template.php – PHP template engine
  25. 25. Watch the Visual order! http://www.slideshare.net/pingv/grok-drupal-7-theming
  26. 26. Continued... http://www.slideshare.net/pingv/grok-drupal-7-theming
  27. 27. Whats in D7 theming? ● Numerous name changes (like sidebars and menus) ● primary/secondary » main/secondary ● .clear-block » .clearfix ● $left/$right » sidebar_first/sidebar_second http://www.slideshare.net/JohnAlbin/20100420-newd7theming
  28. 28. More changes ● phptemplate_ prefix is GONE ● Content is now a block ● Variables $help, $mission, $footer_message etc. http://www.slideshare.net/JohnAlbin/20100420-newd7theming
  29. 29. Fore more check the below urls: ● Theme upgrade guide on drupal.org http://drupal.org/node/254940 ● Moshe Weitzman's talk on drupal_render http://bit.ly/drupalrender ● John Albin's talk about D7 theming http://bit.ly/johnalbinsf
  30. 30. Lets Drupalize a Design in D7 Skipped
  31. 31. Lets talk Question and answers NOW!
  32. 32. Thank you Community!