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