SlideShare una empresa de Scribd logo
1 de 65
Descargar para leer sin conexión
Drupal 7 Theming

Changes in Drupal7 and Theme Inheritance
Summary
Assumes some knowledge of Drupal themes
Assumes some knowledge of HTML/CSS

                  @aimee_maree
                www.aimeemaree.com
        Drupal Solution Architect @demonzmedia
         Freelance Open Source Solution Design
   Believer in Free Speech and Free Libre Open Source
                        Software

      This presentation was created using Libre Office
What is a Theme
  In a CMS a presentation layer displays the
 content to website visitors based on a set of
                 templates

“A theme is a collection of files that define the
      presentation layer.” – Drupal.org

Think of it as the index.html with static content
            replaced by PHP variables
Biggest theme change since
Drupal 4.7
That’s nice but, what does it all
mean anyway?
New functions for content
$content does not require preprocess functions in order to split
content

Two new functions for printing out node variables render() and hide()

<div class="content">
 <?php
      // First we hide the comments and links now so that we can render them later.
           hide($content['comments']);
           hide($content['links']);
  // Then we print the content. Comments and links not included here.
           print render($content);
 ?>
</div>
  // Then we print the links and comments separately
<?php print render($content['links']); ?>
<?php print render($content['comments']); ?>.
Bye Bye PHPTemplate overrides
Function names must match theme name

In Drupal6 you could override theme functions with calling
PHPTemplate.engine

     function phptemplate_breadcrumb()

In Drupal7 this has been depreciated

     function THEMENAME_breadcrumb()
box.tpl.php is now extinct
Template delimiter change
Template suggestions in Drupal7 must be
 separated by -- not -

node--news.tpl.php

You can still use - to separate names

node--media-article.tpl.php

node--content-type-machine-name.tpl.php
Default regions in Drupal7
Drupal7 has new default regions

    header
    help (new region to display help)
    highlight (replaces mission)
    content (must be included in a theme)
    sidebar_first
    sidebar_second
    footer
Hidden regions in Drupal7
Drupal 7 now has hidden regions
Modules can print content out to hidden regions
without needed to create a block

The below example would print content but not
wishlist, however a module can print its output to the
region wishlist

     regions[content] = Content
     regions[wishlist] = Wishlist
     regions_hidden[] = wishlist
Hiding CSS elements
Two new CSS classes to assist with hiding CSS
elements in Drupal7


.element-hidden hides an element from all users

.element-invisible hides an element visually, which means
it remains available to screen readers
More CSS changes
Drupal 7 is adhering to CSS naming conventions

.clear-block was removed and replaced with .clearfix


  In Drupal6 we would call
  <div class="clear-block">

  Now in Drupal7 we call
  <div class="clearfix">
More power to be an individual
Preprocess and Process
Process functions will run after preprocess functions

This enables a two step approach when variables need
to be worked on in two phases;

 In preprocess you can add classes into an
 Array

 In process you can flatten the array into a
 string for template printing
Preprocess functions
In Drupal7 they apply to both templates and
functions

Preprocess functions are called before process
functions

The preprocessor enables variables to be placed
within .tpl.php files
Theme Hook Alter
Hook Alter is no longer just for modules

hook_page_alter – allows all variables displayed on a
page to be altered/hidden
hook_form_alter – allows small tweaks to forms, no
need to create a custom module
hook_js_alter
hook_css_alter
No longer need node.tpl.php
In Drupal6 we needed to have node.tpl.php in our
theme in order to theme content types

 sites/all/themes/ourtheme/node.tpl.php
 sites/all/themes/ourtheme/node-event.tpl.php

In Drupal7 we no longer need node.tpl.php in our
theme in order to theme content types

 modules/node/node.tpl.php
 sites/all/themes/ourtheme/node--event.tpl.php
Did somebody mention
wildcards?
Wildcard Suggestions
Drupal7 can now use wildcard suggestions in template
names

Drupal6, needed to know the specific ID
Page-user.tpl.php would theme all user pages as well as the log-
in, to theme only the user pages you would need to specify the
integer for all Page-user-42.tpl.php, Page-user-32.tpl.php

Drupal7, you can specify a wildcard
So you can theme all user pages but not the login
page--user--%.tpl.php
Over 50 theme changes in
Drupal7
$content now appears in block admin UI

Blocks have more meaningful CSS classes .block-blog-recent

$classes variable can be added to your preprocess hooks

Additions to drupal_add_css()

Classes and Attributes are now standard and predefined

All titles now have $prefix and $suffix added
Drupal7 Accessibility Changes
Accessibility Changes
RDFa can now be included, make sure you add;

<head profile=”<?php print $grddl_profile; ?>

Adding “Skip to Navigation” to core themes

Removal of duplicate and null tags

Creation of the D7AX hash tag for accessibility for module
and theme maintainers

Some modules/themes now include WAI-ARIA
So many Templates?
html.tpl.php
Webpage output is now constructed by
html.tpl.php and not page.tpl.php

Page.tpl.php has been split apart
html.tpl.php now contains the
content between <head> </head> and
constructs the template

html.tpl.php calls page.tpl
Allows for more granular control
html.tpl.php
page.tpl.php
No longer contains the header information that's in
html.tpl.php

No longer constructs the template thats html.tpl.php
job

Is now called from html.tpl.php

