1 / 15

Drupal Theming from a firehose

Durham Drupal Meetup 10Feb2009 http://drupal.meetup.com/19/ North Carolina Chapter Jeff Carcillo - jnc3105@gmail.com. Drupal Theming from a firehose. Our Past – Web 1.0. User Experience – static pages with good graphics. Site Layout. HTML Pages. Images & CSS. Index .html. Web Server.

meryle
Download Presentation

Drupal Theming from a firehose

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Durham DrupalMeetup10Feb2009 http://drupal.meetup.com/19/ North Carolina Chapter Jeff Carcillo - jnc3105@gmail.com DrupalTheming from a firehose

  2. Our Past – Web 1.0 User Experience – static pages with good graphics Site Layout HTML Pages Images & CSS Index .html Web Server Submit form Database cgi • Data • SQL

  3. Transition to Drupal 6.0 User Experience – static pages with good graphics User Experience – Author Managed Content Theme Site Layout Page, Blog, Story HTML Pages CSS, JQuery, Ajax, Video… Images & CSS Login Index .html User Privileges Performance Cache Web Server Submit form Node Read Wrt Submit form Database cgi Modules • Data • SQL • Data • SQL • RSS • API • Feed S E C U R I T y Database CCK Field Level C O R E C U S T O M Views

  4. Theme Setup User Experience my-theme (subtheme) Site/sites/all/themes/ folder name is your theme name Can OVERRIDE ANYTHING with my-theme.css – or – .tpl.php (template, page, node, field, block, comment, module…) Theme: Garland .info .tpl.php .css /images “Theme Engine” Site/Sites All/Themes Theme Page, Blog, Story CSS, JQuery, Ajax, Video… Login my-theme.info file Name = my-theme Base theme = garland Stylesheets [all] [] = my-theme.css User Privileges Performance Cache Node Read Wrt Database Modules • Data • SQL • RSS • API • Feed S E C U R I T y CCK Field Level C O R E C U S T O M Views Site/Sites/ All/Modules Site/ Modules

  5. Theme parts – “Regions”, “TPL”, “CSS” Page.tpl.php Header region Left region Content region Right region Node.tpl.php Node.tpl.php Block.tpl.php Services View.tpl.php Services View.tpl.php View.tpl.php Ads region Photos View.tpl.php Photos View.tpl.php Ads.tpl.php Each BLOCK that you assign has its own tpl.php which you could intercept CSS allows you to FORMAT from the HTML snippets (w/class/id elements). e.g. Replace River of News using CSS FLOAT:LEFT Theme Engine "PHPTemplate" processes PAGE.tpl.php which contains NODE.tpl.php html snippets Admin-Site-Building-Blocks allows you to place items in REGIONS. PAGE.tpl.php code outputs <?php Print BLOCK ?> Blog Node-blog.tpl.php Footer region

  6. Theme via CSS

  7. CSS formats any structured or tagged html (class or id) • “CLASS” applies broadly (use ‘.’ for CSS to reference a CLASS) • “ID” is a unique occurrence (think of ‘#’ to mean a specific tag) CSS Crash Course <h1id="css-section-id">CSS ID is unique</h1> h1#css-section-id { color:red } <p class="css-section-stuff">CSS class is helpful</p> p.css-section-stuff { color:grey }

  8. Use CLEAN Theme & css • 3 column • custom.css • Centre River of News • Node/1 • At your service view block • Before and after view block • Float / Overlay Content • Put View/Blocks in Content • Open Firefox/Firebug • Find View IDs • Alter custom.css “CSSTheming” <front>

  9. Using CSS for THeming .front #centre #node-2 { float: left; width: 58%;} .front #centre #block-views-service_product-block_1{ padding: 2px; float: right; width: 38%; /* border: 2px dashed #f3f3f3; */} .front #centre #block-views-BeforeAndAfterImages-block_1 { padding: 2px; margin-top: 2px; float: right; width: 38%;} site/sites/all/themes/ clean/custom.css Firefox Firebug

  10. Theme via PHP

  11. Outputs HTML snippets based on variables brought forward from all modules • uses <?php print $html_string_variable; ?> • $title, $content, $site_name… • Has strict file naming for precedence inheritance… • page-front.tpl.php • page-node-43.tpl.php • page-node.tpl.php • page.tpl.php What .tpl.php does

  12. .tpl.php does a bottoms-up creation of HTML SNIPPETS with CSS TAGS included too You can edit a deliberately-named .tpl.phpfile and any change will “go up the chain” You can inspect any Drupal html page and see WELL TAGGED csselements You can write your own .css All .tpl.php and .css custom theme files are in your sites/all/themes/<theme> dir Now you know everything

  13. References and resources Most Useful! Excellent with frequent VODs http://mustardseedmedia.com Excellent! Lots of great insights! Ch 3 The Theme System Ch 2 Creating Our First Module Ch 7 Building a Content Type Still in development… Looks very promising Very good Ch 11 Theming Your Site Ch 10 Online Store (Ubercart)

  14. Quick Reference - tpl.php

  15. Ventura Cottage • DrupalFrontpage Squares Tutorial 07:00-08:30 90 Second Demo TOP RIGHT Block MIDDLE RIGHT View

More Related