SlideShare a Scribd company logo
1 of 64
Download to read offline
No CSS Needed:
A Sitebuilders' Guide to
Theming
@sparklingrobots
Hi, I'm Tara.
Tara King
@sparklingrobots
Sparkling Robots Design
Cruiskeen Consulting
Our journey:
1) Why is theming so hard, and how
are modules easier?
2) Which modules can help with
theming?
3) How can you start learning more?
4) How can Drupal help people like us,
and how can we help Drupal?
Our journey:
1) Why is theming so hard, and
how are modules easier?
2) Which modules can help with theming?
3) How can you start learning more?
4) How can Drupal help people like us, and how
can we help Drupal?
Why is theming so hard?
php, CSS, HTML, SASS, SMACSS,
jQuery, mobile-friendly ...and more
How are modules easier?
CHEAP, FAST, OR GOOD:
CHOOSE TWO.
It's fast! It's cheap!
It's not terrible!
Why are modules easier?
Modules get you 90% of the way
toward a theme much faster
than learning front-end
development gets you 100% of
the way.
Why is this better?
● It's the Drupal way! You
take advantage of
contributed code, it's
easier to maintain, and
it's free.
Why Drupal?
● Views
● Time-sensitive content
● Media handling
● ...Overall flexibility!
Our journey:
1) Why is theming so hard, and how are
modules better?
2) Which modules can help
with theming?
3) How can you start learning more?
4) How can Drupal help people like us, and how
can we help Drupal?
Modules are easy.
1) Color
2) Font-your-face
3) Background Images
4) Display Suite
5) Gallery Formatter/
Lightbox2
Elements of Design
1) Color
2) Typography
3) Texture
source: some DrupalConPDX session
Color
"The Color module allows you to
easily change the color of links,
backgrounds, text, and other theme
elements."
source: https://drupal.
org/documentation/modules/color
Color
"I have tried for weeks to make garland just be black. I
am new also but I tried many things. I have seen
others looking for the same. I can tell you that there is
not likely an easy answer.... I kept thinking I was very
close, but I give up. Too much wasted time. "
-darrellleerogers on drupal.org
Let's recolor Bartik!
Let's recolor Bartik!
The old way:
Use search and replace in the
subtheme to put your new
colors in the theme files. Grow
frustrated when you realize
you missed a slight variant.
Or....learn SASS.
Color: the new way.
Color!
Color?
Color help!
www.colorschemedesigner.com
Color-enabled themes.
-Bartik (D7 default)
-Tej (Omega subtheme) drupal.org/project/tej
-Sky drupal.org/project/sky
-Corporate Clean drupal.org/project/corporateclean
-Gratis drupal.org/project/gratis
-Mix and Match drupal.org/project/mix_and_match
Elements of Design
1) Color
2) Typography
3) Texture
source: some DrupalConPDX session
@font-your-face
Typography
"@font-your-face provides an
administrative interface for
browsing and applying web fonts
from a variety of sources."
source: https://drupal.org/project/fontyourface
@font-your-face
● Typekit.com
● Google Fonts
● Font Squirrel
● Fontdeck
● Fonts.com
● Adobe Edge Web Fonts
● Local fonts
source: https://drupal.org/project/fontyourface
The old way:
Use the CSS @font-face
rule.
Let's use a new typeface!
@font-your-face
@font-your-face
@font-your-face:
Group selectors
@font-your-face
@font-your-face:
Custom Selectors
@font-your-face:
Custom Selectors
@font-your-face
Where we started:
Where we are now:
Elements of Design
1) Color
2) Typography
3) Texture
source: some DrupalConPDX session
Background Images
Texture
"Background images allows users to
add background images to html
elements on pages of the site."
source: https://drupal.org/project/bg_image
Elements of
Drupal Design
1) Color
2) Typography
3) Texture
4) Layout
source: some DrupalConPDX session and me
Layout
1) Display Suite
2) Gallery Formatter/
Lightbox2
Layout
1) Display Suite
2) Gallery Formatter/
Lightbox2
Display Suite
"Display Suite allows you to take full control
over how your content is displayed using a
drag and drop interface. Arrange your
nodes, views, comments, user data etc. the
way you want without having to work your
way through dozens of template files. "
source: https://drupal.org/project/ds
Default Layout.
Default Display
Options.
Display Suite.
Pick your layout:
Display Suite.
New options in "Manage display":
Display Suite.
Display Suite.
Free intro to Display Suite!
drupalize.me/series/display-suite-drupal-7
Kristof De Jaeger
Layout
1) Display Suite
2) Gallery Formatter/
Lightbox2
Gallery Formatter
"Gallery formatter will turn any
image field into a jQuery Gallery."
source: https://drupal.org/project/galleryformatter
Gallery Formatter
Gallery Formatter
Lightbox2
"The Lightbox2 module overlays
images on the current page."
source: https://drupal.org/project/lightbox2
Gallery Formatter + Lightbox2
Our journey:
1) Why is theming so hard, and why do I think
modules are better?
2) Which modules can help with theming?
3) How can you start learning
more?
4) How can Drupal help people like us, and how
can we help Drupal?
Advanced Beginner
Tools
● Omega
● Panels
● Context
Advanced Beginner
Tools
Omega - "Omega 3 is best suited to those who
like to build their themes through the user
interface. The theme’s layout can be modified
through the theme settings and then
contextually changed (different layouts/settings
for various portions of a site)."
source: https://drupal.org/project/omega
Advanced Beginner
Tools
Panels - "The Panels module allows a site
administrator to create customized layouts for
multiple uses. At its core it is a drag and drop
content manager that lets you visually design a
layout and place content within that layout."
source: https://drupal.org/project/panels
Advanced Beginner
Tools
Context - "Context allows you to manage contextual
conditions and reactions for different portions of your
site. For each context, you can choose the conditions
that trigger this context to be active and choose
different aspects of Drupal that should react to this
active context."
source: https://drupal.org/project/context
Our journey:
1) Why is theming so hard, and why do I think
modules are better?
2) Which modules can help with theming?
3) How can you start learning more?
4) How can Drupal help people
like us, and how can we help
Drupal?
Drupal is
pretty
confusing...
...but it's also
pretty great.
source: me
Drupal has 27,782
developers.
Let them help you!
source: drupal.org
Confession time.
??
Thank you.
@sparklingrobots
tara@sparklingrobots.com

