Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
×

of

Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 1 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 2 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 3 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 4 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 5 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 6 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 7 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 8 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 9 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 10 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 11 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 12 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 13 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 14 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 15 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 16 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 17 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 18 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 19 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 20 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 21 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 22 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 23 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 24 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 25 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 26 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 27 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 28 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 29 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 30 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 31 Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR Slide 32
Upcoming SlideShare
Catch the 1% in iterative design (OSIDays 11)
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

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

Download to read offline

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/

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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!

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/

Views

Total views

3,340

On Slideshare

0

From embeds

0

Number of embeds

618

Actions

Downloads

21

Shares

0

Comments

0

Likes

0

×