Now only contains the contents between the wrapper
DIV ie the header, sidebars, page content
page.tpl.php
node.tpl.php
As with Drupal6 in Drupal7 node prints out the main
content area

No longer need to have node.tpl.php in your theme
when creating custom node.tpl's

Can theme specific node's

node--nodeid.tpl.php
node--type.tpl.php
node.tpl.php
node.tpl.php
region.tpl.php

New to Drupal 7 allows ease of changing region
styling

Can theme all regions or themes a specific
region

Allows you to wrap more HTML and CSS code
around the region area
region.tpl.php
Allows more control of Drupal out-put

region.tpl.php will allow you to style all regions the
same

To style the menu differently you can specify region--
menu.tpl.php

Can theme all regions
     region.tpl.php
Can theme a specific region
     region—search.tpl.php
region.tpl.php
field.tpl.php
New to Drupal 7

Fields can be themed with field.tpl.php
Can theme individual fields or groups of field types

Will theme all the fields that are of that type

Must flush cache when adding and removing templates
field.tpl.php
For example you create an image field and use that
across three content types, the field theme will apply
the field.tpl.php to all three content types

field.tpl.php
field--field-type.tpl.php
field--field-name.tpl.php
field--content-type.tpl.php
field--field-name--content-type.tpl.php
field.tpl.php
Putting it all together
But Drupal likes to add its own HTML?
The Inheritance Process
Drupal inheritance works as a system of overrides

Has a specific cascading order (some exceptions noted)

Powerful, because it enables you to override the things you
don't like

All changes live within your theme, leaving the system
defaults alone

So we OVERRIDE and don't HACK
Drupal Overrides

          Modules
           Core        A Default




        Theme Engine   B   Override




           Theme       C   Override
Theme Registry can also be
manipulated
Template Inheritance

1. Drupal core applies its own .tpl.php files they are
  called first
2.Drupal modules apply their own .tpl.php files these
  are applied second and over write any css calls that
  exist in core tpl.php files
3.Your theme has its own .tpl.php files these are
  applied last and over write calls in core tpl.php files
  and module tpl.php files

4. Your theme has the final say!
Drupal .tpl.php inheritance
                theme tpl.php files                    Theme Wins
   /sites/all/themes/ourtheme/templates/node.tpl.php
                                                         module
                                                         node.tpl.php gets
                                                         overridden by the
                module tpl.php files                     them
                                                         node.tpl.php
    /sites/all/modules/examplemodule/node.tpl.php


                                                          Core
                                                          node.tpl.php gets
                  core tpl.php files
                                                          overridden by the
             /modules/node/node.tpl.php                   modules
                                                          node.tpl.php
Nothing to inherit?
              File does not exist
                                             Core Wins
                                              There is no file to
                                              overwrite the
    /sites/all/themes/ourtheme/templates/?
                                              core so it is used
                                              to create the
                                              output
              File does not exist
                                              There is no file to
     /sites/all/modules/examplemodule/?       overwrite the
                                              core tpl file


               core tpl.php files
                                              Core html.tpl.php
                                              is applied to the
         /modules/node/html.tpl.php
                                              layout
Inheritance within your own
theme
Templates within your own Theme can also be overwritten
by other templates in your theme this allows you to be
specific with your template target

Drupal.org describes it as “Template suggestions are made
based on these factors

  Listed from the most specific template to    the least.

  Drupal will use the most specific template   it finds.”
In Drupal most specific wins
                         Specific Wins
                          node—nodeid.tpl.php will
  node--nodeid.tpl.php    apply to the specific node
                          that matches the id number



                          node--type.tpl.php will
   node--type.tpl.php     apply to all nodes of a
                          specific content type

                          node.tpl.php will be
                          called to theme all Drupal
     node.tpl.php         nodes
