Advanced Drupal Training Documentation - OPIN

motherlamentationInternet and Web Development

Dec 7, 2013 (3 years and 10 months ago)

259 views

Advanced Drupal

Training
Course




 
Proprietary and Confidential

12 November

2013


opin.ca

© 2013 OPIN


 
 
Title  Page
 
 
Advanced Drupal

Training Course

 
 
 
 
 
INDSTRUCTORS
’S  CONTACT  NAME,  ADD
RESS  AND  TELEPHONE  N
UMBER:
 
Christopher  Smith
 
President  and  CEO
 
OPIN  Software  Inc.
 
205  

 
4  Florence  St.,  Ottawa,  Ontario,  
Canada  K2P
 
0W7
 
Tel:  613
-­‐
656
-­‐
9983
;  Email
:  
chris
.
smith
@opin.ca
 
 
PREPARED  ON
:
 
1
3
 
November
 
2013
 
 
 
 
Advanced Drupal

Training
Course




 
Proprietary and Confidential

12 November

2013


opin.ca

© 2013 OPIN


Table  of  Contents
 
Drupal
 
................................
................................
................................
................................
....................
 
3
 
Drupal  is  a  Content  Management  System
 
................................
................................
...........................
 
3
 
Drupal  is  a  Web  Application  Framework
 
................................
................................
.............................
 
3
 
Drupal  is  a  Community
 
................................
................................
................................
........................
 
4
 
Installation
 
................................
................................
................................
................................
.............
 
5
 
Installing  Drupal  7
 
................................
................................
................................
...............................
 
5
 
Obtaining  Drupal
 
................................
................................
................................
................................
 
6
 
Selecting  an  installation  profile
 
................................
................................
................................
...........
 
6
 
Minimal  profile
 
................................
................................
................................
................................
.......
 
6
 
Standard  profile
 
................................
................................
................................
................................
......
 
7
 
Language  selection
 
................................
................................
................................
.............................
 
7
 
Requirements  check
 
................................
................................
................................
...........................
 
7
 
Database  configuration
 
................................
................................
................................
.......................
 
8
 
Configure  site
 
................................
................................
................................
................................
.....
 
8
 
Theming
 
................................
................................
................................
................................
...............
 
10
 
What  is  a  theme?
 
................................
................................
................................
..............................
 
10
 
The  output  of  a  Drupal  theme
 
................................
................................
................................
...........
 
10
 
Theme  files
 
................................
................................
................................
................................
.......
 
11
 
Creating  a  New  Theme
 
................................
................................
................................
......................
 
12
 
Creating  a  new  theme  through  sub
-­‐
theming
 
................................
................................
.......................
 
12
 
Selecting  a  base  theme
 
................................
................................
................................
.........................
 
12
 
Installing  With  Sub  Theme
 
................................
................................
................................
....................
 
13
 
Styling  the  new  theme
 
................................
................................
................................
..........................
 
13
 
Syntactically  Awesome  Style  Sheets  (SASS)
 
................................
................................
...........................
 
14
 
Installing  SASS
 
................................
................................
................................
................................
..
 
14
 
Variables
 
................................
................................
................................
................................
..........
 
14
 
Nesting
 
................................
................................
................................
................................
.............
 
15
 
Partials
 
................................
................................
................................
................................
.............
 
16
 
Import
 
................................
................................
................................
................................
..............
 
16
 
Mixins
 
................................
................................
................................
................................
...............
 
17
 
Extend/Inheritance
 
................................
................................
................................
...........................
 
17
 
Operators
 
................................
................................
................................
................................
.........
 
18
 
 
 
 
Advanced Drupal

Training
Course




 
Proprietary and Confidential

12 November

2013


opin.ca

© 2013 OPIN


Drupal
 
Drupal  is  a  great  content  management  system,  a  powerful  framework  for  web  applications,  and  a  cutting
 
edge  social  publishing  platform.  Above  all,  Drupal  is  more  than  software

it  is  a  vibrant  community  of
 
developers,  designers,  project  managers,  
business  innovators,  technology  strategists,  user  experience
 
professionals,  standards  and  accessibility  advocates,  and  people  who  just  mess  around  with  stuff  until
 
they  figure  it  out.
 
DRUPAL  IS  A  CONTENT  
MANAGEMENT  SYSTEM
 
With  Drupal,  you  get  all  the  featu
res  of  a  powerful  content  managemen
t  system,  or  CMS

user  login  and  
registration;  definition  of  types  of  users  and  content;  different  levels  of  permissions;  content  creation,
 
editing,  categorization,  and  management;  syndication  and  aggregation

out  of  the  me
taphorical  box.  In

addition  to  this  core  functionality,  there’s  an  expanding  universe  of  add
itional  functionality  available  
from  
the  rising  influx  of  community  contributions.
 
The  Views  module  allows  you  to  organize  and  d
isplay  content  in  any  number  of  
ways
.  The  Groups  module  
can  be  used  to  create  online  workgroups,  discussion  groups,
 
and  more.  Drupal  Commerce  allows  you  to  
configure  full  online  stores.  This  is  just  a
 
small  sampling  of  the  powerful  extensions  available  to  Drupal  
through  contributed  modules.  
 
From  theming  examples
 
to  make  your  site  look  better  
to  command  line  tools  to  powerful  search,  if  you  
want  to  build  it  in  Drupal,
 
it’s  very  likely  that  someone  already  has

and  has  contributed  the  code  or  the  
instructions  back  to  the
 
community.  If  you  want  
to  go  beyond  functionality  that  anyone  has  contributed  
yet  by  writing  your  own
 
