SlideShare a Scribd company logo
1 of 20
Static HTML to Drupal Theme By Ivan Zugec
Static HTML to Drupal Theme. ,[object Object],[object Object],[object Object],[object Object]
Static HTML page
Required theme files and folders ,[object Object],[object Object],[object Object],[object Object]
Where do we save themes? sites/all/themes
.info file for your theme ; $Id$ name = rgdesign core = 6.x engine = phptemplate regions[left] = Left sidebar regions[right] = Right sidebar regions[content] = Content regions[footer] = Footer
Regions
page.tpl.php file
Page.tpl.php Replace this:
Page.tpl.php With this: <title><?php print $head_title ?></title> <?php print $head ?> <?php print $styles ?> <?php print $scripts ?>
Page.tpl.php Replace this:
Page.tpl.php With this: if ($logo || $site_name) { if ($logo) { print '<a href=&quot;'. check_url($front_page) .'&quot; title=&quot;'. $site_title .'&quot;>'; print '<img src=&quot;'. check_url($logo) .'&quot; alt=&quot;'. $site_title .'&quot; id=&quot;logo&quot; /></a>'; } print '<h1>'. $site_name .'</h1>'; }
Page.tpl.php if ($logo || $site_name) { if ($logo) { print '<a href=&quot;'. check_url($front_page) .'&quot; title=&quot;'. $site_title .'&quot;>'; print '<img src=&quot;'. check_url($logo) .'&quot; alt=&quot;'. $site_title .'&quot; id=&quot;logo&quot; /></a>'; } print '<h1>'. $site_name .'</h1>'; } <?php if (isset($primary_links)) : ?>  <?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?> <?php endif; ?>
Next regions
Left Side Bars With this: Replace this: <?php if ($left): ?> <?php print $left ?> <?php endif; ?>
Right Side Bars With this: Replace this: <?php if ($search_box): ?> <div class=&quot;block_menu&quot;> <h3>Search</h3><?php print $search_box ?> </div> <?php endif; ?> <?php if ($right): ?> <?php print $right ?> <?php endif; ?>
Footer With this: Replace this: <div class=&quot;center&quot; id=&quot;f&quot;>   <?php print $footer ?> </div> <?php print $closure ?> </body>
Content region
Important Variables <?php print $breadcrumb ?> <?php print $messages ?> <?php print $tabs ?>
Important Variables <?php print $title ?> <?php print $help ?> <?php print $content ?> <?php print $feed_icons ?>

More Related Content

What's hot

String handling(string class)
String handling(string class)String handling(string class)
String handling(string class)
Ravi_Kant_Sahu
 

What's hot (20)

Learn C
Learn CLearn C
Learn C
 
Multithreading in java
Multithreading in javaMultithreading in java
Multithreading in java
 
Linked List - Insertion & Deletion
Linked List - Insertion & DeletionLinked List - Insertion & Deletion
Linked List - Insertion & Deletion
 
Source File Compilation & Make Program
Source File Compilation & Make ProgramSource File Compilation & Make Program
Source File Compilation & Make Program
 
Java OOPS Concept
Java OOPS ConceptJava OOPS Concept
Java OOPS Concept
 
Chapter 4 : Balagurusamy Programming ANSI in C
Chapter 4 : Balagurusamy Programming ANSI in CChapter 4 : Balagurusamy Programming ANSI in C
Chapter 4 : Balagurusamy Programming ANSI in C
 
Stack - Data Structure
Stack - Data StructureStack - Data Structure
Stack - Data Structure
 
Asp Architecture
Asp ArchitectureAsp Architecture
Asp Architecture
 
Abstraction java
Abstraction javaAbstraction java
Abstraction java
 
Function in C Language
Function in C Language Function in C Language
Function in C Language
 
Introduction to Perl - Day 1
Introduction to Perl - Day 1Introduction to Perl - Day 1
Introduction to Perl - Day 1
 
SchoolAdmin - School Fees Collection & Accounting Software
SchoolAdmin - School Fees Collection & Accounting SoftwareSchoolAdmin - School Fees Collection & Accounting Software
SchoolAdmin - School Fees Collection & Accounting Software
 
Defensive programming
Defensive programmingDefensive programming
Defensive programming
 
Stack and its Applications : Data Structures ADT
Stack and its Applications : Data Structures ADTStack and its Applications : Data Structures ADT
Stack and its Applications : Data Structures ADT
 
Python programming : Standard Input and Output
Python programming : Standard Input and OutputPython programming : Standard Input and Output
Python programming : Standard Input and Output
 
C Programming Unit-5
C Programming Unit-5C Programming Unit-5
C Programming Unit-5
 
Features of JAVA Programming Language.
Features of JAVA Programming Language.Features of JAVA Programming Language.
Features of JAVA Programming Language.
 