More Related Content

What's hot

WordPress 101 Saturday Session
WordPress 101 Saturday SessionWordPress 101 Saturday Session
WordPress 101 Saturday Session
pamselle
 

What's hot (13)

Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
 
Introduction to Drupal (7) Theming
Introduction to Drupal (7) ThemingIntroduction to Drupal (7) Theming
Introduction to Drupal (7) Theming
 
Smarter Grids with Sass and Susy
Smarter Grids with Sass and SusySmarter Grids with Sass and Susy
Smarter Grids with Sass and Susy
 
WordPress 101 Saturday Session
WordPress 101 Saturday SessionWordPress 101 Saturday Session
WordPress 101 Saturday Session
 
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb updateGrok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
 
Smarter Grids with Sass and Susy...and Wordpress!
Smarter Grids with Sass and Susy...and Wordpress!Smarter Grids with Sass and Susy...and Wordpress!
Smarter Grids with Sass and Susy...and Wordpress!
 
Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016
 
To build a WordPress Theme: Wordcamp Denmark 2014
To build a WordPress Theme: Wordcamp Denmark 2014To build a WordPress Theme: Wordcamp Denmark 2014
To build a WordPress Theme: Wordcamp Denmark 2014
 
Grok Drupal (7) Theming
Grok Drupal (7) ThemingGrok Drupal (7) Theming
Grok Drupal (7) Theming
 
A look at Drupal 7 Theming
A look at Drupal 7 ThemingA look at Drupal 7 Theming
A look at Drupal 7 Theming
 
Drupal 7 Theme System
Drupal 7 Theme SystemDrupal 7 Theme System
Drupal 7 Theme System
 
Drupal distributions - how to build them
Drupal distributions - how to build themDrupal distributions - how to build them
Drupal distributions - how to build them
 
Building a WordPress theme
Building a WordPress themeBuilding a WordPress theme
Building a WordPress theme
 

Viewers also liked (6)

Social Network Technologies
Social Network TechnologiesSocial Network Technologies
Social Network Technologies
 
Bradley Carpenter Virtual Abstract
Bradley Carpenter  Virtual AbstractBradley Carpenter  Virtual Abstract
Bradley Carpenter Virtual Abstract
 
Assessment photo album
Assessment photo albumAssessment photo album
Assessment photo album
 
$conent - a story
$conent - a story$conent - a story
$conent - a story
 