modules
,  there  will  be  a  lot  of  help  out  there  for  that,  too.  
 
 
Drupal  is  written  in  PHP  with  a  great  deal  of  JavaScript  (mostly  us
ing  the  JQuery  library)  for  the  
front
-­‐
end  
expe
rience,  and  it  uses  a  database  such  as  MariaDB/MySQL  or  PostgreSQL  to  store  both
 
content  and  
configuration.  Of  course,  by  doing  enough  custom  coding  with  these  or  other  programming
 
languages  and  
databases,  a  developer  can  do  anything  a  Drupal  site  can  do.  
But  why?  Using  Drupal
 
saves  site  builders  
from  reinventing  the  wheel,  allowing  a  focus  on  achieving  their  goals.  Drupal  takes
 
you  where  you  drive  it,  
without  you  having  to  build  a  car  first.
 
DRUPAL  IS  A  WEB  APPL
ICATION  FRAMEWORK
 
Drupal  has  become  so  solid  
at  its  core,  so  extensible,  and  so  powerful  for  
building  different  kinds  of  web  
sites  that  it  is  more  than  a  CMS:  it  is  a  platform  for  developing  serious  web  applications.  Each  major
 
release  includes  better  APIs  (Application  Programming  Interfaces;  how  cod
e  talks  to  code)  and  other
 
powerful  features  that  take  it  beyond  being  a  CMS.
 
Advanced Drupal

Training
Course




 
Proprietary and Confidential

12 November

2013


opin.ca

© 2013 OPIN


Drupal  is  used  as  the  basis  for  different  types  of  applications,  fro
m  smart  phone  and  Facebook  apps  
to  
web  sites  with  complex  business  logic  (nysenate.gov/mobile,  data.gov.uk,  za
gat.com)  to  social  media
 
and  
retail
-­‐
ready  software  as  a  service  (buzzr.com).  Drupal  can  also  be  found  in  such  non
-­‐
CMS  roles  as
 
the  front  
end  for  Java
-­‐
based  applications  and  the  back  end  for  AJAX  or  Flash
-­‐
driven  front  ends.
 
Where  this  distinction  between  fr
amework  and  CMS  or  other  prod
uct  can  mean  the  most  to  you  is  
the  
growth  of  distributions  built  on  Drupal  to  solve  specific  use  cases.  Examples  include  OpenAtrium
 
(openatrium.com)  for  team  intranets,  Drupal  Commons  (drupalcommons.com)  for  social  business,
 
O
penPublish  (openpublishapp.com)  for  online  publishers,  and  OpenScholar  (scholar.harvard.edu)  for
 
personal  academic  and  research  web  sites.  (See  Chapter  34  for  more  on  distributions,  including  how  to
 
create  your  own.)
 
DRUPAL  I
S  A  COMMUNITY
 
Another  reason  to
 
choose  Drupal  is  this  book

and  many,  many  other  boo
ks,  videos,  web  sites,  classes,  
and  songs.  (Well,  maybe  not  the  songs.  Search  at  your  own  risk.)  The  large  number  of  beginner
-­‐
friendly
 
and  expert
-­‐
ready  resources  growing  up  around  Drupal  are  both  an  effec
t  of  and  a  contributor  to  its
 
success  and  growth.
 
The  top  10  Drupal  shops  in  the  world  could  switch  to  stone  table
t  technology  tomorrow  and  there  
would  
still  be  an  amazing  array  of  contributors  to  carry  development  forward.  Not  many  free  software
 
projects  
can  say  that,  and,  of  course,  no  proprietary  products  can  make  such  a  claim.  Of  course,  most
 
Drupal  
companies  are  growing  along  with  Drupal,  not  leaving  the  scene.
 
The  number  one  reason  to  use  Drupal  is  not  the  functionality,  the  extensibility,  the  power,  
the
 
flexibility,  
or  even  anything  related  to  the  code.  The  number  one  reason  t
o  use  Drupal  is  the  breadth  and  
depth  of  
the  community.
 
Let’s  get  started.
 
 
 
Advanced Drupal

Training
Course




 
Proprietary and Confidential

12 November

2013


opin.ca

© 2013 OPIN


Installation
 
Before  we  start  looking  at  all  of  the  great  new  features  in  Drupal  7  in  detail,  let's  wa
lk  through  the  
process  
for  installing  Drupal  7
.  Several  aspects  of  the  installation  process  have  changed
 
since  previous  versions
,  
including:
 


A
 
new  installation  option  that  installs  commonly
-­‐
used  features  by  default
 


A  command
-­‐
line  installation  process
 


Bette
r  support  for  installation  profiles
 
INSTALLING  DRUPAL  7
 
Drupal's  installation  process  has  always  been  very  easy  to  use,  and  the  Drupal  7  installation  makes  things  
even  easier.
 
Before  beginning  to  install  Drupal  7,  you  will  need  a  web  server  running  the  Apa
che  HTTPD  web  server.  
You  can  also  use  IIS  on  Microsoft  Windows,  but  the  Apache  server  is  preferred  and  you  will  be  able  to  
obtain  support  from  the  community  more  easily  if  you  use  the  Apache  server.
 