Inheritance, friend function, virtual function, polymorphism
Inheritance, friend function, virtual function, polymorphismInheritance, friend function, virtual function, polymorphism
Inheritance, friend function, virtual function, polymorphism
 
Queue - Data Structure - Notes
Queue - Data Structure - NotesQueue - Data Structure - Notes
Queue - Data Structure - Notes
 
String handling(string class)
String handling(string class)String handling(string class)
String handling(string class)
 

Viewers also liked

Viewers also liked (17)

Converting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 ThemeConverting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 Theme
 
PSD to a Drupal Theme (using a base theme)
PSD to a Drupal Theme (using a base theme)PSD to a Drupal Theme (using a base theme)
PSD to a Drupal Theme (using a base theme)
 
Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8
 
Introduction to Drupal 7 News section and home page block with views
Introduction to Drupal 7  News section and home page block with viewsIntroduction to Drupal 7  News section and home page block with views
Introduction to Drupal 7 News section and home page block with views
 
From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)
From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)
From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)
 
A Custom Drupal Theme in 40 Minutes
A Custom Drupal Theme in 40 MinutesA Custom Drupal Theme in 40 Minutes
A Custom Drupal Theme in 40 Minutes
 
Theme Kickstart
Theme KickstartTheme Kickstart
Theme Kickstart
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeMinimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
 
[Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches
[Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches[Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches
[Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches
 
Why I Hate Drupal
Why I Hate DrupalWhy I Hate Drupal
Why I Hate Drupal
 
Creating Layouts and Landing Pages for Drupal 8 - DrupalCon Dublin
Creating Layouts and Landing Pages for Drupal 8 - DrupalCon DublinCreating Layouts and Landing Pages for Drupal 8 - DrupalCon Dublin
Creating Layouts and Landing Pages for Drupal 8 - DrupalCon Dublin
 
Connected Health Reference Architecture
Connected Health Reference ArchitectureConnected Health Reference Architecture
Connected Health Reference Architecture
 
A Reference Architecture for ETL 2.0
A Reference Architecture for ETL 2.0 A Reference Architecture for ETL 2.0
A Reference Architecture for ETL 2.0
 
What is personal connected health?
What is personal connected health?What is personal connected health?
What is personal connected health?
 
Best Practices for the Hadoop Data Warehouse: EDW 101 for Hadoop Professionals
Best Practices for the Hadoop Data Warehouse: EDW 101 for Hadoop ProfessionalsBest Practices for the Hadoop Data Warehouse: EDW 101 for Hadoop Professionals
Best Practices for the Hadoop Data Warehouse: EDW 101 for Hadoop Professionals
 
Atomic design
Atomic designAtomic design
Atomic design
 

More from Ryan Cross

Drupal news 2012 October
Drupal news 2012 OctoberDrupal news 2012 October
Drupal news 2012 October
Ryan Cross
 
Sydney Drupal News June 2012
Sydney Drupal News June 2012Sydney Drupal News June 2012
Sydney Drupal News June 2012
Ryan Cross
 
Sydney Drupal News April 2012
Sydney Drupal News April 2012Sydney Drupal News April 2012
Sydney Drupal News April 2012
Ryan Cross
 
Sydney Drupal News August 2012
Sydney Drupal News August 2012Sydney Drupal News August 2012
Sydney Drupal News August 2012
Ryan Cross
 
Sydney Drupal News July 2012
Sydney Drupal News July 2012Sydney Drupal News July 2012
Sydney Drupal News July 2012
Ryan Cross
 
Sydney Drupal News February 2012
Sydney Drupal News February 2012Sydney Drupal News February 2012
Sydney Drupal News February 2012
Ryan Cross
 
Sydney Drupal News May 2012
Sydney Drupal News May 2012Sydney Drupal News May 2012
Sydney Drupal News May 2012
Ryan Cross
 
Sydney Drupal News September 2012
Sydney Drupal News September 2012Sydney Drupal News September 2012
Sydney Drupal News September 2012
Ryan Cross
 
Sydney Drupal News March 2012
Sydney Drupal News March 2012Sydney Drupal News March 2012
Sydney Drupal News March 2012
Ryan Cross
 
Sydney Drupal News February 2012
Sydney Drupal News February 2012Sydney Drupal News February 2012
Sydney Drupal News February 2012
Ryan Cross
 
Sydney Drupal News March 2012
Sydney Drupal News March 2012Sydney Drupal News March 2012
Sydney Drupal News March 2012
Ryan Cross
 

More from Ryan Cross (20)

Introduction to Content Marketing Strategy for Drupal
Introduction to Content Marketing Strategy for Drupal Introduction to Content Marketing Strategy for Drupal
Introduction to Content Marketing Strategy for Drupal
 
DrupalCon Wrap Up
DrupalCon Wrap UpDrupalCon Wrap Up
DrupalCon Wrap Up
 
Sydney Drupal News Feburary 2013
Sydney Drupal News Feburary 2013Sydney Drupal News Feburary 2013
Sydney Drupal News Feburary 2013
 
Drupal news 2012 October
Drupal news 2012 OctoberDrupal news 2012 October
Drupal news 2012 October
 
Sydney Drupal News June 2012
Sydney Drupal News June 2012Sydney Drupal News June 2012
Sydney Drupal News June 2012
 
Sydney Drupal News April 2012
Sydney Drupal News April 2012Sydney Drupal News April 2012
Sydney Drupal News April 2012
 
Sydney Drupal News August 2012
Sydney Drupal News August 2012Sydney Drupal News August 2012
Sydney Drupal News August 2012
 
Sydney Drupal News July 2012
Sydney Drupal News July 2012Sydney Drupal News July 2012
Sydney Drupal News July 2012
 
Sydney Drupal News February 2012
Sydney Drupal News February 2012Sydney Drupal News February 2012
Sydney Drupal News February 2012
 
Sydney Drupal News May 2012
Sydney Drupal News May 2012Sydney Drupal News May 2012
Sydney Drupal News May 2012
 
Sydney Drupal News September 2012
Sydney Drupal News September 2012Sydney Drupal News September 2012
Sydney Drupal News September 2012
 
Sydney Drupal News March 2012
Sydney Drupal News March 2012Sydney Drupal News March 2012
Sydney Drupal News March 2012
 
Lightning Talk: Drupal Feeds
Lightning Talk: Drupal FeedsLightning Talk: Drupal Feeds
Lightning Talk: Drupal Feeds
 
Sydney Drupal News February 2012
Sydney Drupal News February 2012Sydney Drupal News February 2012
Sydney Drupal News February 2012
 
Sydney Drupal News March 2012
Sydney Drupal News March 2012Sydney Drupal News March 2012
Sydney Drupal News March 2012
 
Drupal's Roadmap: The Magic 8 Ball
Drupal's Roadmap: The Magic 8 BallDrupal's Roadmap: The Magic 8 Ball
Drupal's Roadmap: The Magic 8 Ball
 
Panels 2 Demo
Panels 2 DemoPanels 2 Demo
Panels 2 Demo
 
Modify a Theme
Modify a ThemeModify a Theme
Modify a Theme
 
Drupal Basics
Drupal BasicsDrupal Basics
Drupal Basics
 
Drupal Modules
Drupal ModulesDrupal Modules
Drupal Modules
 

Converting Static Html To Drupal Theme

  • 1. Static HTML to Drupal Theme By Ivan Zugec
  • 2.
  • 4.
  • 5. Where do we save themes? sites/all/themes
  • 6. .info file for your theme ; $Id$ name = rgdesign core = 6.x engine = phptemplate regions[left] = Left sidebar regions[right] = Right sidebar regions[content] = Content regions[footer] = Footer
  • 10. Page.tpl.php With this: <title><?php print $head_title ?></title> <?php print $head ?> <?php print $styles ?> <?php print $scripts ?>
  • 12. Page.tpl.php With this: if ($logo || $site_name) { if ($logo) { print '<a href=&quot;'. check_url($front_page) .'&quot; title=&quot;'. $site_title .'&quot;>'; print '<img src=&quot;'. check_url($logo) .'&quot; alt=&quot;'. $site_title .'&quot; id=&quot;logo&quot; /></a>'; } print '<h1>'. $site_name .'</h1>'; }
  • 13. Page.tpl.php if ($logo || $site_name) { if ($logo) { print '<a href=&quot;'. check_url($front_page) .'&quot; title=&quot;'. $site_title .'&quot;>'; print '<img src=&quot;'. check_url($logo) .'&quot; alt=&quot;'. $site_title .'&quot; id=&quot;logo&quot; /></a>'; } print '<h1>'. $site_name .'</h1>'; } <?php if (isset($primary_links)) : ?> <?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?> <?php endif; ?>
  • 15. Left Side Bars With this: Replace this: <?php if ($left): ?> <?php print $left ?> <?php endif; ?>
  • 16. Right Side Bars With this: Replace this: <?php if ($search_box): ?> <div class=&quot;block_menu&quot;> <h3>Search</h3><?php print $search_box ?> </div> <?php endif; ?> <?php if ($right): ?> <?php print $right ?> <?php endif; ?>
  • 17. Footer With this: Replace this: <div class=&quot;center&quot; id=&quot;f&quot;> <?php print $footer ?> </div> <?php print $closure ?> </body>
  • 19. Important Variables <?php print $breadcrumb ?> <?php print $messages ?> <?php print $tabs ?>
  • 20. Important Variables <?php print $title ?> <?php print $help ?> <?php print $content ?> <?php print $feed_icons ?>