Drupal module theming
There are 42 different .tpl files in Drupal7 core modules folder.
     /modules/modulename/*.tpl.php

Each one of these can be copied and placed in your own
theme to overwrite the output
     /sites/all/theme/yourtheme/templates/*.tpl.php

If a contributed module has a .tpl file this can be copied into
your theme folder and it will overwrite the .tpl in the modules
folder
     /sites/all/modules/example/*.tpl.php
So to theme a module?
1.Take a copy of the .tpl.php file we need from the
 module

1.Move the copy to our themes templates folder, this
 can be under the folder
 theme/templates/*.tpl.php
 or under the root of the theme folder
 theme/*.tpl.php

1.Flush cache or flush the theme registry to see if we
 can notice the changes on the website
But what about functions?
Theme functions are also
Inherited
1.Modules provide their own theme functions
2.Find the theme function in .module
3.Copy the function into your template.php file
4.Change the function name from theme_pager
  to your-theme_pager
5.Flush cache
6.Your theme has the final say!
Theme Function Inheritance

                                                   Theme Wins
    Core module file themes the pager, this is
            considered the default                   If no function is found
                                                     in your theme then
                 theme_pager()                       the default is applied



                                                      Drupal looks in your
                                                      theme folder first
Your template.php in sites/all/themes/your_theme
                                                      If it finds the function
                 theme_pager()                        there it applies it and
                                                      stops looking
Setting Template Variables

1. Locate the preprocess function you want to change
   the variable for
2.Copy the preprocess function into your template.php
   file
3. Change the function name to match your theme
   name
4.Your template.php has the final say!
Preprocess Inheritance

                                                      Your theme Wins
Your template.php in sites/all/themes/your_theme
                                                        Variable is appended
                                                        to your new value
     function yourtheme_preprocess(&$vars)
     {$vars['new_variable'] = 'happy hippie'; }



                                                        Preprocess calls $vars
                                                        and also $hook allows
     Core module file themes the pager, this is         your template.php to
             considered the default                     hook in and change the
                                                        variable
function garland_preprocess(&$vars, $hook) { if … }
What about sub-themes?
Pre-process functions are
stacked
Do not get overwritten but stack on top of each other

What does this mean?

If we declare in our sub theme the same preprocess
functions as our base theme it will get added to the
base theme and not overwrite it
Template.php is stacked
The sub-theme and base theme template.php file will be
stacked

base theme is included first and then our sub-theme is
included

This means we inherit from our base theme and append to
our sub theme for template.php
Sub-themes inherit from base

Template files can be overwritten by adding that .tpl.php
inside our subtheme

Theme function overwrites work in the same way we can
recreate a base thee function in our template.php and this
will overwrite the base theme settings

We can overwrite CSS / JavaScript files by incuding them in
our subtheme .info file
What is not inherited in sub-
themes?
Theme settings are not inherited

So if we want our sub theme to have these
we need to;

1. copy the theme-settings.php from the
base theme folder

2. place into our sub-theme folder

3. make any modification's we need to our
sub-theme file
So many CSS files
Drupal core CSS

1. Drupal core applies its own .css file this is called first
2.Drupal modules apply their own .css files these are
   applied second and over write any css calls that exist
   in core css files
3. Your theme has its own .css files these are applied
   last and over write calls in core css files and module
   css files
4.Your theme has the final say!
Drupal CSS inheritance

If theme .css file has the same class call, it will be
          overwritten by the theme css                    Theme Wins
                h1 { font-size: 3em; }                        Module css calls
                                                              gets overridden
                                                              by the theme css
If module .css file has the same class call, it will be       calls
         overwritten by the module css

                h1 { font-size: 2em; }
                                                              Core css calls
                                                              get overridden by
          Core css files style a header tag                   the modules if there
                                                              is a file with the
               h1 { font-size: 1.6em; }                       same name style.css
Inheritance Don't and Do’s
Do save your theme folder/files into /sites/all/themes [correct]
Don't edit or save files in /themes [not correct]

Don't over write core themes files that live in the base folder of Drupal, this is called
hacking core
Dont take a copy of a core theme to create another theme
Do use a contributed theme or create sub theme from a base theme

You see a CSS class coming from module/node/node.css?
  Don’t change the module/node/node.css file
  Do copy the css call and paste it into your theme.css file

You want to use your own css to style a module?
  Don’t change sites/all/modules/name/module.css file
  Do take a copy of the css file, place a copy of the module.css file                       into
your theme folder and enter stylesheets[all][] =
  modulestyle.css into your themes info file Do flush cache
Oh did I mention Clear Cache?
Recommended Themes

Boron re-writes Drupal core templates into HTML5 with WAI-
ARIA roles and WCAG 2.0 compliance

Mothership removes core CSS and HTML markup to provide a
cleaner base

Stark shows the core CSS and HTML mark-up provided by
Drupal

Omega and Adaptive WCAG 1.0 compliance some WAI-ARIA
support allow for responsive theming
Its a lot to take in




@aimee_maree
Aimee Maree Forsstrom
www.aimeemaree.com
Drupal Solution Architect

Más contenido relacionado

La actualidad más candente

Building Content Types with Dexterity
Building Content Types with DexterityBuilding Content Types with Dexterity
Building Content Types with DexterityDavid Glick
 
Php on the desktop and php gtk2
Php on the desktop and php gtk2Php on the desktop and php gtk2
Php on the desktop and php gtk2Elizabeth Smith
 
Intro to drupal module internals asheville
Intro to drupal module internals ashevilleIntro to drupal module internals asheville
Intro to drupal module internals ashevillecgmonroe
 
Gentle Intro to Drupal Code
Gentle Intro to Drupal CodeGentle Intro to Drupal Code
Gentle Intro to Drupal CodeAddison Berry
 
Phing: Building with PHP
Phing: Building with PHPPhing: Building with PHP
Phing: Building with PHPhozn
 
Spl to the Rescue - Zendcon 09
Spl to the Rescue - Zendcon 09Spl to the Rescue - Zendcon 09
Spl to the Rescue - Zendcon 09Elizabeth Smith
 
13th Sep, Drupal 7 advanced training by TCS
13th Sep, Drupal 7 advanced training by TCS 13th Sep, Drupal 7 advanced training by TCS
13th Sep, Drupal 7 advanced training by TCS DrupalMumbai
 
Streams, sockets and filters oh my!
Streams, sockets and filters oh my!Streams, sockets and filters oh my!
Streams, sockets and filters oh my!Elizabeth Smith
 
20100622 e z_find_slides_gig_v2.1
20100622 e z_find_slides_gig_v2.120100622 e z_find_slides_gig_v2.1
20100622 e z_find_slides_gig_v2.1Gilles Guirand
 
Decoupled Libraries for PHP
Decoupled Libraries for PHPDecoupled Libraries for PHP
Decoupled Libraries for PHPPaul Jones
 
Jsf2 composite-components
Jsf2 composite-componentsJsf2 composite-components
Jsf2 composite-componentsvinaysbk
 
Puppet camp2021 testing modules and controlrepo
Puppet camp2021 testing modules and controlrepoPuppet camp2021 testing modules and controlrepo
Puppet camp2021 testing modules and controlrepoPuppet
 
CakePHP 2.0 - It'll rock your world
CakePHP 2.0 - It'll rock your worldCakePHP 2.0 - It'll rock your world
CakePHP 2.0 - It'll rock your worldGraham Weldon
 
Joomla 1.5 modules - Joomla!Days NL 2009 #jd09nl
Joomla 1.5 modules - Joomla!Days NL 2009 #jd09nlJoomla 1.5 modules - Joomla!Days NL 2009 #jd09nl
Joomla 1.5 modules - Joomla!Days NL 2009 #jd09nlJoomla!Days Netherlands
 

La actualidad más candente (15)

Building Content Types with Dexterity
Building Content Types with DexterityBuilding Content Types with Dexterity
Building Content Types with Dexterity
 
Php on the desktop and php gtk2
Php on the desktop and php gtk2Php on the desktop and php gtk2
Php on the desktop and php gtk2
 
Intro to drupal module internals asheville
Intro to drupal module internals ashevilleIntro to drupal module internals asheville
Intro to drupal module internals asheville
 
Gentle Intro to Drupal Code
Gentle Intro to Drupal CodeGentle Intro to Drupal Code
Gentle Intro to Drupal Code
 
Phing: Building with PHP
Phing: Building with PHPPhing: Building with PHP
Phing: Building with PHP
 
Spl to the Rescue - Zendcon 09
Spl to the Rescue - Zendcon 09Spl to the Rescue - Zendcon 09
Spl to the Rescue - Zendcon 09
 
13th Sep, Drupal 7 advanced training by TCS
13th Sep, Drupal 7 advanced training by TCS 13th Sep, Drupal 7 advanced training by TCS
13th Sep, Drupal 7 advanced training by TCS
 
Streams, sockets and filters oh my!
Streams, sockets and filters oh my!Streams, sockets and filters oh my!
Streams, sockets and filters oh my!
 
20100622 e z_find_slides_gig_v2.1
20100622 e z_find_slides_gig_v2.120100622 e z_find_slides_gig_v2.1
20100622 e z_find_slides_gig_v2.1
 
Decoupled Libraries for PHP
Decoupled Libraries for PHPDecoupled Libraries for PHP
Decoupled Libraries for PHP
 
Jsf2 composite-components
Jsf2 composite-componentsJsf2 composite-components
Jsf2 composite-components
 
Puppet camp2021 testing modules and controlrepo
Puppet camp2021 testing modules and controlrepoPuppet camp2021 testing modules and controlrepo
Puppet camp2021 testing modules and controlrepo
 
CakePHP 2.0 - It'll rock your world
CakePHP 2.0 - It'll rock your worldCakePHP 2.0 - It'll rock your world
CakePHP 2.0 - It'll rock your world
 
Spl in the wild
Spl in the wildSpl in the wild
Spl in the wild
 
Joomla 1.5 modules - Joomla!Days NL 2009 #jd09nl
Joomla 1.5 modules - Joomla!Days NL 2009 #jd09nlJoomla 1.5 modules - Joomla!Days NL 2009 #jd09nl
Joomla 1.5 modules - Joomla!Days NL 2009 #jd09nl
 

Similar a Drupal7 themeing changes and inheritence

Theming tips and tricks
Theming tips and tricksTheming tips and tricks
Theming tips and tricksaaroncouch
 
Drupal 8 - Corso frontend development
Drupal 8 - Corso frontend developmentDrupal 8 - Corso frontend development
Drupal 8 - Corso frontend developmentsparkfabrik
 
Learning PHP for Drupal Theming, DC Chicago 2009
Learning PHP for Drupal Theming, DC Chicago 2009Learning PHP for Drupal Theming, DC Chicago 2009
Learning PHP for Drupal Theming, DC Chicago 2009Emma Jane Hogbin Westby
 
Architecture of Drupal - Drupal Camp
Architecture of Drupal - Drupal CampArchitecture of Drupal - Drupal Camp
Architecture of Drupal - Drupal CampDipen Chaudhary
 
Drupal 6 Overview
Drupal 6 OverviewDrupal 6 Overview
Drupal 6 OverviewRyan Cross
 
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 ThemeAdolfo Nasol
 
Drupal 8: frontend development
Drupal 8: frontend developmentDrupal 8: frontend development
Drupal 8: frontend developmentsparkfabrik
 
7 Theming in Drupal
7 Theming in Drupal7 Theming in Drupal
7 Theming in DrupalWingston
 
Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Eugenio Minardi
 
Theming Drupal: Beyond the Look and Feel
Theming Drupal: Beyond the Look and FeelTheming Drupal: Beyond the Look and Feel
Theming Drupal: Beyond the Look and FeelChris Albrecht
 

Similar a Drupal7 themeing changes and inheritence (20)

A look at Drupal 7 Theming
A look at Drupal 7 ThemingA look at Drupal 7 Theming
A look at Drupal 7 Theming
 
Theming tips and tricks
Theming tips and tricksTheming tips and tricks
Theming tips and tricks
 
Drupal 8 - Corso frontend development
Drupal 8 - Corso frontend developmentDrupal 8 - Corso frontend development
Drupal 8 - Corso frontend development
 
Drupal theme development
Drupal theme developmentDrupal theme development
Drupal theme development
 
Learning PHP for Drupal Theming, DC Chicago 2009
Learning PHP for Drupal Theming, DC Chicago 2009Learning PHP for Drupal Theming, DC Chicago 2009
Learning PHP for Drupal Theming, DC Chicago 2009
 
Drupal - Introduction to Drupal Creating Modules
Drupal - Introduction to Drupal Creating ModulesDrupal - Introduction to Drupal Creating Modules
Drupal - Introduction to Drupal Creating Modules
 
Architecture of Drupal - Drupal Camp
Architecture of Drupal - Drupal CampArchitecture of Drupal - Drupal Camp
Architecture of Drupal - Drupal Camp
 
Drupal 6 Overview
Drupal 6 OverviewDrupal 6 Overview
Drupal 6 Overview
 
Drupal Theming
Drupal Theming Drupal Theming
Drupal Theming
 
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
 
Drupal 8: frontend development
Drupal 8: frontend developmentDrupal 8: frontend development
Drupal 8: frontend development
 
Drupal Front End PHP
Drupal Front End PHPDrupal Front End PHP
Drupal Front End PHP
 
Drupal
DrupalDrupal
Drupal
 
7 Theming in Drupal
7 Theming in Drupal7 Theming in Drupal
7 Theming in Drupal
 
Theming and content basics - Drupal Camp CT 2011
Theming and content basics - Drupal Camp CT 2011Theming and content basics - Drupal Camp CT 2011
Theming and content basics - Drupal Camp CT 2011
 
Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)
 
Theming Drupal: Beyond the Look and Feel
Theming Drupal: Beyond the Look and FeelTheming Drupal: Beyond the Look and Feel
Theming Drupal: Beyond the Look and Feel
 
Drupal
DrupalDrupal
Drupal
 
Drupal theming
Drupal themingDrupal theming
Drupal theming
 
Drupal 6 Theming
Drupal 6 ThemingDrupal 6 Theming
Drupal 6 Theming
 

Más de Aimee Maree Forsstrom

DOM and Accessibility API Communication
DOM and Accessibility API CommunicationDOM and Accessibility API Communication
DOM and Accessibility API CommunicationAimee Maree Forsstrom
 
Accessiblity 101 and JavaScript Frameworks
Accessiblity 101 and JavaScript Frameworks Accessiblity 101 and JavaScript Frameworks
Accessiblity 101 and JavaScript Frameworks Aimee Maree Forsstrom
 
The Good, The Bad, The Voiceover - ios Accessibility
The Good, The Bad, The Voiceover - ios AccessibilityThe Good, The Bad, The Voiceover - ios Accessibility
The Good, The Bad, The Voiceover - ios AccessibilityAimee Maree Forsstrom
 
Javascript Framework Acessibiliity Review
Javascript Framework Acessibiliity ReviewJavascript Framework Acessibiliity Review
Javascript Framework Acessibiliity ReviewAimee Maree Forsstrom
 
Diversity through iOS Development - App Camp 4 Girls
Diversity through iOS Development - App Camp 4 GirlsDiversity through iOS Development - App Camp 4 Girls
Diversity through iOS Development - App Camp 4 GirlsAimee Maree Forsstrom
 
Waving an Open Source Flag in Australian Government
Waving an Open Source Flag in Australian GovernmentWaving an Open Source Flag in Australian Government
Waving an Open Source Flag in Australian GovernmentAimee Maree Forsstrom
 
Govhack - Collections of World War One Connecting the Dots
Govhack - Collections of World War One Connecting the DotsGovhack - Collections of World War One Connecting the Dots
Govhack - Collections of World War One Connecting the DotsAimee Maree Forsstrom
 
Accessibility with Joomla [on a budget]
Accessibility with Joomla [on a budget]Accessibility with Joomla [on a budget]
Accessibility with Joomla [on a budget]Aimee Maree Forsstrom
 
FirefoxOS and its use of Linux (a deep dive into Gonk architecture)
FirefoxOS and its use of Linux (a deep dive into Gonk architecture)FirefoxOS and its use of Linux (a deep dive into Gonk architecture)
FirefoxOS and its use of Linux (a deep dive into Gonk architecture)Aimee Maree Forsstrom
 
Introduction to Python - Training for Kids
Introduction to Python - Training for KidsIntroduction to Python - Training for Kids
Introduction to Python - Training for KidsAimee Maree Forsstrom
 
UK Communications Bill Proposed Changes 2012
UK Communications Bill Proposed Changes 2012UK Communications Bill Proposed Changes 2012
UK Communications Bill Proposed Changes 2012Aimee Maree Forsstrom
 

Más de Aimee Maree Forsstrom (20)

AI - PAST, PRESENT, FUTURE.pptx
AI - PAST, PRESENT, FUTURE.pptxAI - PAST, PRESENT, FUTURE.pptx
AI - PAST, PRESENT, FUTURE.pptx
 
Pioneering Technology - My Story
Pioneering Technology - My StoryPioneering Technology - My Story
Pioneering Technology - My Story
 
DOM and Accessibility API Communication
DOM and Accessibility API CommunicationDOM and Accessibility API Communication
DOM and Accessibility API Communication
 
Machine Learning ate my homework
Machine Learning ate my homeworkMachine Learning ate my homework
Machine Learning ate my homework
 
Accessiblity 101 and JavaScript Frameworks
Accessiblity 101 and JavaScript Frameworks Accessiblity 101 and JavaScript Frameworks
Accessiblity 101 and JavaScript Frameworks
 
Accessibility, SEO and Joomla
Accessibility, SEO and JoomlaAccessibility, SEO and Joomla
Accessibility, SEO and Joomla
 
The Good, The Bad, The Voiceover - ios Accessibility
The Good, The Bad, The Voiceover - ios AccessibilityThe Good, The Bad, The Voiceover - ios Accessibility
The Good, The Bad, The Voiceover - ios Accessibility
 
Javascript Framework Acessibiliity Review
Javascript Framework Acessibiliity ReviewJavascript Framework Acessibiliity Review
Javascript Framework Acessibiliity Review
 
DeCoupling Drupal
DeCoupling DrupalDeCoupling Drupal
DeCoupling Drupal
 
Diversity through iOS Development - App Camp 4 Girls
Diversity through iOS Development - App Camp 4 GirlsDiversity through iOS Development - App Camp 4 Girls
Diversity through iOS Development - App Camp 4 Girls
 
Waving an Open Source Flag in Australian Government
Waving an Open Source Flag in Australian GovernmentWaving an Open Source Flag in Australian Government
Waving an Open Source Flag in Australian Government
 
Cyber Terrorism or Terrible Code
Cyber Terrorism or Terrible Code Cyber Terrorism or Terrible Code
Cyber Terrorism or Terrible Code
 
Govhack - Collections of World War One Connecting the Dots
Govhack - Collections of World War One Connecting the DotsGovhack - Collections of World War One Connecting the Dots
Govhack - Collections of World War One Connecting the Dots
 
Accessibility with Joomla [on a budget]
Accessibility with Joomla [on a budget]Accessibility with Joomla [on a budget]
Accessibility with Joomla [on a budget]
 
FirefoxOS and its use of Linux (a deep dive into Gonk architecture)
FirefoxOS and its use of Linux (a deep dive into Gonk architecture)FirefoxOS and its use of Linux (a deep dive into Gonk architecture)
FirefoxOS and its use of Linux (a deep dive into Gonk architecture)
 
Introduction to Python - Training for Kids
Introduction to Python - Training for KidsIntroduction to Python - Training for Kids
Introduction to Python - Training for Kids
 
UK Communications Bill Proposed Changes 2012
UK Communications Bill Proposed Changes 2012UK Communications Bill Proposed Changes 2012
UK Communications Bill Proposed Changes 2012
 
Welcome to the World of Trolls
Welcome to the World of TrollsWelcome to the World of Trolls
Welcome to the World of Trolls
 
Drupal’s growth
Drupal’s growthDrupal’s growth
Drupal’s growth
 
Help me help you learn
Help me help you learnHelp me help you learn
Help me help you learn
 

Último

Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 

Último (20)

Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 

Drupal7 themeing changes and inheritence

  • 1. Drupal 7 Theming Changes in Drupal7 and Theme Inheritance
  • 2. Summary Assumes some knowledge of Drupal themes Assumes some knowledge of HTML/CSS @aimee_maree www.aimeemaree.com Drupal Solution Architect @demonzmedia Freelance Open Source Solution Design Believer in Free Speech and Free Libre Open Source Software This presentation was created using Libre Office
  • 3. What is a Theme In a CMS a presentation layer displays the content to website visitors based on a set of templates “A theme is a collection of files that define the presentation layer.” – Drupal.org Think of it as the index.html with static content replaced by PHP variables
  • 4. Biggest theme change since Drupal 4.7
  • 5. That’s nice but, what does it all mean anyway?
  • 6. New functions for content $content does not require preprocess functions in order to split content Two new functions for printing out node variables render() and hide() <div class="content"> <?php // First we hide the comments and links now so that we can render them later. hide($content['comments']); hide($content['links']); // Then we print the content. Comments and links not included here. print render($content); ?> </div> // Then we print the links and comments separately <?php print render($content['links']); ?> <?php print render($content['comments']); ?>.
  • 7. Bye Bye PHPTemplate overrides Function names must match theme name In Drupal6 you could override theme functions with calling PHPTemplate.engine function phptemplate_breadcrumb() In Drupal7 this has been depreciated function THEMENAME_breadcrumb()
  • 9. Template delimiter change Template suggestions in Drupal7 must be separated by -- not - node--news.tpl.php You can still use - to separate names node--media-article.tpl.php node--content-type-machine-name.tpl.php
  • 10. Default regions in Drupal7 Drupal7 has new default regions header help (new region to display help) highlight (replaces mission) content (must be included in a theme) sidebar_first sidebar_second footer
  • 11. Hidden regions in Drupal7 Drupal 7 now has hidden regions Modules can print content out to hidden regions without needed to create a block The below example would print content but not wishlist, however a module can print its output to the region wishlist regions[content] = Content regions[wishlist] = Wishlist regions_hidden[] = wishlist
  • 12. Hiding CSS elements Two new CSS classes to assist with hiding CSS elements in Drupal7 .element-hidden hides an element from all users .element-invisible hides an element visually, which means it remains available to screen readers
  • 13. More CSS changes Drupal 7 is adhering to CSS naming conventions .clear-block was removed and replaced with .clearfix In Drupal6 we would call <div class="clear-block"> Now in Drupal7 we call <div class="clearfix">
  • 14. More power to be an individual
  • 15. Preprocess and Process Process functions will run after preprocess functions This enables a two step approach when variables need to be worked on in two phases; In preprocess you can add classes into an Array In process you can flatten the array into a string for template printing
  • 16. Preprocess functions In Drupal7 they apply to both templates and functions Preprocess functions are called before process functions The preprocessor enables variables to be placed within .tpl.php files
  • 17. Theme Hook Alter Hook Alter is no longer just for modules hook_page_alter – allows all variables displayed on a page to be altered/hidden hook_form_alter – allows small tweaks to forms, no need to create a custom module hook_js_alter hook_css_alter
  • 18. No longer need node.tpl.php In Drupal6 we needed to have node.tpl.php in our theme in order to theme content types sites/all/themes/ourtheme/node.tpl.php sites/all/themes/ourtheme/node-event.tpl.php In Drupal7 we no longer need node.tpl.php in our theme in order to theme content types modules/node/node.tpl.php sites/all/themes/ourtheme/node--event.tpl.php
  • 20. Wildcard Suggestions Drupal7 can now use wildcard suggestions in template names Drupal6, needed to know the specific ID Page-user.tpl.php would theme all user pages as well as the log- in, to theme only the user pages you would need to specify the integer for all Page-user-42.tpl.php, Page-user-32.tpl.php Drupal7, you can specify a wildcard So you can theme all user pages but not the login page--user--%.tpl.php
  • 21. Over 50 theme changes in Drupal7 $content now appears in block admin UI Blocks have more meaningful CSS classes .block-blog-recent $classes variable can be added to your preprocess hooks Additions to drupal_add_css() Classes and Attributes are now standard and predefined All titles now have $prefix and $suffix added
  • 23. Accessibility Changes RDFa can now be included, make sure you add; <head profile=”<?php print $grddl_profile; ?> Adding “Skip to Navigation” to core themes Removal of duplicate and null tags Creation of the D7AX hash tag for accessibility for module and theme maintainers Some modules/themes now include WAI-ARIA
  • 25. html.tpl.php Webpage output is now constructed by html.tpl.php and not page.tpl.php Page.tpl.php has been split apart html.tpl.php now contains the content between <head> </head> and constructs the template html.tpl.php calls page.tpl Allows for more granular control
  • 27. page.tpl.php No longer contains the header information that's in html.tpl.php No longer constructs the template thats html.tpl.php job Is now called from html.tpl.php Now only contains the contents between the wrapper DIV ie the header, sidebars, page content
  • 29. node.tpl.php As with Drupal6 in Drupal7 node prints out the main content area No longer need to have node.tpl.php in your theme when creating custom node.tpl's Can theme specific node's node--nodeid.tpl.php node--type.tpl.php node.tpl.php
  • 31. region.tpl.php New to Drupal 7 allows ease of changing region styling Can theme all regions or themes a specific region Allows you to wrap more HTML and CSS code around the region area
  • 32. region.tpl.php Allows more control of Drupal out-put region.tpl.php will allow you to style all regions the same To style the menu differently you can specify region-- menu.tpl.php Can theme all regions region.tpl.php Can theme a specific region region—search.tpl.php
  • 34. field.tpl.php New to Drupal 7 Fields can be themed with field.tpl.php Can theme individual fields or groups of field types Will theme all the fields that are of that type Must flush cache when adding and removing templates
  • 35. field.tpl.php For example you create an image field and use that across three content types, the field theme will apply the field.tpl.php to all three content types field.tpl.php field--field-type.tpl.php field--field-name.tpl.php field--content-type.tpl.php field--field-name--content-type.tpl.php
  • 37. Putting it all together
  • 38. But Drupal likes to add its own HTML?
  • 39. The Inheritance Process Drupal inheritance works as a system of overrides Has a specific cascading order (some exceptions noted) Powerful, because it enables you to override the things you don't like All changes live within your theme, leaving the system defaults alone So we OVERRIDE and don't HACK
  • 40. Drupal Overrides Modules Core A Default Theme Engine B Override Theme C Override
  • 41. Theme Registry can also be manipulated
  • 42. Template Inheritance 1. Drupal core applies its own .tpl.php files they are called first 2.Drupal modules apply their own .tpl.php files these are applied second and over write any css calls that exist in core tpl.php files 3.Your theme has its own .tpl.php files these are applied last and over write calls in core tpl.php files and module tpl.php files 4. Your theme has the final say!
  • 43. Drupal .tpl.php inheritance theme tpl.php files Theme Wins /sites/all/themes/ourtheme/templates/node.tpl.php module node.tpl.php gets overridden by the module tpl.php files them node.tpl.php /sites/all/modules/examplemodule/node.tpl.php Core node.tpl.php gets core tpl.php files overridden by the /modules/node/node.tpl.php modules node.tpl.php
  • 44. Nothing to inherit? File does not exist Core Wins There is no file to overwrite the /sites/all/themes/ourtheme/templates/? core so it is used to create the output File does not exist There is no file to /sites/all/modules/examplemodule/? overwrite the core tpl file core tpl.php files Core html.tpl.php is applied to the /modules/node/html.tpl.php layout
  • 45. Inheritance within your own theme Templates within your own Theme can also be overwritten by other templates in your theme this allows you to be specific with your template target Drupal.org describes it as “Template suggestions are made based on these factors  Listed from the most specific template to the least.  Drupal will use the most specific template it finds.”
  • 46. In Drupal most specific wins Specific Wins node—nodeid.tpl.php will node--nodeid.tpl.php apply to the specific node that matches the id number node--type.tpl.php will node--type.tpl.php apply to all nodes of a specific content type node.tpl.php will be called to theme all Drupal node.tpl.php nodes
  • 47. Drupal module theming There are 42 different .tpl files in Drupal7 core modules folder. /modules/modulename/*.tpl.php Each one of these can be copied and placed in your own theme to overwrite the output /sites/all/theme/yourtheme/templates/*.tpl.php If a contributed module has a .tpl file this can be copied into your theme folder and it will overwrite the .tpl in the modules folder /sites/all/modules/example/*.tpl.php
  • 48. So to theme a module? 1.Take a copy of the .tpl.php file we need from the module 1.Move the copy to our themes templates folder, this can be under the folder theme/templates/*.tpl.php or under the root of the theme folder theme/*.tpl.php 1.Flush cache or flush the theme registry to see if we can notice the changes on the website
  • 49. But what about functions?
  • 50. Theme functions are also Inherited 1.Modules provide their own theme functions 2.Find the theme function in .module 3.Copy the function into your template.php file 4.Change the function name from theme_pager to your-theme_pager 5.Flush cache 6.Your theme has the final say!
  • 51. Theme Function Inheritance Theme Wins Core module file themes the pager, this is considered the default If no function is found in your theme then theme_pager() the default is applied Drupal looks in your theme folder first Your template.php in sites/all/themes/your_theme If it finds the function theme_pager() there it applies it and stops looking
  • 52. Setting Template Variables 1. Locate the preprocess function you want to change the variable for 2.Copy the preprocess function into your template.php file 3. Change the function name to match your theme name 4.Your template.php has the final say!
  • 53. Preprocess Inheritance Your theme Wins Your template.php in sites/all/themes/your_theme Variable is appended to your new value function yourtheme_preprocess(&$vars) {$vars['new_variable'] = 'happy hippie'; } Preprocess calls $vars and also $hook allows Core module file themes the pager, this is your template.php to considered the default hook in and change the variable function garland_preprocess(&$vars, $hook) { if … }
  • 55. Pre-process functions are stacked Do not get overwritten but stack on top of each other What does this mean? If we declare in our sub theme the same preprocess functions as our base theme it will get added to the base theme and not overwrite it
  • 56. Template.php is stacked The sub-theme and base theme template.php file will be stacked base theme is included first and then our sub-theme is included This means we inherit from our base theme and append to our sub theme for template.php
  • 57. Sub-themes inherit from base Template files can be overwritten by adding that .tpl.php inside our subtheme Theme function overwrites work in the same way we can recreate a base thee function in our template.php and this will overwrite the base theme settings We can overwrite CSS / JavaScript files by incuding them in our subtheme .info file
  • 58. What is not inherited in sub- themes? Theme settings are not inherited So if we want our sub theme to have these we need to; 1. copy the theme-settings.php from the base theme folder 2. place into our sub-theme folder 3. make any modification's we need to our sub-theme file
  • 59. So many CSS files
  • 60. Drupal core CSS 1. Drupal core applies its own .css file this is called first 2.Drupal modules apply their own .css files these are applied second and over write any css calls that exist in core css files 3. Your theme has its own .css files these are applied last and over write calls in core css files and module css files 4.Your theme has the final say!
  • 61. Drupal CSS inheritance If theme .css file has the same class call, it will be overwritten by the theme css Theme Wins h1 { font-size: 3em; } Module css calls gets overridden by the theme css If module .css file has the same class call, it will be calls overwritten by the module css h1 { font-size: 2em; } Core css calls get overridden by Core css files style a header tag the modules if there is a file with the h1 { font-size: 1.6em; } same name style.css
  • 62. Inheritance Don't and Do’s Do save your theme folder/files into /sites/all/themes [correct] Don't edit or save files in /themes [not correct] Don't over write core themes files that live in the base folder of Drupal, this is called hacking core Dont take a copy of a core theme to create another theme Do use a contributed theme or create sub theme from a base theme You see a CSS class coming from module/node/node.css? Don’t change the module/node/node.css file Do copy the css call and paste it into your theme.css file You want to use your own css to style a module? Don’t change sites/all/modules/name/module.css file Do take a copy of the css file, place a copy of the module.css file into your theme folder and enter stylesheets[all][] = modulestyle.css into your themes info file Do flush cache
  • 63. Oh did I mention Clear Cache?
  • 64. Recommended Themes Boron re-writes Drupal core templates into HTML5 with WAI- ARIA roles and WCAG 2.0 compliance Mothership removes core CSS and HTML markup to provide a cleaner base Stark shows the core CSS and HTML mark-up provided by Drupal Omega and Adaptive WCAG 1.0 compliance some WAI-ARIA support allow for responsive theming
  • 65. Its a lot to take in @aimee_maree Aimee Maree Forsstrom www.aimeemaree.com Drupal Solution Architect