Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
-
Upload
gaurav-mishra -
Category
Technology
-
view
1.691 -
download
3
description
Transcript of Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
![Page 1: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/1.jpg)
Drupal 7 Theming Workshop#d7rp #d7rp_delhi
9th Jan 2011
Venue: Bharti Building,501, IIT
![Page 2: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/2.jpg)
Drupal Themer from 2007-current...Worked as Blender 3d animator (2006-2007)
For more you may check at twitter @gauravmishr
About your presenter
![Page 3: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/3.jpg)
Checklist before we start
● You are an experienced person working with Drupal
● You know CSS/HTML/PHP or Javascript
![Page 4: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/4.jpg)
Checklist● No Problem even if you are a newcomer
/NOOB I mean newbie.
![Page 5: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/5.jpg)
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.
![Page 6: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/6.jpg)
XHTML
XHTML is a stricter and cleaner version of HTML.
- w3schools.com
![Page 7: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/7.jpg)
So ...HTML!● HTML is a markup language
● Markup tags used to describe a web page
● HTML page consist of head and body
![Page 8: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/8.jpg)
HTML continued...● Head to find the title, css declaration and meta
information (search engine and etc.)
● Body
<head><title>Title of the document</title><link rel="stylesheet" type="text/css" href="mystyle.css" /><meta name="author" content="Anonymous" /></head>
<body>The content of the document......</body>
![Page 9: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/9.jpg)
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
![Page 10: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/10.jpg)
Back to XHTML!
![Page 11: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/11.jpg)
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">
![Page 12: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/12.jpg)
XHTML continued...● No empty tags<hr> , <br> and <img>
● All tags in lowercase.
<hr /> <br /> <img />
<body><p>paragraphy</p></body>
![Page 13: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/13.jpg)
You can also validate the XHTMLAt http://validator.w3.org
![Page 14: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/14.jpg)
CSS – Cascade stylesheets● Styling language
http://www.flickr.com/photos/eelkedekker/3166324179/
![Page 15: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/15.jpg)
CSS BOX Model
Box model is crucial when are you are designing the LAYOUTS
![Page 16: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/16.jpg)
CSS code..
/* demo.css */
body{background-color:#d0e4fe;}h1{color:orange;text-align:center;}p{font-family:"Trebuchet MS",Verdana,Arial;font-size:20px;}
![Page 17: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/17.jpg)
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.
![Page 18: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/18.jpg)
PHP syntax//Variables<?php$txt="Hello World";echo $txt;?> //Function<?phpecho 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
![Page 19: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/19.jpg)
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" ) );
![Page 20: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/20.jpg)
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>
![Page 21: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/21.jpg)
Javascript● Scripting language
● Used by web developers/designers to add interactivity to web pages.
<html><body><script type="text/javascript">document.write("This is my first write right in JavaScript!");</script></body></html>
![Page 22: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/22.jpg)
Drupal ● Free and Open Source Content Managment
system distributed under GNU General Public License
● And also described asWeb application framework.
● Consist of Core modules, themes and contributed modules by COMMUNITY!
![Page 23: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/23.jpg)
Drupal Theming and its purpose!!
A webpage has content visually categorized in following regions:
● Header● First sidebar● Second sidebar● Content region● Footer
![Page 24: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/24.jpg)
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
![Page 25: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/25.jpg)
Watch the Visual order!
http://www.slideshare.net/pingv/grok-drupal-7-theming
![Page 26: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/26.jpg)
Continued...
http://www.slideshare.net/pingv/grok-drupal-7-theming
![Page 27: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/27.jpg)
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
![Page 28: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/28.jpg)
More changes● phptemplate_ prefix is GONE● Content is now a block● Variables $help, $mission, $footer_message
etc.
http://www.slideshare.net/JohnAlbin/20100420-newd7theming
![Page 29: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/29.jpg)
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
![Page 30: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/30.jpg)
Lets Drupalize a Design in D7 Skipped
![Page 31: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/31.jpg)
Lets talk Question and answersNOW!
![Page 32: Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b490f04a7959da2e8b4688/html5/thumbnails/32.jpg)
Thank you Community!