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

  • 1,672 views
Uploaded on

http://www.drupal7releaseparty.org/india/release-party-drupal-user-delhincr …

http://www.drupal7releaseparty.org/india/release-party-drupal-user-delhincr

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/

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,672
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
19
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. - w3schools.com
  • 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> http://www.ratchetup.com/eyes/2005/01/browser_complia.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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • 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 http://validator.w3.org
  • 14. CSS – Cascade stylesheets ● Styling language http://www.flickr.com/photos/eelkedekker/3166324179/
  • 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! http://www.slideshare.net/pingv/grok-drupal-7-theming
  • 26. Continued... http://www.slideshare.net/pingv/grok-drupal-7-theming
  • 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. 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. 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. Lets Drupalize a Design in D7 Skipped
  • 31. Lets talk Question and answers NOW!
  • 32. Thank you Community!