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

9th Jan 2011

Drupal 7 Theming Workshop
#d7rp #d7rp_delhi

Venue: Bharti Building,501, IIT

About your presenter

Drupal Themer from 2007-current...
Worked as Blender 3d animator (2006-2007)
For more you may check at
twitter @gauravmishr

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.)
<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>

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

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>

<hr /> <br /> <img />

● All tags in lowercase.

<body><p>paragraphy</p></body>

You can also validate the XHTML
At 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
<?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

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

<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.

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!

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 answers
NOW!

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

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

Similar to Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR (20)

Recently uploaded

Recently uploaded (20)

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