Want  to  easily  install  Apache  onto  a  Microsoft  Windows  m
achine?  Try  XAMPP,  
which  is  published  by  Apache  Friends.  This  package  includes  Apache,  MySQL,  
and  PHP  with  a  standard  Microsoft  Windows  installer.  You  can  download  
XAMPP  from  http://www.apachefriends.org/en/xampp.html.  Other  options  
include  WAMP  (http://ww
w.wampserver.com/en/)  and  MoWeS  Portable  
(http://www.chsoftware.net/en/mowes/mowesportable/mowes.htm).    
 
Your  server  will  also  need  PHP  installed  on  it.  Drupal  requires  at  least  PHP  version  5.2.0.  As  of  this  writing,  
there  are  some  hosts  that  still  do  not  
have  PHP  5.2.0  or  later  installed  on  their  shared  hosting  accounts,  
and  Red  Hat  does  not  include  PHP  5.2.0  or  later  in  its  default  distribution.  Check  with  your  host  or  system  
administrator  before  installing  Drupal  to  make  sure  that  the  correct  version  is  
available.  
 
In  addition  to  the  web  server  and  PHP,  you  will  also  need  a  database.  MySQL  and  PostgreSQL  are  the  
databases  that  are  most  frequently  used  with  Drupal,  and  of  the  two,  MySQL  is  much  more  widely  used.  
That  being  said,  you  can  use  Drupal  with  man
y  different  databases  and  the  new  DBTNG  database  
abstraction  layer  will  make  it  easier  to  deploy  to  any  database.  If  you  are  using  MySQL,  you  will  need  
version  5.0.15  or  later  installed.  If  you  are  using  PostgreSQL,  you  will  need  PostgreSQL  8.3.0  or  later.
 
SQLite  is  also  officially  supported  for  use  with  Drupal  and  you  will  need  version  3.4.2  or  later.  
 
After  you  have  a  server  set  up  with  the  proper  software,  you  can  download  Drupal  and  begin  the  
installation  process.
 
Advanced Drupal

Training
Course




 
Proprietary and Confidential

12 November

2013


opin.ca

© 2013 OPIN


OBTAINING  DRUPAL  
 
If  you  have  used  prev
ious  versions  of  Drupal,  the  process  for  downloading  Drupal  is  the  same  as  always.  If  
you  are  new  to  Drupal,  you  will  use  the  following  process:  
 
1.

Go  to  the  Drupal  project  page  on  Drupal.org:  http://drupal.org/project/  drupal.  
 
2.

Find  the  latest  official  rele
ase  of  Drupal  7  and  click  on  the  
Download  
link.  The  release
 
will  be  
named  7.0  or  similar.  
 
3.

Your  browser  will  ask  whether  you  want  to  
download  
or  
Open  
the  file.  Make  sure  to  download  it  
to  your  computer.  
 
4.

The  file  you  downloaded  is  a  .tar.gz  file,  which  is  
a  compressed  archive  similar  to  a  .zip  file.  You  
will  need  to  extract  the  files  from  this  archive  onto  your  computer.
 
If  your  computer  doesn't  already  have  a  program  that  an  open  .tar.gz  files,  try  
7
-­‐
Zip,  an  open  source  application  that  easily  handles  thes
e  files.  You  can  
download  7
-­‐
Zip  
from  http://www.7
-­‐
zip.org.
 
5.

After  you  have  extracted  the  files,  you  will  need  to  copy  them  to  your  web  server's  document  
root.  
 
6.

You  are  now  ready  to  start  the  installation  process.  Simply  navigate  to  
http://yoursite.com/insta
ll.php.
 
Let's  step  through  the  installation  process  in  detail  now.
 
SELECTING  AN  INSTALL
ATION  PROFILE  
 
The  first  step  in  the  installation  process  is  selecting  an  installation  profile.  Drupal  prompts  you  with  a  
screen  asking  for  which  installation  profile  yo
u  want  to  use  during  the  installation:
 
By  default,  Drupal  comes  with  two  installation  profiles,  the  
Standard  
profile  and  the  
Minimal  
profile.  
Custom  distributions  may  come  with  additional  profiles.  We  will  discuss  creating  custom  installation  
profiles  at  t
he  end  of  this  chapter.  
 
MINIMAL  PROFILE  
 
The  
Minimal  
profile  installs  a  basic  configuration  of  Drupal  with  only  the  required  functionality  enabled.  
This  profile  is  even  more  minimal  than  the  base  Drupal  6  installation.  
 
This  profile  should  be  used  if  you  
are  very  familiar  with  setting  up  Drupal  and  don't  want  some  of  the  
additional  features  activated  in  the  
Standard  
profile.
 
Advanced Drupal

Training
Course




 
Proprietary and Confidential

12 November

2013


opin.ca

© 2013 OPIN


STANDARD  PROFILE  
 
The  
Standard  
Drupal  profile  installs  and  activates  several  commonly
-­‐
used  features  to  make  your  Drupal  
site  more  use
ful  immediately.  These  additional  features  include:  
 


Search  
form  installed  on  the  left  sidebar.  
 


Powered  by  Drupal  
block  enabled  in  the  footer.  
 


A  basic  page  content  type  is  automatically  created  to  store  static  content  on  your  site.  
 


A
n  article  content  ty
pe  is  automatically  created  to  store  time
-­‐
specific  content.  The  article  content  
type  replaces  the  story  content  type  from  Drupal  6.  
 


Both  content  types  are  set  up  with  RDF  capabilities.  
 


User  profiles  have  pictures  enabled  by  default.  Profile  pictures  can  
have  a  maximum  size  of  
1024x1024  pixels  and  be  up  to  800  KB  when  they  are  uploaded.  They  will  be  displayed  using  the  
thumbnail  image  style.  
 


A  taxonomy  called  
Tags  
is  created  to  allow  easy  categorization  of  content  on  your  site.  
 


The  article  content  type  i
s  enhanced  by  adding  an  image  field,  which  allows  PNG,  GIF,  and  JPG  files  
to  be  attached  to  the  article.  
 


An  administrator  role  is  created  that  has  all  permissions  activated  for  it.  As  new  modules  are  
activated,  the  administrator  role  will  automatically  be
 
updated  with  the  permissions  for  the  new  
module.  
 


The  Seven  theme  is  activated  for  the  administration  section  of  the  site.  
 
In  most  cases,  you  will  want  to  start  with  the  
Standard  
installation  profile,  especially  if  you  are  setting  up  
an  entirely  new  site
 
or  if  you  are  new  to  Drupal.
 
LANGUAGE  SELECTION  
 
The  next  step  in  the  installation  is  choosing  the  language  with  which  you  want  to  install  Drupal.  By  default,  
Drupal  only  includes  an  English  installer.  If  you  want  to  want  to  install  Drupal  in  another  lang
uage,  you  will  
need  to  download  a  translation  from  Drupal.org.  A  complete  list  of  translations  is  available  at  
http://drupal.org/  project/translations.  After  you  download  the  translation  you  want  to  use,  you  will  need  
to  unpack  the  translation  and  copy  it  
to  your  document  folder.  The  process  to  unpack  and  copy  the  files  is  
similar  to  the  process  we  used  when  we  unpacked  and  copied  the  core  Drupal  files  to  your  server.  
 
REQUIREMENTS  CHECK  
 
Drupal  will  now  check  the  requirements  of  your  server  to  ensure  that  
it  meets  the  minimum  requirements  
to  run  Drupal  and  to  ensure  that  everything  is  ready  for  the  installation  to  proceed.
 
If  Drupal  does  discover  any  problems,  it  will  give  you  information  about  how  to  correct  the  problem.  In  our  
case,  it  looks  like  we  forgo
t  to  set  up  our  settings  file.  The  settings  file  tells  Drupal  which  database  to  
Advanced Drupal

Training
Course




 
Proprietary and Confidential

12 November

2013


opin.ca

© 2013 OPIN


connect  to  as  well  as  the  connection  information.  To  create  a  settings  file,  navigate  to  your  document  root  
and  then  navigate  to  the  sites/default  folder.  Copy  the  default.sett
ings.php  file  to  settings.php.  You  do  not  
need  to  change  any  of  the  information  within  the  file.  
 
After  you  have  corrected  any  problems,  click  on  the  
proceed  with  the  installation  
link.  Drupal  will  re
-­‐
evaluate  the  requirements  and  let  you  know  if  anyt
hing  
else  needs  to  be  changed.    
 
DATABASE  CONFIGURATI
ON  
 
The  next  step  in  installing  Drupal  is  configuring  the  database  where  Drupal  will  store  the  content  and  
configuration  information  for  your  site.  The  functionality  of  this  screen  has  also  been  enhanced  in  D
rupal  
7.
 
The  key  difference  is  that  Drupal  7  will  automatically  check  which  types  of  databases  are  available  to  you  
based  on  your  server  setup.  Then,  it  will  only  allow  you  to  select  a  database  which  will  work.  
 
If  you  want  to  run  Drupal  using  a  different  
database  server  than  your  web  server,  you  can  use  the  
ADVANCED  OPTIONS  
link  to  configure  the  database  server  and  port.  You  can  also  use  
ADVANCED  
OPTIONS  
if  you  are  setting  up  multiple  sites  within  a  single  database.  
 
For  a  Standard  installation,  enter  the  
name  of  your  database  as  well  as  the  username  and  password  for  
the  database.  This  functionality  remains  the  same  as  in  Drupal  6.
 
You  will  need  to  create  a  database  outside  of  the  Drupal  installation.  The  
actual  steps  for  creating  a  new  database  vary  depend
ing  on  your  website  host.  
Many  hosts  have  installed  phpMyAdmin,  which  allows  you  to  manage  your  
databases  with  an  easy
-­‐
to
-­‐
use  web
-­‐
based  interface.  
 
 
If  you  use  phpMyAdmin  to  create  your  database,  you  will  need  to  log  in  to  phpMyAdmin  and  create  a  
database.
 
You  can  create  a  new  user  for  the  database  in  the  
Privileges  
tab.  
 
After  you  have  entered  your  database  settings,  click  on  the  
Save  and  continue  
button.  Drupal  will  now  
configure  the  database  and  set  up  your  site.
   
As  the  installation  proceeds,  Drupal  wil
l  display  its  progress.  
The  
installation  may  take  several  minutes  to  complete.
 
CONFIGURE  SITE  
 
After  the  Standard  installation  has  completed,  you  will  need  to  configure  your  site.  
 
The  basic  configuration  starts  by  asking  you  for  the  
SITE  INFORMATION  
and  
S
ITE  MAINTENANCE  
ACCOUNT  
details.  The  site  maintenance  account  has  the  ability  to  change  all  settings  within  the  site.  You  
should  make  sure  that  the  
Password  
is  difficult  to  guess  and  that  it  is  stored  securely.
 
Advanced Drupal

Training
Course




 
Proprietary and Confidential

12 November

2013


opin.ca

© 2013 OPIN


The  next  set  of  configuration  options  allow  y
ou  to  determine  which  country  your  site  is  located  in  as  well  
as  the  
Default  time  zone  
for  the  site.
 
The  
Default  country  
setting  is  new  to  Drupal  7  and  the  
Default  time  zone  
setting  has  been  made  easier  to  
understand  by  adding  the  name  of  the  time  zone.  
 
T
he  final  set  of  configuration  options  ar
e  related  to  updating  your  site.  
These  settings  allow  you  to  have  
Drupal  automatically  check  if  any  updates  are  available  for  Drupal  or  any  contributed  modules  you  have  
installed.  If  there  are  any  updates  available,  
you  can  optionally  have  Drupal  e
-­‐
mail  you  so  you  don't  have  
to  constantly  check  for  updates  on  your  own.  It  is  highly  recommended  that  you  activate  both  of  these  
options.  
 
After  you  have  entered  the  configuration  options  to  your  satisfaction,  click  on  the  
Save  and  continue  
button  to  finalize  your  c
hoices.    
After  all  options  have  been  saved  to  the  database,  you  will  be  given  a  final  
status  screen  stating  that  the  installation  completed  successfully.
 
Now  that  the  installation  is  finished,  we  can  finally  navig
ate  to  our  site  by  clicking  on  the  
Visit  your  new  
site  
link.
 
 
 
 
Advanced Drupal

Training
Course




 
Proprietary and Confidential

12 November

2013


opin.ca

© 2013 OPIN


Them
ing
 
The  theme  employed  on  your  Drupal  site  defines  the  visual  appearance  of  the  site.  The  theme  files  control  
the  placement  of  the  elements  on  the  screen  and  impact  both  the  presentation  o
f  the  contents  and  the  
usability  of  the  functionality.  How  well  a  theme  is  designed  and  implemented  is,  therefore,  largely  
responsible  for  the  first  impression  made  by  your  site.  Themes  are  the  most  visible,  and  arguably  the  most  
influential,  element  of  yo
ur  Drupal  site.
 
WHAT  IS  A  THEME?  
 
In  the  context  of  Drupal,  the  term  "theme"  means  a  collection  of  inter
-­‐
related  files  that  are  responsible  for  
the  look  and  feel  of  a  Drupal  website.  Other  content  management  systems  (CMS)  use  different  names  for  
the  files  
that  perform  the  same  function  in  their  particular  systems

the  most  common  term  used  being  
"template."  
 
There  are  a  couple  of  different  ways  you  can  look  at  the  function  Drupal  themes:  
 


Expressed  conceptually
:  A  theme  is  a  visual  container  that  is  used  to  
format  and  display  data  on  
the  screen
 


Expressed  in  terms  of  its  component  parts
:  A  theme  is  a  collection  of  files  that  format  data  into  
the  presentation  layer  viewed  by  site  visitors  and  system  administrators  
 


Expressed  in  simple  terms
:  A  theme  determines  
how  your  site  looks!  
 
A  theme  contains  many  types  of  files  that  are  familiar  to  web  designers,  including  stylesheets,  images,  and  
JavaScript.  A  theme  may  also  include  some  files  whose  extensions  may  not  be  so  familiar,  for  example  
*.tpl.php  files  

 
an  exte
nsion  that  is  used  to  designate  template  files  that  use  the  PHPTemplate  theme  
engine  supplied  with  Drupal.  
 
Throughout  this  book,  we  will  use  "theme"  to  refer  collectively  to  the  files  responsible  for  displaying  the  
information  on  the  page.  We  will  use  "te
mplate"  to  refer  to  a  specific  type  of  file  found  in  themes,  that  is,  
the  .tpl.php  file.
 
THE  OUTPUT  OF  A  DRUP
AL  THEME  
 
When  you  visit  a  website  powered  by  Drupal,  what  you  see  on  the  screen  is  the  result  of  the  site's  active  
theme  files.  The  theme's  variou
s  files  contain  the  functions  that  produce  the  data  and  also  set  the  styling,  
position,  and  placement  of  the  data  on  your  screen.  A  lot  of  work  for  a  small  group  of  files.  
 
When  creating  the  theme,  the  designer  designates  areas  inside  the  layout  to  fulfill
 
various  functions.  For  
example,  in  a  typical  three
-­‐
column  theme,  the  center  column  is  used  to  hold  the  primary  content  whereas  
Advanced Drupal

Training
Course




 
Proprietary and Confidential

12 November

2013


opin.ca

© 2013 OPIN


the  two  smaller  side  columns  contain  secondary  information.  Screen  space  within  each  of  those  areas  is  
also  allocated  according  
to  the  designer's  priorities.  
 
One  of  the  key  functions  of  the  page  template  file  in  a  Drupal  theme  is  to  provide  placeholders  for  the  
elements  on  the  page.  The  placeholders  are  called  
regions
.  A  theme  developer  can  insert  the  regions  
anywhere  on  the  page  
by  adding  a  short  statement  to  the  code  of  the  appropriate  file.  

Regions  are  created  by  placing  simple,  standardized  PHP  snippets  inside  the  
page  template  file.  The  PHP  statement  will  automatically  include  the  items  
assigned  to  the  region.  The  region  stat
ement  is  typically  wrapped  with  a  div  to  
allow  you  to  control  the  placement  of  the  region  on  the  screen.
 
Regions  are,  in  other  words,  placeholders  inside  the  page  layout  where  a  site  administrator  can  position  
functional  output;  this  is  most  frequently  don
e  by  assigning  blocks  to  the  region  desired.  
 
Wherever  
regions  have  been  specified,  the  site  administrator  can  assign  module  output.  
 
THEME  FILES  
 
A  diverse  group  of  files  work  together  to  enable  themes  in  Drupal.  While  the  ones  you  need  are  kept  in  
the  th
emes  directory,  the  theme  engine  and  other  helper  files  are  located  in  a  different  place.  
 


The  core  themes  and  their  respective  files  are  kept  in  the  directory  named  /themes  on  your  
server.  
 


The  PHPTemplate  engine  files  are  located  in  the  /engines  sub
-­‐
dire
ctory  inside  the  /themes  
directory.  
 


The  html.tpl.php  file  is  located  in  the  /modules/system  directory.  This  file  is  new  in  Drupal  7  and  is  
used  to  provide  header  and  doctype  data  used  by  all  the  themes.  
 
The  PHPTemplate
-­‐
specific  files  all  follow  the  same  
naming  convention  

 
*.tpl.  php
.  The  prefix  of  each  of  
those  files  is  specific  in  that  they  are  intended  to  override  functions  defined  elsewhere.  For  the  system  to  
recognize  that  these  files  in  the  theme  directory  are  intended  to  override  the  originals,  the
 
names  must  be  
consistent  with  the  originals.  The  naming  of  some  of  the  other  theme  files  is  flexible  and  within  the  
discretion  of  the  author.  
 
To  create  a  theme  that  uses  the  PHPTemplate  theme  engine,  you  need  three  files:  
 


page.tpl.php:  The  file  containi
ng  the  regions  and  the  key  elements  of  the  layout  
 


style.css:  The  Cascading  Style  Sheet  for  the  theme;  this  is  needed  only  for  styling  unique  to  the  
theme  
 


.info:  This  file  sets  a  number  of  parameters  for  your  theme,  including  the  theme's  name,  
description
,  and  version  information  
 
Advanced Drupal

Training
Course




 
Proprietary and Confidential

12 November

2013


opin.ca

© 2013 OPIN


CREATING  A  NEW  THEME
 
While  many  people  may  undertake  a  theme  project  by  copying,  and  then  customizing,  the  files  of  an  
existing  theme,  in  this  chapter  we  cater  to  the  purists  who  want  to  do  it  all  themselves.
 
To  follow  fully  the  
examples  in  this  chapter,  you  will  need  your  favorite  code  editor  and,  preferably,  access  
to  a  server  upon  which  to  preview  your  work.  In  the  section  dealing  with  sub
-­‐
themes,  we  will  be  using  as  
our  example  the  Fusion  theme,  which  you  can  download  from  Dru
pal.org.
 
In  this  chapter,  we'll  cover:
 


The  basics  of  creating  a  new  theme  employing  the  PHPTemplate  engine
 


The  various  tasks  required  to  produce  a  fully  functional  theme
 


New  theme  creation  with  the  aid  of  a  sub
-­‐
theme
 
The  adva
ntages  of  using  a  sub
-­‐
theme  for  creating  your  new  theme  are:  
 


Faster  site  build  
 


Common  resources  are  already  coded  
 


The  base  theme  can  be  upgraded  separately  
 


Your  code  is  reusable
 
CREATING  A  NEW  THEME
 
THROUGH  SUB
-­‐
THEMING  
 
Creating  a  new  theme
 
by  creating  a  sub
-­‐
theme  is  faster  and  easier  than  theming  from  scratch.  There  exist  
a  number  of  themes  that  have  been  specifically  built  with  this  purpose  in  mind

so
-­‐
called  base  themes  or  
"starter"  themes.  Though  you  can  create  a  sub
-­‐
theme  from  any  other  
theme,  starter  themes  are  tailored  
to  providing  you  with  useful  resources,  such  as  an  assortment  of  common  templates  and  stylesheets.  
Some  starter  themes  are  very  basic,  others  are  feature
-­‐
rich.  
 
SELECTING  A  BASE  THE
ME  
 
If  you  have  decided  to  proceed  via  sub
-­‐
theme  creation,  the  first  issue  you  need  to  address  is  selection  of  a  
base  theme.  All  sub
-­‐
themes  are  premised  on  a  base  theme.  You  should  do  a  bit  of  research  to  identify  the  
base  theme  that  is  most  suitable  for  your  
needs.  It's  best  to  select  a  theme  that  has  the  features  that  you  
want  and,  ideally,  exhibits  some  of  the  layout  and  styling  you  want.  Among  the  candidates,  you  might  
want  to  consider  are:  
 
Adaptivetheme
 
The  Adaptivetheme  starter  theme  is  one  of  the  mo
re  feature
-­‐
rich  options.  The  theme  includes  a  wide  
array  of  layout  options  and  styles  that  can  be  implemented  directly  from  the  Theme  Manager.  The  
package  includes  a  ready
-­‐
to
-­‐
use  sub
-­‐
theme  and  the  project  page  has  links  to  documentation  and  tutorial  
Advanced Drupal

Training
Course




 
Proprietary and Confidential

12 November

2013


opin.ca

© 2013 OPIN


resour
ces.  The  only  downside  to  Adaptivetheme  is  that  it  does  employ  a  few  non
-­‐
standard  
implementations  that  may  make  it  a  slightly  less  attractive  choice,  if  you  are  a  purist.  To  learn  more  and  
download  the  theme,  visit  the  Adaptivetheme  project:  
http://drupal.
org/  project/adaptivetheme
.  
 
Zen
 
This  theme  is  one  of  the  most  popular  in  the  Drupal  collection.  Zen  has  been  around  for  years  but  
continues  to  evolve  and  improve.  The  current  version  is  tailored  for  use  as  a  starter  theme  with  a  wide  
range  of  features  and
 
ready
-­‐
to
-­‐
go  sub
-­‐
themes.  It  is  a  solid  choice  but  is  often  criticized  (mildly)  for  being  
heavy  on  the  code  and  the  stylesheets.  Visit  the  Zen  project  to  learn  more  and  download  the  theme  at:  
http://drupal.org/project/zen
.  
 
INSTALLING  WITH  SUB  
THEME
 
To  begin  with,  install  the  Fusion  theme  on  your  site.  T
he  project  page  is  
http://  drupal.org/project/fusion
.  
Make  sure  you  grab  the  most  recent  version  suitable  for  Drupal  7.
 
1.

Once  it  is  installed,  access  
the  
/sites/all/themes  
directory  on  your  server.
 
2.

A
ccess  your  Drupal  installation  on  the  server,  then  
make  a  copy  of  the  
/fusion_starter_lite  
theme  
directory.  
 
3.

Next,  paste  that  directory  into  the  
/sites/all/themes  
directory  and  rename  it.  Let's  call  our  new  
theme:  
Cold  Fusion
.  So  you  should  now  have  a  new  directory  at:  
/sites/all/themes/coldfusion
.
 
4.

Next
,  let's  update  the  theme  name  inside  all  the  files  we've  kept.  We  need  to  change  every  
occurrence  of  
fusion  
to  
coldfusion
.  If  you've  got  a  code  editor,  you  can  run  a  find/replace  to  get  
this  done,  if  not,  you'll  need  to  crack  open  each  file  and  do  this.
 
5.

If  
al
l  has  gone  according  to  plan,  the  new  Cold  Fusion  theme  can  now  be  seen  inside  the  
Disabled  
Themes  
section  of  your  site's  Theme  Manager.
 
STYLING  THE  NEW  T
HEME  
 
Styling  the  new  theme  will  require  various  techniques,  depending  on  your  needs.  As  this  book  is  neither  a  
dissertation  on  site  architecture  nor  a  CSS  tutorial,  we  are  going  to  focus  on  review  of  the  different  options  
available  to  you  and  how,  in  brie
f,  to  implement  them.  It's  up  to  you  to  decide  what  you  need  to  achieve  
your  theming  goals.  The  principles  discussed  here  in  the  context  of  Fusion  are  applicable  with  other  
themes,  except  where  noted.  
 
 
 
Advanced Drupal

Training
Course




 
Proprietary and Confidential

12 November

2013


opin.ca

© 2013 OPIN


Syntactically  Awesome  Style  Sheets  (S
ASS)
 
CSS  on  its  own  can  be  fun,  but  stylesheets  are  getting  larger,  more  complex,  and  harder  to  maintain.  This  
is  where  a  preprocessor  can  help.  Sass  lets  you  use  features  that  don't  exist  in  CSS  yet  like  variables,  
nesting,  mixins,  inheritance  and  other  n
ifty  goodies  that  make  writing  CSS  fun  again.
 
Once  you  start  tinkering  with  Sass,  it  will  take  your  preprocessed  Sass  file  and  save  it  out  as  a  normal  CSS  
file  that  you  can  use  in  your  web
 
site.
 
INSTALLING  SASS
 
There  are  a  
good  many  applications  that  will  
get  you  up  and  running  with  Sass  in  a  few  minutes  for  Mac,  
Windows,  and  Linux.  You  can  download  most  of  the  applications  for  free  but  a  few  of  them  are  paid  
apps
 
(and  totally  worth  it).
 
6.

CodeKit
 
(Paid)
 
 
7.

Compass.app
 
(Paid,  Open  Source)
 
 
 
 
8.

Hammer
 
(Paid)
 
 
9.

Koala
 
(Open  Source)
 
 
 
 
10.

LiveReload
 
(Paid,  Open
 
Source)
 
 
 
11.

Mixture
 
(Paid)
 
 
 
12.

Prepros
 
(Open  Source)
 
 
 
13.

Prepros  Pro
 
(Paid)
 
 
 
14.

Scout
 
(Open  Source)
 
 
 
VARIABLES
 
Think  of  variables  as  a  way  to  store  information  that  you  want  to  reuse  throughout  your  stylesheet.  You  
can  store  things  like  colors,  font  stacks,  or  any  CSS  value  you  think  you'll  want  to  reuse.  Sass  uses  
the
 
$
 
symbol  to
 
make  something  a  variable.  Here's  an  example:
 
$font
-
stack:

Helvetica, sans
-
serif;

$primary
-
color:

#333;


body {


font: 100% $font
-
stack;


color: $primary
-
color;

}

When  the  Sass  is  processed,  it  takes  the  variables  we  define  for  the
 
$font
-­‐
stack
 
an
d
 
$primary
-­‐
color
 
and  
outputs  normal  CSS  with  our  variable  values  placed  in  the  CSS.  This  can  be  extremely  powerful  when  
working  with  brand  colors  and  keeping  them  consistent  throughout  the
 
site.
 
Advanced Drupal

Training
Course




 
Proprietary and Confidential

12 November

2013


opin.ca

© 2013 OPIN


body
{


font: 100% Helvetica, sans
-
serif;


color: #333;


}

NESTING
 
When  you  write  HTML  you've  probably  noticed  that  it  has  a  fairly  clear  nested,  visual  hierarchy.  CSS,  on  
the  other  hand,  isn't.  Sass  will  let  you  nest  your  CSS  selectors  in  a  way  that  follows  the  same  visual  
hierarchy  of  your  HTML.  Here's  an  ex
ample  of  some  typical  styles  for  a  site's
 
navigation:
 
nav {


ul {


margin: 0;


padding: 0;


list
-
style: none;


}


li {


display: inline
-
block;


}


a {


display: block;


padding: 6px 12px;


text
-
decoration: none;


}

}

You'll  notice  that  the
 
ul,
 
li,  and
 
a
 
selectors  are  nested  inside  the
 
nav
 
selector.  This  is  a  great  way  to  
organize  your  CSS  and  make  it  more  readable.  When  you  generate  the  CSS  you'll  get  something  like
 
this:
 
nav ul {



margin: 0;


padding: 0;


list
-
style: none;

}

nav li {


display: inline
-
block;

}

nav a {


display: block;


padding: 6px 12px;


text
-
decoration: none;

}

Advanced Drupal

Training
Course




 
Proprietary and Confidential

12 November

2013


opin.ca

© 2013 OPIN


PARTIALS
 
You  can  create  partial  Sass  files  that  contain  little  snippe
ts  of  CSS  that  you  can  include  in  other  Sass  files.  
This  is  a  great  way  to  modularize  your  CSS  and  help  keep  things  easier  to  maintain.  A  partial  is  simply  a  
Sass  file  named  with  a  leading  underscore.  You  might  name  it  something  like
 
_partial.scss.  The  und
erscore  
lets  Sass  know  that  the  file  is  only  a  partial  file  and  that  it  should  be  generated  into  a  CSS  file.  Sass  partials  
are  used  with  the
 
@import
 
directive.
 
IMPORT
 
CSS  has  an  import  option  that  lets  you  split  your  CSS  into  smaller,  more  maintainable  por
tions.  The  only  
drawback  is  that  each  time  you  use
 
@import
 
in  CSS  it  creates  another  HTTP  request.  Sass  builds  on  top  of  
the  current  CSS
 
@import
 
but  instead  of  requiring  an  HTTP  request,  Sass  will  take  the  file  that  you  want  to  
import  and  combine  it  with  t
he  file  you're  importing  into  so  you  can  serve  a  single  CSS  file  to  the  web  
browser.
 
Let's  say  you  have  a  couple  of  Sass  files,
 
reset.scss
 
and
 
base.scss.  We  want  to  
import
 
reset.scss
 
into
 
base.scss.
 
/* _reset.scss */

html, body, ul, ol {


margin: 0;



padding: 0;

}

/* base.scss */


@import 'reset';

body {


font
-
size: 100% Helvetica, sans
-
serif;


background
-
color: #efefef;

}

Notice  we're  using
 
@import  'reset';
 
in  the
 
base.scss
 
file.  When  you  import  a  file  you  don't  need  to  include  
the
 
file  extension
 
.scss
 
Sass  is  smart  and  will  figure  it  out  for  you.  When  you  generate  the  CSS  you'll
 
get:
 
html, body, ul, ol {


margin: 0;


padding: 0;

}

body {


background
-
color: #efefef;


font
-
size: 100% Helvetica, sans
-
serif;

}

Advanced Drupal

Training
Course




 
Proprietary and Confidential

12 November

2013


opin.ca

© 2013 OPIN


MIXIN
S
 
Some  things  in  CSS  are  a  bit  tedious  to  write,  especially  with  CSS3  and  the  many  vendor  prefixes  that  exist.  
A  mixin  lets  you  make  groups  of  CSS  declarations  that  you  want  to  reuse  throughout  your  site.  You  can  
even  pass  in  values  to  make  your  mixin  more
 
flexible.  A  good  use  of  a  mixin  is  for  vendor  prefixes.  Here's  
an  example  for
 
border
-­‐
radius.
 
@mixin border
-
radius($radius) {


-
webkit
-
border
-
radius: $radius;


-
moz
-
border
-
radius: $radius;


-
ms
-
border
-
radius: $radius;


-
o
-
border
-
radius: $radius;


border
-
radius: $radius;

}


.box {


@include border
-
radius(10px);

}

To  create  a  mixin  you  use  the
 
@mixin
 
directive  and  give  it  a  name.  We've  named  our  mixin
 
border
-­‐
radius.  
We're  also  using  the  variable
 
$radius
 
inside  the
 
parentheses  so  we  can  pass  in  a  radius  of  whatever  we  
want.  After  you  create  your  mixin,  you  can  then  use  it  as  a  CSS  declaration  starting  
with
 
@include
 
followed  by  the  name  of  the  mixin.  When  your  CSS  is  generated  it'll  look  like  this:
 
.box {


-
webki
t
-
border
-
radius: 10px;


-
moz
-
border
-
radius: 10px;


-
ms
-
border
-
radius: 10px;



-
o
-
border
-
radius: 10px;


border
-
radius: 10px;

}

EXTEND/INHERITANCE
 
This  is  one  of  the  most  useful  features  of  Sass.  Using
 
@extend
 
lets  you  share  a  set  of  CSS  prop
erties  from  
one  selector  to  another.  It  helps  keep  your  Sass  very  DRY.  In  our  example  we're  going  to  create  a  simple  
series  of  messaging  for  errors,  warnings  and  successes.
 
.message {


border: 1px solid #ccc;


padding: 10px; color: #333;

}


.s
uccess {


@extend .message;

Advanced Drupal

Training
Course




 
Proprietary and Confidential

12 November

2013


opin.ca

© 2013 OPIN



border
-
color: green;

}


.error {


@extend .message;


border
-
color: red;

}


.warning {


@extend .message;


border
-
color: yellow;

}

What  the  above  code  does  is  allow  you  to  take  the  CSS  properties  i
n
 
.message
 
and  apply  them  
to
 
.success,
 
.error,  &
 
.warning.  The  magic  happens  with  the  generated  CSS,  and  this  helps  you  avoid  having  
to  write  multiple  class  names  on  HTML  elements.  This  is  what  it  looks
 
like:
 
.message, .success, .error, .warning {


bor
der: 1px solid #cccccc;


padding: 10px; color: #333;

}


.success {


border
-
color: green;

}


.error {


border
-
color: red;

}


.warning {


border
-
color: yellow;

}

OPERATORS
 
Doing  math  in  your  CSS  is  very  helpful.  Sass  has  a  handful
 
of  standard  math  operators  like
 
+,
 
-­‐
,
 
*,
 
/,  and
 
%.  
In  our  example  we're  going  to  do  some  simple  math  to  calculate  widths  for  an
 
aside
 
&
 
article.
 
.container {


width: 100%;

}


article[role="main"] {


float: left;


width: 600px / 960px * 100%;

Advanced Drupal

Training
Course




 
Proprietary and Confidential

12 November

2013


opin.ca

© 2013 OPIN


}


aside[role="complimentary"] {


float: right;


width: 300px / 960px * 100%;

}

We've  created  a  very  simple  fluid  grid,  based  on  960px.  Operations  in  Sass  let  us  do  something  like  take  
pixel  values  and  convert  them  to  percentages  without  much  h
assle.  The  generated  CSS  will  look  like:
 
.container {


width: 100%;

}


article[role="main"] {


float: left;


width: 62.5%;

}


aside[role="complimentary"] {


float: right;


width: 31.25%;

}