0
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 yo...
Checklist before we start

●   You are an experienced person working with
    Drupal



●   You know CSS/HTML/PHP or Javas...
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...
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 ...
HTML continued...
●   Head to find the title, css declaration and meta
    information (search engine and etc.)
    <head>...
HTML (visually)


<html>
<head>
<title>Bare back Tatoo</title>
</head>
<body>

<h1>Heading</h1>

<p>paragraph.</p>

</body...
Back to XHTML!
Characteristics of XHTML
●   DOCTYPE is must for XHTML document.

    “it is an instruction to the web browser about
    w...
XHTML continued...
●   No empty tags<hr> , <br> and <img>

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




●   All tags in l...
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:"Tr...
PHP
●   Welcome the Programming language which add
    the OPENESS in business and open source
    culture. but!

●   PHP ...
PHP syntax
//Variables
<?php
$txt="Hello World";
echo $txt;
?>

//Function
<?php
echo strlen("Hello world!");
?>

//Condit...
And most imortantly Arrays!
* Numeric array
* Associative array
* Multidimensional array
//numeric
$planets=array("Mercury...
PHP+HTML code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>PHP Test</title>
  </head>
  <body>...
Javascript
●   Scripting language

    <html>
    <body>

    <script type="text/javascript">
    document.write("This is ...
Drupal
●   Free and Open Source Content Managment
    system distributed under GNU General Public
    License
●   And also...
Drupal Theming and its purpose!!
    A webpage has content visually categorized in
    following regions:
●   Header
●   F...
Drupal theme Anatomy
    sites/all/themes/Newtheme
●   .info files
●   .tpl Templates
●   .css Stylesheet
●   .js Javascri...
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
●   ....
More changes
●   phptemplate_ prefix is GONE
●   Content is now a block
●   Variables $help, $mission, $footer_message
   ...
Fore more check the below urls:
●   Theme upgrade guide on drupal.org
    http://drupal.org/node/254940

●   Moshe Weitzma...
Lets Drupalize a Design in D7
          Skipped
Lets talk Question and answers
             NOW!
Thank you Community!
Upcoming SlideShare
Loading in...5
×

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

1,775

Published on

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/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,775
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. 9th Jan 2011 Drupal 7 Theming Workshop #d7rp #d7rp_delhi Venue: Bharti Building,501, IIT
  2. 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. 3. Checklist before we start ● You are an experienced person working with Drupal ● You know CSS/HTML/PHP or Javascript
  4. 4. Checklist ● No Problem even if you are a newcomer /NOOB I mean newbie.
  5. 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. 6. XHTML XHTML is a stricter and cleaner version of HTML. - w3schools.com
  7. 7. So ...HTML! ● HTML is a markup language ● Markup tags used to describe a web page ● HTML page consist of head and body
  8. 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. 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. 10. Back to XHTML!
  11. 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. 12. XHTML continued... ● No empty tags<hr> , <br> and <img> <hr /> <br /> <img /> ● All tags in lowercase. <body><p>paragraphy</p></body>
  13. 13. You can also validate the XHTML At http://validator.w3.org
  14. 14. CSS – Cascade stylesheets ● Styling language http://www.flickr.com/photos/eelkedekker/3166324179/
  15. 15. CSS BOX Model Box model is crucial when are you are designing the LAYOUTS
  16. 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. 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. 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. 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. 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. 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. 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. 23. Drupal Theming and its purpose!! A webpage has content visually categorized in following regions: ● Header ● First sidebar ● Second sidebar ● Content region ● Footer
  24. 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. 25. Watch the Visual order! http://www.slideshare.net/pingv/grok-drupal-7-theming
  26. 26. Continued... http://www.slideshare.net/pingv/grok-drupal-7-theming
  27. 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. 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. 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. 30. Lets Drupalize a Design in D7 Skipped
  31. 31. Lets talk Question and answers NOW!
  32. 32. Thank you Community!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×