drupal theming from a firehose
Post on 10-Feb-2016
61 Views
Preview:
DESCRIPTION
TRANSCRIPT
DRUPAL THEMING FROM A FIREHOSE
Durham Drupal Meetup 10Feb2009http://drupal.meetup.com/19/ North Carolina ChapterJeff Carcillo - jnc3105@gmail.com
OUR PAST – WEB 1.0
cgi
Web ServerSubmitform
Index .html
Data•SQL
Database
User Experience – static pages with good graphics
Site Layout HTML Pages Images & CSS
Web ServerPerformance Cache
DatabaseDatabase
Submitform
Submitform
Index .html
User Experience – static pages with good graphics
Site Layout HTML Pages Images & CSS
User Experience – Author Managed Content
Theme Page, Blog, Story
CSS, JQuery, Ajax, Video…
Data•SQL
cgi
TRANSITION TO DRUPAL 6.0
CORE
CUSTOM
Modules
NodeRead Wrt
Login User Privileges
Data•SQL•RSS•API•Feed
SECURITy
CCK Field Level
Views
CORE
CUSTOM
Modules
Performance CacheNodeRead Wrt
Login User Privileges
Data•SQL•RSS•API•Feed
SECURITy
Database
CCK Field Level
Views
User Experience
Page, Blog, Story
CSS, JQuery, Ajax, Video…
Site/Modules
Site/Sites/All/Modules
Site/SitesAll/Themes
my-theme (subtheme)Site/sites/all/themes/
folder name is your theme name
Can OVERRIDE ANYTHING withmy-theme.css
– or – .tpl.php
(template, page, node, field, block, comment, module…)
THEME SETUP
Theme: Garland.info
.tpl.php.css
/images“Theme Engine”
my-theme.info fileName = my-themeBase theme = garlandStylesheets [all] [] = my-theme.css
Theme
THEME PARTS – “REGIONS”, “TPL”, “CSS”Page.tpl.php
Footer region
Header region
Right region
Ads region
Left region Content region
Node.tpl.php
BlogNode-blog.tpl.php
Block.tpl.php
View.tpl.php
Ads.tpl.php
ServicesView.tpl.php
PhotosView.tpl.php
Node.tpl.php
ServicesView.tpl.php
PhotosView.tpl.php
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 ?>
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 VIA CSSAs a Designer As a PHP programmer
css tpl.phpApply CSS styles to the well-
tagged Drupal Page, Node, Field, View and Block output
Inherit and Override specific “<targeted>.tpl.php” files for
Page, Node, Field
Style html Class or ID for #$var in standard Drupal HTML output
Output <?php print $var?> of standard Drupal $var names e.g.
$title, $terms…
CSS CRASH COURSE
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)
<h1 id="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 }
“CSS THEMING” <FRONT> 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 Content1. Put View/Blocks in Content2. Open Firefox/Firebug3. Find View IDs4. Alter custom.css
.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%;}
USING CSS FOR THEMING
Firefox Firebug
site/sites/all/themes/clean/custom.css
THEME VIA PHPAs a Designer As a PHP programmer
css tpl.phpApply CSS styles to the well-
tagged Drupal Page, Node, Field, View and Block output
Inherit and Override specific “<targeted>.tpl.php” files for
Page, Node, Field
Style html Class or ID for #$var in standard Drupal HTML output
Output <?php print $var ?> of standard Drupal $var names e.g.
$title, $terms…
WHAT .TPL.PHP DOES
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
NOW YOU KNOW EVERYTHING
1. .tpl.php does a bottoms-up creation of HTML SNIPPETS with CSS TAGS included too
2. You can edit a deliberately-named .tpl.php file and any change will “go up the chain”
3. You can inspect any Drupal html page and see WELL TAGGED css elements
4. You can write your own .css5. All .tpl.php and .css custom theme files are in your
sites/all/themes/<theme> dir
REFERENCES AND RESOURCES
Excellent! Lots of great insights!Ch 3 The Theme SystemCh 2 Creating Our First ModuleCh 7 Building a Content Type
Still in development…Looks very promising
Very goodCh 11 Theming Your SiteCh 10 Online Store (Ubercart)
Most Useful!Excellent with frequent VODs
http://mustardseedmedia.com
QUICK REFERENCE - TPL.PHPTemplate tpl.php type: Controls these: drupal.org/node/
PAGE.tpl.php HTML, Body, Regions… 11812
NODE.tpl.php $Title, $Content, $Terms … 11816
COMMENT.tpl.php $Title, $Content… 11815
BLOCK.tpl.php $Block->content… 11813
CCK field in precedence order…content-field-<FIELD_NAME>-<NODE_TYPE>.tpl.php a <field> in a <node>
206980content-field-<NODE_TYPE>.tpl.php All fields in a <node>content-field-<FIELD_NAME>.tpl.php A <field> in any nodecontent-field.tpl.php Default
90 SECOND DEMO
Ventura Cottage Drupal Frontpage Squares Tutorial 07:00-08:30
TOP RIGHTBlock
MIDDLE RIGHTView
top related