Embed Size (px)
DESCRIPTION
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/
Citation preview
Drupal 7 Theming Workshop#d7rp #d7rp_delhi
9th Jan 2011
Venue: Bharti Building,501, IIT
Drupal Themer from 2007-current...Worked as Blender 3d animator (2006-2007)
For more you may check at twitter @gauravmishr
About your presenter
Checklist before we start
● You are an experienced person working with Drupal
● You know CSS/HTML/PHP or Javascript
Checklist● No Problem even if you are a newcomer
/NOOB I mean newbie.
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.
XHTML
XHTML is a stricter and cleaner version of HTML.
- w3schools.com
So ...HTML!● HTML is a markup language
● Markup tags used to describe a web page
● HTML page consist of head and body
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>
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
Back to XHTML!
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">
XHTML continued...● No empty tags<hr> , <br> and <img>
● All tags in lowercase.
<hr /> <br /> <img />
<body><p>paragraphy</p></body>
You can also validate the XHTMLAt http://validator.w3.org
CSS – Cascade stylesheets● Styling language
http://www.flickr.com/photos/eelkedekker/3166324179/
CSS BOX Model
Box model is crucial when are you are designing the LAYOUTS
CSS code..
/* demo.css */
body{background-color:#d0e4fe;}h1{color:orange;text-align:center;}p{font-family:"Trebuchet MS",Verdana,Arial;font-size:20px;}
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.
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
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" ) );
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>
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>
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!
Drupal Theming and its purpose!!
A webpage has content visually categorized in following regions:
● Header● First sidebar● Second sidebar● Content region● Footer
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
Watch the Visual order!
http://www.slideshare.net/pingv/grok-drupal-7-theming
Continued...
http://www.slideshare.net/pingv/grok-drupal-7-theming
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
More changes● phptemplate_ prefix is GONE● Content is now a block● Variables $help, $mission, $footer_message
etc.
http://www.slideshare.net/JohnAlbin/20100420-newd7theming
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
Lets Drupalize a Design in D7 Skipped
Lets talk Question and answersNOW!
Thank you Community!