Semantic Web: an introduction
Semantic Web: an introductionSemantic Web: an introduction
Semantic Web: an introduction
 
Best Practices for Freelancers and One Person Shops
Best Practices for Freelancers and One Person ShopsBest Practices for Freelancers and One Person Shops
Best Practices for Freelancers and One Person Shops
 

Similar to 2013 Twin Cities Drupal Camp - No CSS Needed: A Sitebuilders' Guide to Theming

Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon LondonForensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
Emma Jane Hogbin Westby
 
Drupal theming 101
Drupal theming 101Drupal theming 101
Drupal theming 101
Exove
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG)
Mediacurrent
 
Drupal Aware Design: Good Techniques for Better Themes
Drupal Aware Design: Good Techniques for Better ThemesDrupal Aware Design: Good Techniques for Better Themes
Drupal Aware Design: Good Techniques for Better Themes
nyccamp
 
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond
Spark: Authoring Experience++ in Drupal 7, 8, and BeyondSpark: Authoring Experience++ in Drupal 7, 8, and Beyond
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond
Angela Byron
 
BADCamp 2012 -Beginner Best Practices
BADCamp 2012 -Beginner Best PracticesBADCamp 2012 -Beginner Best Practices
BADCamp 2012 -Beginner Best Practices
meghsweet
 

Similar to 2013 Twin Cities Drupal Camp - No CSS Needed: A Sitebuilders' Guide to Theming (20)

Evaluating Base Themes
Evaluating Base ThemesEvaluating Base Themes
Evaluating Base Themes
 
Managing a Project the Drupal Way - Drupal Open Days Ireland
Managing a Project the Drupal Way - Drupal Open Days IrelandManaging a Project the Drupal Way - Drupal Open Days Ireland
Managing a Project the Drupal Way - Drupal Open Days Ireland
 
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon LondonForensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
 
Drupal theming 101
Drupal theming 101Drupal theming 101
Drupal theming 101
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG)
 
Intro to Drupal Slides - DrupalCampSC 2014
Intro to Drupal Slides - DrupalCampSC 2014Intro to Drupal Slides - DrupalCampSC 2014
Intro to Drupal Slides - DrupalCampSC 2014
 
Building User-Centred Websites with Drupal
Building User-Centred Websites with DrupalBuilding User-Centred Websites with Drupal
Building User-Centred Websites with Drupal
 
The Modlet Pattern
The Modlet PatternThe Modlet Pattern
The Modlet Pattern
 
Drupal Aware Design: Good Techniques for Better Themes
Drupal Aware Design: Good Techniques for Better ThemesDrupal Aware Design: Good Techniques for Better Themes
Drupal Aware Design: Good Techniques for Better Themes
 
Fastest Way to DRUPAL
Fastest Way to DRUPALFastest Way to DRUPAL
Fastest Way to DRUPAL
 
Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2
 
Forensic Theming for Drupal
Forensic Theming for DrupalForensic Theming for Drupal
Forensic Theming for Drupal
 
Drupal Theming For Beginners – Danté SELF 2010
Drupal Theming For Beginners – Danté SELF 2010Drupal Theming For Beginners – Danté SELF 2010
Drupal Theming For Beginners – Danté SELF 2010
 
Theme customisation for beginners
Theme customisation for beginnersTheme customisation for beginners
Theme customisation for beginners
 
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond
Spark: Authoring Experience++ in Drupal 7, 8, and BeyondSpark: Authoring Experience++ in Drupal 7, 8, and Beyond
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond
 
Drupal 6 Theming
Drupal 6 ThemingDrupal 6 Theming
Drupal 6 Theming
 
BADCamp 2012 -Beginner Best Practices
BADCamp 2012 -Beginner Best PracticesBADCamp 2012 -Beginner Best Practices
BADCamp 2012 -Beginner Best Practices
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
A forest of designs without subthemes
A forest of designs without subthemesA forest of designs without subthemes
A forest of designs without subthemes
 
Upgrading your site from Drupal 6 to Drupal 7
Upgrading your site from Drupal 6 to Drupal 7Upgrading your site from Drupal 6 to Drupal 7
Upgrading your site from Drupal 6 to Drupal 7
 

Recently uploaded

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 

Recently uploaded (20)

How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 

2013 Twin Cities Drupal Camp - No CSS Needed: A Sitebuilders' Guide to Theming