Your SlideShare is downloading. ×
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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


Published on …

You can read the write up here


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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. 9th Jan 2011 Drupal 7 Theming Workshop #d7rp #d7rp_delhi Venue: Bharti Building,501, IIT
  • 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. Checklist before we start ● You are an experienced person working with Drupal ● You know CSS/HTML/PHP or Javascript
  • 4. Checklist ● No Problem even if you are a newcomer /NOOB I mean newbie.
  • 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. XHTML XHTML is a stricter and cleaner version of HTML. -
  • 7. So ...HTML! ● HTML is a markup language ● Markup tags used to describe a web page ● HTML page consist of head and body
  • 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. HTML (visually) <html> <head> <title>Bare back Tatoo</title> </head> <body> <h1>Heading</h1> <p>paragraph.</p> </body> </html>
  • 10. Back to XHTML!
  • 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" "">
  • 12. XHTML continued... ● No empty tags<hr> , <br> and <img> <hr /> <br /> <img /> ● All tags in lowercase. <body><p>paragraphy</p></body>
  • 13. You can also validate the XHTML At
  • 14. CSS – Cascade stylesheets ● Styling language
  • 15. CSS BOX Model Box model is crucial when are you are designing the LAYOUTS
  • 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. 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. 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. 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. 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. 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. 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. Drupal Theming and its purpose!! A webpage has content visually categorized in following regions: ● Header ● First sidebar ● Second sidebar ● Content region ● Footer
  • 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. Watch the Visual order!
  • 26. Continued...
  • 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
  • 28. More changes ● phptemplate_ prefix is GONE ● Content is now a block ● Variables $help, $mission, $footer_message etc.
  • 29. Fore more check the below urls: ● Theme upgrade guide on ● Moshe Weitzman's talk on drupal_render ● John Albin's talk about D7 theming
  • 30. Lets Drupalize a Design in D7 Skipped
  • 31. Lets talk Question and answers NOW!
  • 32. Thank you Community!