Ready. Set. Drupal! An Intro to Drupal 8, Part 2Acquia
In this two part series, we'll give you a quick introduction to the Drupal 8 out-of-the-box site building experience. This course is for people who are completely new to Drupal. You might be a developer or a decision maker, but you need to know what makes Drupal tick, and fast.
In part 2, you’ll get an overview of site building, extending Drupal, and contributing to the Drupal community. This course includes:
• Presentations: We've condensed the most essential information about Drupal into this quick course.
• Demos: Watch me completing specific tasks as I build a site.
• Download step-by-step tutorials, and try out the tasks yourself.
No matter your experience level or background, this course will get you familiar with the next up-and-coming version of Drupal.
https://www.acquia.com/resources/acquia-tv/conference/ready-set-drupal-intro-drupal-8-part-2-december-4-2014
WordCamp NEO 2016 presentation "Custom Responsive Theme Workshop" by David Brattoli
While we could use many different frameworks, premium and free themes to build our sites, I have found you need a truly custom framework to build a base to build new themes quickly to meet your project needs. This method to create a framework and then to create a child theme for the look of the site, will allow you build future sites quickly and efficiently. The session will cover why we choose this method and framework, the challenges we faced, how we tackled the challenge, and what we ended up building to solve the problem. I'll also reveal the pitfalls we discovered and how we overcame those as well.
Coding samples can be found here:
http://bit.ly/wceno-crtw-samples
The handout and video are also available for this presentation.
http://munich2012.drupal.org/program/sessions/evaluating-base-themes http://munich2012.drupal.org/sites/default/files/slides/basethemes-handout-munich_1.pdf
One of these themes is not like the other: Mothership, Zen, Omega, Bartik, Fusion. Since writing my first book, Front End Drupal, Drupal base themes have matured significantly. Some of these base themes have evolved to the point of having the learning curve of a theming engine rather than a set of preset markup defaults. In this session we'll explore the base theme ecosystem. You'll get a biased view of how I evaluate base themes and which themes come out on top for the "themer experience". You'll find out why there can be no single base theme to meet the needs of every themer and why the base theme you're using might not be right for you.
Bring your questions (and your flame thrower) as we romp through the valley of Drupal base themes.
Ready. Set. Drupal! An Intro to Drupal 8, Part 2Acquia
In this two part series, we'll give you a quick introduction to the Drupal 8 out-of-the-box site building experience. This course is for people who are completely new to Drupal. You might be a developer or a decision maker, but you need to know what makes Drupal tick, and fast.
In part 2, you’ll get an overview of site building, extending Drupal, and contributing to the Drupal community. This course includes:
• Presentations: We've condensed the most essential information about Drupal into this quick course.
• Demos: Watch me completing specific tasks as I build a site.
• Download step-by-step tutorials, and try out the tasks yourself.
No matter your experience level or background, this course will get you familiar with the next up-and-coming version of Drupal.
https://www.acquia.com/resources/acquia-tv/conference/ready-set-drupal-intro-drupal-8-part-2-december-4-2014
WordCamp NEO 2016 presentation "Custom Responsive Theme Workshop" by David Brattoli
While we could use many different frameworks, premium and free themes to build our sites, I have found you need a truly custom framework to build a base to build new themes quickly to meet your project needs. This method to create a framework and then to create a child theme for the look of the site, will allow you build future sites quickly and efficiently. The session will cover why we choose this method and framework, the challenges we faced, how we tackled the challenge, and what we ended up building to solve the problem. I'll also reveal the pitfalls we discovered and how we overcame those as well.
Coding samples can be found here:
http://bit.ly/wceno-crtw-samples
The handout and video are also available for this presentation.
http://munich2012.drupal.org/program/sessions/evaluating-base-themes http://munich2012.drupal.org/sites/default/files/slides/basethemes-handout-munich_1.pdf
One of these themes is not like the other: Mothership, Zen, Omega, Bartik, Fusion. Since writing my first book, Front End Drupal, Drupal base themes have matured significantly. Some of these base themes have evolved to the point of having the learning curve of a theming engine rather than a set of preset markup defaults. In this session we'll explore the base theme ecosystem. You'll get a biased view of how I evaluate base themes and which themes come out on top for the "themer experience". You'll find out why there can be no single base theme to meet the needs of every themer and why the base theme you're using might not be right for you.
Bring your questions (and your flame thrower) as we romp through the valley of Drupal base themes.
Wordpress 101 presentation - Canadian Association of Labour Media (CALM)darren_puscas
Slides from the Wordpress 101 workshop (morning session) at the Canadian Association of Labour Media Conference (CALM) in Hamilton, Ontario - May 26th, 2012
This presentation was used on a five half-day course on basic web design. The goal of this workshop is to enable participants to create their own Wordpress site by the end of the course. The agenda adjust according to the pace of the participants.
Explains the basics of creating a new WordPress theme; outlining some useful functions, explains some usage in OOP PHP, briefly describes the WordPress themes API.
Theming Joomla! can be hard work. Choosing the right template for a site involves balancing a wide range of style, structure and function factors. The choice often involves compromises and modifications. This is an overview of the theming and customization process, and a showcase of the broad spectrum of template options and tools, including reviews and demos of the most important ones. Presented to the Melbourne Joomla! User Group on 27 Aug 2014.
Firstborn child theme word camp presentation - atlanta 2013Evan Mullins
Learn how to mod themes the right way. Using child themes you won’t loose your edits when there’s a theme update. (101) We’ll go over the advantages and how to set up a child theme. (102) Plus we’ll cover some tricks to make the process a bit easier.
Quite significant changes were introduced in the theme system between Drupal 8 and 7. This guide contains information that applies to Drupal 8 theming.
Wordpress 101 presentation - Canadian Association of Labour Media (CALM)darren_puscas
Slides from the Wordpress 101 workshop (morning session) at the Canadian Association of Labour Media Conference (CALM) in Hamilton, Ontario - May 26th, 2012
This presentation was used on a five half-day course on basic web design. The goal of this workshop is to enable participants to create their own Wordpress site by the end of the course. The agenda adjust according to the pace of the participants.
Explains the basics of creating a new WordPress theme; outlining some useful functions, explains some usage in OOP PHP, briefly describes the WordPress themes API.
Theming Joomla! can be hard work. Choosing the right template for a site involves balancing a wide range of style, structure and function factors. The choice often involves compromises and modifications. This is an overview of the theming and customization process, and a showcase of the broad spectrum of template options and tools, including reviews and demos of the most important ones. Presented to the Melbourne Joomla! User Group on 27 Aug 2014.
Firstborn child theme word camp presentation - atlanta 2013Evan Mullins
Learn how to mod themes the right way. Using child themes you won’t loose your edits when there’s a theme update. (101) We’ll go over the advantages and how to set up a child theme. (102) Plus we’ll cover some tricks to make the process a bit easier.
Quite significant changes were introduced in the theme system between Drupal 8 and 7. This guide contains information that applies to Drupal 8 theming.
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)Laura Scott
This is now DEPRECATED. Please see Grok Drupal (7) Theming, February 11 Update
These are slides for my presentation at DrupalCon San Francisco, April 2010.
There is <a>audio/video of the presentation at the DCSF website</a>.
My apologies for the extraneous slides -- that's how Slideshare converted my Keynote file.
These are the slides for the presentation I gave at DrupalCamp Chicago 2009. http://www.drupalcampchicago.org/sessions/new-adventures-drupal-theming
In this session I’ll present a roadmap to learning Drupal Theming. You won’t learn everything about Drupal theming, but you will learn that you don’t need to know everything in order to start building Drupal themes.
WordPress Themes Demystified was presented at the Melbourne WordPress Meetup in November 2014. It covers the very basics for newcomers and then digs a little deeper referencing some useful resources and tools for developers.
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeSuzanne Dergacheva
Back in the Drupal 7 days (aka last year), we came across some pretty large, hard-to-maintain Drupal 7 sites. The theme was often responsible for a lot of the cruft. We saw themes with excess code, too many template files, and not enough documentation.
The Drupal 8 theme layer provides new features like libraries and Twig blocks that can help us to build cleaner, better-organized themes. So now is a good time for themers to re-visit which theming techniques to use to create themes that are smaller, maintainable, and well organized.
This presentation demonstrates how QueryPath can be used within Drupal to integrate web services and create rich mash-ups.
The "official" DrupalCon Paris video of this presentation can be found here: http://technosophos.com/content/querypath-mashups-and-web-services-video
Drupal Developer Skills (2012) - DrupalCamp LA 2012Chris Charlton
Does learning to develop for Drupal feel hard? Does the sound of building your own modules both scare & excite you? Fear no more!
This session will dive into specifics of what skills, technologies, and tools Web Developers need to know so as not to fall behind or feel obsolete when dealing with Drupal.
NOTE: This is not a session teaching you how to code a module – other sessions & videos are available for that training.
With this session you will walk away feeling focused about what you need to know, what tools to use, and where everything is! Come see what’s left to learn to become a Drupal Pro.
Covered in this session:
What parts of Drupal do I really need to know? What parts are easy or hard?
What skills & tools do I need to be competitive today? How can I generate repeat business?
How much JavaScript, CSS, or PHP do I really need to know for Drupal?
What modules, software, and tools should I be using? How should I be using my tools?
What skills should I have? What should my resume not be missing?
What skills do Drupal designers have? How do I work with or within a team?
Drupal developer tips
How and where do I keep learning Drupal?
http://2011.drupalcampla.com/sessions/drupal-developer-skills-2012
Delivering Micro-Credentials in Technical and Vocational Education and TrainingAG2 Design
Explore how micro-credentials are transforming Technical and Vocational Education and Training (TVET) with this comprehensive slide deck. Discover what micro-credentials are, their importance in TVET, the advantages they offer, and the insights from industry experts. Additionally, learn about the top software applications available for creating and managing micro-credentials. This presentation also includes valuable resources and a discussion on the future of these specialised certifications.
For more detailed information on delivering micro-credentials in TVET, visit this https://tvettrainer.com/delivering-micro-credentials-in-tvet/
Safalta Digital marketing institute in Noida, provide complete applications that encompass a huge range of virtual advertising and marketing additives, which includes search engine optimization, virtual communication advertising, pay-per-click on marketing, content material advertising, internet analytics, and greater. These university courses are designed for students who possess a comprehensive understanding of virtual marketing strategies and attributes.Safalta Digital Marketing Institute in Noida is a first choice for young individuals or students who are looking to start their careers in the field of digital advertising. The institute gives specialized courses designed and certification.
for beginners, providing thorough training in areas such as SEO, digital communication marketing, and PPC training in Noida. After finishing the program, students receive the certifications recognised by top different universitie, setting a strong foundation for a successful career in digital marketing.
The simplified electron and muon model, Oscillating Spacetime: The Foundation...RitikBhardwaj56
Discover the Simplified Electron and Muon Model: A New Wave-Based Approach to Understanding Particles delves into a groundbreaking theory that presents electrons and muons as rotating soliton waves within oscillating spacetime. Geared towards students, researchers, and science buffs, this book breaks down complex ideas into simple explanations. It covers topics such as electron waves, temporal dynamics, and the implications of this model on particle physics. With clear illustrations and easy-to-follow explanations, readers will gain a new outlook on the universe's fundamental nature.
This slide is special for master students (MIBS & MIFB) in UUM. Also useful for readers who are interested in the topic of contemporary Islamic banking.
A workshop hosted by the South African Journal of Science aimed at postgraduate students and early career researchers with little or no experience in writing and publishing journal articles.
A Strategic Approach: GenAI in EducationPeter Windle
Artificial Intelligence (AI) technologies such as Generative AI, Image Generators and Large Language Models have had a dramatic impact on teaching, learning and assessment over the past 18 months. The most immediate threat AI posed was to Academic Integrity with Higher Education Institutes (HEIs) focusing their efforts on combating the use of GenAI in assessment. Guidelines were developed for staff and students, policies put in place too. Innovative educators have forged paths in the use of Generative AI for teaching, learning and assessments leading to pockets of transformation springing up across HEIs, often with little or no top-down guidance, support or direction.
This Gasta posits a strategic approach to integrating AI into HEIs to prepare staff, students and the curriculum for an evolving world and workplace. We will highlight the advantages of working with these technologies beyond the realm of teaching, learning and assessment by considering prompt engineering skills, industry impact, curriculum changes, and the need for staff upskilling. In contrast, not engaging strategically with Generative AI poses risks, including falling behind peers, missed opportunities and failing to ensure our graduates remain employable. The rapid evolution of AI technologies necessitates a proactive and strategic approach if we are to remain relevant.
MATATAG CURRICULUM: ASSESSING THE READINESS OF ELEM. PUBLIC SCHOOL TEACHERS I...NelTorrente
In this research, it concludes that while the readiness of teachers in Caloocan City to implement the MATATAG Curriculum is generally positive, targeted efforts in professional development, resource distribution, support networks, and comprehensive preparation can address the existing gaps and ensure successful curriculum implementation.
A review of the growth of the Israel Genealogy Research Association Database Collection for the last 12 months. Our collection is now passed the 3 million mark and still growing. See which archives have contributed the most. See the different types of records we have, and which years have had records added. You can also see what we have for the future.
Normal Labour/ Stages of Labour/ Mechanism of LabourWasim Ak
Normal labor is also termed spontaneous labor, defined as the natural physiological process through which the fetus, placenta, and membranes are expelled from the uterus through the birth canal at term (37 to 42 weeks
বাংলাদেশের অর্থনৈতিক সমীক্ষা ২০২৪ [Bangladesh Economic Review 2024 Bangla.pdf] কম্পিউটার , ট্যাব ও স্মার্ট ফোন ভার্সন সহ সম্পূর্ণ বাংলা ই-বুক বা pdf বই " সুচিপত্র ...বুকমার্ক মেনু 🔖 ও হাইপার লিংক মেনু 📝👆 যুক্ত ..
আমাদের সবার জন্য খুব খুব গুরুত্বপূর্ণ একটি বই ..বিসিএস, ব্যাংক, ইউনিভার্সিটি ভর্তি ও যে কোন প্রতিযোগিতা মূলক পরীক্ষার জন্য এর খুব ইম্পরট্যান্ট একটি বিষয় ...তাছাড়া বাংলাদেশের সাম্প্রতিক যে কোন ডাটা বা তথ্য এই বইতে পাবেন ...
তাই একজন নাগরিক হিসাবে এই তথ্য গুলো আপনার জানা প্রয়োজন ...।
বিসিএস ও ব্যাংক এর লিখিত পরীক্ষা ...+এছাড়া মাধ্যমিক ও উচ্চমাধ্যমিকের স্টুডেন্টদের জন্য অনেক কাজে আসবে ...
2. Before We Get Going:
• Who This Is For: The Aspiring (Curious)
Drupal Themer
• Assumptions: You know HTML/CSS, Box
Model, Have Drupal 6.x Installed
• Questions at the End, (please)
• Let’s Discuss Further Over Drinks!
Thursday, June 25, 2009
8. Where Do I Get More
Themes? Drupal.org
Thursday, June 25, 2009
9. Theme Design Principles
• Grid - 960px or 1024px width
• 5 Major Regions = Header, Footer,
Left, Center & Right
• Align Text and Images
• Grab color schemes from nature
• Design for content not vice versa
Thursday, June 25, 2009
10. Skills You Will Need:
• Curiosity: A willingness to inspect existing
themes for structure, layout and style.
• Knowledge of CSS: Enough to edit
properties, change backgrounds, add
images, etc.
• XHTML & PHP - it helps to understand what
content is printed where.
• JavaScript (jQuery) for something extra
Thursday, June 25, 2009
11. Drupal Theming Is Not Inherently
Harder Than Designing for
WordPress, but:
• Drupal sites can be much BIGGER:
• More Users
• More Functionality
• More Data
• More Regions to Theme
Thursday, June 25, 2009
13. Two Main Approaches
Write Scripts Extend Scripts
Create *.CSS Files Override CSS
Create Your Own Templates Override Existing Templates
Write .info File From Scratch Copy .info File, Add “Base Theme”
Static HTML/CSS Static HTML/CSS
Mockup Mockup
Build From Scratch Build From Subtheme
Thursday, June 25, 2009
14. Introduction In 4 Parts
• 1. Theme Anatomy
• 2. Basic Build from Static HTML/CSS
• 3. Create a Zen SubTheme
• 4. Tools & Tricks
Thursday, June 25, 2009
15. Part 1: Drupal
Theme Anatomy
sites/all/themes/foo • .info File
• Theming Engines
• Template Language
• PHPTemplates
• CSS, Images
• Scripting
Thursday, June 25, 2009
16. Building A Page
For Display
1. Browser retrieves dynamic information from the database.
2. Browser checks retrieved data against relevant output filters.
3. Server Inserts information into each core template.
4. Theme Engine Merges template files into template.php
5. Browser displays formatted page in the Web Browser.
Thursday, June 25, 2009
17. Drupal Theme Stack
PHP Theme PHPTemplate Theme
Don’t Hack These
Thursday, June 25, 2009
18. Drupal 6.x
Separating Design & Logic
• .info files define your theme
• More templates = more control, better
separation
• Better phptemplate_variables()
• Theme inheritance makes subtheming and
overriding possible
• Pure CSS themes are also possible
Thursday, June 25, 2009
19. Theme Engines
(PHPTemplate comes with Core)
• PHPTemplate Uses the language PHP when
outputting variables mixed in with the xHTML
markup
• Work With Other Template Languages: Smarty, PHPTAL, LOLTheme
• Register an extension -- .smarty
• Register a renderer – smarty_template_render()
• Discover templates on behalf of the theme
• Load a template.php file on behalf of the theme
Thursday, June 25, 2009
20. PHPTemplate
• Written for Drupal by Adrian Rossouw
• Uses foo.tpl.php files to theme Drupal's theme_foo() functions
• See handout for themable functions
• You can write an entire theme in PHP, but why?
• Most common
Thursday, June 25, 2009
22. PHPTemplate Engine
Wrapper that interfaces
Drupal Template Language
• Understands HTML & PHP Statements for Dynamic Data
• Comes installed, so you need not touch it.
• File Extension - *.tpl.php
• Handles - page.tpl.php, front-page.tpl.php, node.tpl.php,
comment.tpl.php, forum.tpl.php
Thursday, June 25, 2009
23. PHP: Generates
Dynamic Content
HTML <?PHP
Page ?>
Client <?PHP
Web
HTML
Page
PHPTemplate ?>
Drupal Core
Browser
HTML
<?PHP
Page
?>
Drupal MySQL
Database
(Views Is Basically a Query Builder)
Thursday, June 25, 2009
24. template.php
• Conditional logic & data processing of
output
• Preprocessors for generating variables
before merging .tpl.php files - each
individual template file gets assigned to
regions
• Use to override theme functions here & do
other raw output customization
Thursday, June 25, 2009
25. What Is A Preprocessor
Function For?
• Setup variables to be placed within
the template (.tpl.php) files. Plain
theme functions do not interact with
preprocessors.
• When overriding CSS and editing
Template files just is not enough.
Thursday, June 25, 2009
26. Preprocessor Functions
• [engineName]_preprocess: Will apply to all
hooks.
Base Theme
• [engineName]_preprocess_ [hookname]:
specific to a single hook.
• [themeName]_preprocess: Will apply to all
hooks.
Subtheme
• [themeName]_preprocess_ [hookname]:
specific to a single hook
Thursday, June 25, 2009
27. Order of Preprocessor
Functions
$theme_preprocess_$hook
Theme $theme_preprocess()
Theme phptemplate_preprocess_$hook()
Engine phptemplate_preprocess()
$modulename_preprocess_$hook()
Modules $modulename_preprocess()
$template_preprocess_$hook
Core $template_preprocess()
Thursday, June 25, 2009
28. So, what should I use to control
dynamic content display?
Template Files Theme Functions
Build a single output variable and
Output is printed
return it.
<?php print $variable; ?>
$output = “output”;
Easier to use if mixing in a lot of plain Easier to use if using control structures
html. and loops.
Thursday, June 25, 2009
29. 3 Common
block.tpl.php Template Files
Navigation
Blog Post 1
Who’s Online node.tpl.php
Syndicate Blog Post 2
page.tpl.php
Thursday, June 25, 2009
30. Each Template Handles
A Region of Your Site
• page.tpl.php - Entire Page
• front-page.tpl.php - Just Front Page
• block.tpl.php - Blocks
• comment.tpl.php - Comments
• forum.tpl.php - Forums
Thursday, June 25, 2009
31. Template Hierarchy -
Specific before General
Home Page Nodes
page-front.tpl.php node-type.tpl.php
page.tpl.php node.tpl.php
Comments
Pages comment.tpl.php
page-node-edit.tpl.php
page-node-1.tpl.php
page-node.tpl.php Blocks
page.tpl.php block-module-delta.tpl.php
block-module.tpl.php
Boxes block-region.tpl.php
block.tpl.php
box.tpl.php
Thursday, June 25, 2009
32. zen.info
metadata
name = internal theme
name zen.info
description = one
sentence
engine = phptemplate Text
Drupal version, 6.x
CSS stylesheets
Regions
Features
Thursday, June 25, 2009
33. Lastly, the Screenshot
• Gives your users/
admins a preview of
your theme
• See drupal.org
screenshot guidelines
if you want to
contribute your
theme.
• (*please contribute!)
Thursday, June 25, 2009
34. *WHEW*
• Do I really need all these files to create a
theme?
• No - all you need is .info, the rest overrides
Drupal default ($left, $right, $footer)
• Should I hack a contributed theme? No -
find a suitable theme to inherit from.
Thursday, June 25, 2009
35. Part Two: Build A Simple
Theme From Static
HTML/CSS
• Look At Mockup
• Write *.tpl files
• Incorporate CSS
Thursday, June 25, 2009
36. Static HTML Page
DrupalAustin
Header
Home | About | Contact | Projects | Events
Left Center Right
Navigation DrupalAustin’s Been Busy Search
Drupal Austin has been busy lately, making awesome sites.
Menu 1
Drupal Austin has been busy lately, making awesome sites.
Menu 2
Drupal Austin has been busy lately, making awesome sites.
Menu 3
Menu 4
Menu 5 DrupalAustin’s Party
Menu 6 Drupal Austin has been busy lately, making awesome sites.
Menu 7 Drupal Austin has been busy lately, making awesome sites.
Menu 8 Drupal Austin has been busy lately, making awesome sites.
Menu 9
Menu 10
Drupal 7’s UI Overhaul Update
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Footer
Thursday, June 25, 2009
37. Regions: $header, $center, $left,
$right, $footer
DrupalAustin
Header
Home | About | Contact | Projects | Events
Left Center Right
Navigation DrupalAustin’s Been Busy Search
Drupal Austin has been busy lately, making awesome sites.
Menu 1
Drupal Austin has been busy lately, making awesome sites.
Menu 2
Drupal Austin has been busy lately, making awesome sites.
Menu 3
Menu 4
Menu 5 DrupalAustin’s Party
Menu 6 Drupal Austin has been busy lately, making awesome sites.
Menu 7 Drupal Austin has been busy lately, making awesome sites.
Menu 8 Drupal Austin has been busy lately, making awesome sites.
Menu 9
Menu 10
Drupal 7’s UI Overhaul Update
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Footer
Thursday, June 25, 2009
38. Region: $header
DrupalAustin
Header
Home | About | Contact | Projects | Events
Left Center Right
Navigation DrupalAustin’s Been Busy Search
Drupal Austin has been busy lately, making awesome sites.
Menu 1
Drupal Austin has been busy lately, making awesome sites.
Menu 2
Drupal Austin has been busy lately, making awesome sites.
Menu 3
Menu 4
Menu 5 DrupalAustin’s Party
Menu 6 Drupal Austin has been busy lately, making awesome sites.
Menu 7 Drupal Austin has been busy lately, making awesome sites.
Menu 8 Drupal Austin has been busy lately, making awesome sites.
Menu 9
Menu 10
Drupal 7’s UI Overhaul Update
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Footer
Thursday, June 25, 2009
40. Head $variables
• $head_title: A modified version of the page
title, for use in the TITLE tag
• $head: Markup for the HEAD section
(including meta tags, keyword tags, and so
on)
• $scripts: Script tags necessary to load the
JavaScript files and settings for the page.
Thursday, June 25, 2009
41. Region: $header
DrupalAustin
Header
Home | About | Contact | Projects | Events
Left Center Right
Navigation DrupalAustin’s Been Busy Search
Drupal Austin has been busy lately, making awesome sites.
Menu 1
Drupal Austin has been busy lately, making awesome sites.
Menu 2
Drupal Austin has been busy lately, making awesome sites.
Menu 3
Menu 4
Menu 5 DrupalAustin’s Party
Menu 6 Drupal Austin has been busy lately, making awesome sites.
Menu 7 Drupal Austin has been busy lately, making awesome sites.
Menu 8 Drupal Austin has been busy lately, making awesome sites.
Menu 9
Menu 10
Drupal 7’s UI Overhaul Update
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Footer
Thursday, June 25, 2009
42. More Region: $header
<div class= “header” id= “h”>
<div class= “header” id= “h”> <?php if ($logo || $site_name) {if (!$logo) {
<h1>Your Site</h1> print ‘<a href= “. check_url($front_page) . “
<a href= “#”><img src= “images/logo.gif” alt= title= “. $site_title . “ >’;
“site” /></a> print ‘<img src= “. check_url($logo) . “ alt= “.
<ul> $site_title . “ id= “logo” /></a>’;
<li><a href= “#”>Home</a></li> }
<li><a href= “#”>About Us</a></li> print ‘<h1>’. $site_name .’</h1>’;
<li><a href= “#”>Contact</a></li> }
<li><a href= “#”>Projects</a></li> </div>
<li><a href= “#”>Events</a></li>
</ul> <?php if (isset($primary_links)) : ?>
</div> <?php print theme(‘links’ , $primary_links,
array(‘class’ => ‘links primary-links’)) ?>
<?php endif; ?>
$logo: The path to the logo image, as defined in theme configuration.
$site_name: The name of the site, empty when display has been disabled in theme settings.
$front_page: The URL of the front page. Use this instead of $base_path, when linking to the
front page. This includes the language domain or prefix
$primary_links (array): An array containing primary navigation links for the site, if they have
been configured.
$secondary_links (array): An array containing secondary navigation links for the site, if they
have been configured.
Thursday, June 25, 2009
43. Region: $left
DrupalAustin
Header
Home | About | Contact | Projects | Events
Left Center Right
Navigation DrupalAustin’s Been Busy Search
Drupal Austin has been busy lately, making awesome sites.
Menu 1
Drupal Austin has been busy lately, making awesome sites.
Menu 2
Drupal Austin has been busy lately, making awesome sites.
Menu 3
Menu 4
Menu 5 DrupalAustin’s Party
Menu 6 Drupal Austin has been busy lately, making awesome sites.
Menu 7 Drupal Austin has been busy lately, making awesome sites.
Menu 8 Drupal Austin has been busy lately, making awesome sites.
Menu 9
Menu 10
Drupal 7’s UI Overhaul Update
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Footer
Thursday, June 25, 2009
45. Region: $right
DrupalAustin
Header
Home | About | Contact | Projects | Events
Left Center Right
Navigation DrupalAustin’s Been Busy Search
Drupal Austin has been busy lately, making awesome sites.
Menu 1
Drupal Austin has been busy lately, making awesome sites.
Menu 2
Drupal Austin has been busy lately, making awesome sites.
Menu 3
Menu 4
Menu 5 DrupalAustin’s Party
Menu 6 Drupal Austin has been busy lately, making awesome sites.
Menu 7 Drupal Austin has been busy lately, making awesome sites.
Menu 8 Drupal Austin has been busy lately, making awesome sites.
Menu 9
Menu 10
Drupal 7’s UI Overhaul Update
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Footer
Thursday, June 25, 2009
46. Right Side Bar
HTML page.tpl.php
<div id= “r”>
<div id= “r”>
<div class= “menu”>
<?php if ($search_box): ?>
<h3>Search</h3>
<div class=”block_menu”>
<form action= “”>
<h3>Search</h3><?php print $search_box ?>
<input name=”search” type=”text” class=”text”
</div>
maxlength=”50”/>
<?php endif; ?>
<input type=”submit” value=”OK” class
<?php if ($right): ?>
“submit” />
<?php print $right ?>
</form>
<?php endif; ?>
</div>
</div>
</div>
$search_box: HTML to display the search box, empty if search has been disabled.
$right: HTML for the right sidebar
Thursday, June 25, 2009
47. Region: $footer
DrupalAustin
Header
Home | About | Contact | Projects | Events
Left Center Right
Navigation DrupalAustin’s Been Busy Search
Drupal Austin has been busy lately, making awesome sites.
Menu 1
Drupal Austin has been busy lately, making awesome sites.
Menu 2
Drupal Austin has been busy lately, making awesome sites.
Menu 3
Menu 4
Menu 5 DrupalAustin’s Party
Menu 6 Drupal Austin has been busy lately, making awesome sites.
Menu 7 Drupal Austin has been busy lately, making awesome sites.
Menu 8 Drupal Austin has been busy lately, making awesome sites.
Menu 9
Menu 10
Drupal 7’s UI Overhaul Update
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Footer
Thursday, June 25, 2009
48. Footer
HTML page.tpl.php
<div class= “footer” id=”f”>
<div class= “footer” id = “f”> <?php print $footer ?>
</div> </div>
</body> <?php print $closure ?>
</body>
$footer : The footer region.
$closure: Final closing markup from any modules that have altered the page.
This variable should always be output last, after all other dynamic content.
Thursday, June 25, 2009
49. Regions: $header, $center, $left,
$right, $footer
DrupalAustin
Header
Home | About | Contact | Projects | Events
Left Center Right
Navigation DrupalAustin’s Been Busy Search
Drupal Austin has been busy lately, making awesome sites.
Menu 1
Drupal Austin has been busy lately, making awesome sites.
Menu 2
Drupal Austin has been busy lately, making awesome sites.
Menu 3
Menu 4
Menu 5 DrupalAustin’s Party
Menu 6 Drupal Austin has been busy lately, making awesome sites.
Menu 7 Drupal Austin has been busy lately, making awesome sites.
Menu 8 Drupal Austin has been busy lately, making awesome sites.
Menu 9
Menu 10
Drupal 7’s UI Overhaul Update
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Footer
Thursday, June 25, 2009
50. Add CSS Styling
• Put Header Div at the Top at 960px width
• Create a Container Div to Hold Left, Center & Right - Use Floats
and Left-Margins to clear the Center & Right from the Left
• Put Footer Div at the Bottom at 960px width
• For this simply layout, there are many CSS templates available
• (The details are a bit out of this presentation’s scope)
Thursday, June 25, 2009
51. From-Scratch, Recap
• We created the page.tpl.php file
• We converted 5 HTML Divs to Template Regions: Header,
Center, Left, Right & Footer
• Next: Create style.css to style the page.tpl.php’s HTML output
• To add more dynamic content we can either
• Add its <?php ?> directly to page.tpl.php
• Write more *.tpl.php files: node.tpl.php, block.tpl.php,
box.tpl.php
Thursday, June 25, 2009
52. Is There An Easier Way?
• There sure is: Subtheming
• Subthemes allow you to build on existing
template files, CSS and Scripts
• Remove what you do not need
• Work from a mockup, just the same and
“shop” for components
• You can even convert a WordPress theme!
Thursday, June 25, 2009
53. Part Three:
Create A Subtheme
Base Theme
Parent
Subtheme
Child
Thursday, June 25, 2009
54. 6.x - CSS Only Themes
• Core page.tpl.php theme based on zen
• Uses well-named classes to identify areas
• A theme with just an .info file will create an
ugly site but with clean XHTML that can be
manipulated
Thursday, June 25, 2009
55. Subtheme in 7 Steps
• 1. Wireframe/Mockup in Photoshop, Illustrator, Fireworks
• 2. Create Static HTML/CSS Files in Text Editor
• 3. Clone Base Theme from Download
• 4. Create Subtheme in Localhost
• 5. Override Templates in *.tpl.php files
• 6. Add JavaScript and jQuery, if necessary
• 7. Override themable functions in template.php
Thursday, June 25, 2009
56. Theme Override Layers
d SubTheme Override Base Theme
c Theme Override
Theme Engine Override
b
Modules
a Core
a: Default Theming Implementation
Thursday, June 25, 2009
57. Theme Inheritance
• Unless you already have expert knowledge of Drupal Theming,
start with an existing theme and customize it.
• Sub theme sets “base theme” in .info file
• Gains all style sheets, templates, all functions in template.php
• Sub theme should never use phptemplate_* functions
• Safest way to ‘tweak’ a theme and still be able to upgrade the
theme
Thursday, June 25, 2009
59. Subtheme Basics
• Inherits resources from the parent theme
• Name the base theme in .info file
• Does not have to be in subdirectory of
parent theme (unlike Drupal 5)
• Put in sites/all/themes with your custom
theme named folder
Thursday, June 25, 2009
60. How to Install A
Base Theme
• Go to Drupal.org/projects/themes
• Log in and filter by Drupal version
• Save to desktop, unzip
• Create folder location sites/all/themes in your Drupal directory
• Go to admin/build/themes and enable/configure new theme
Thursday, June 25, 2009
61. Working From
Base Theme
Base Theme
Subtheme1 Subtheme2 Subtheme3
Music Site Newspaper Blog
Music Site A Music Site B Newspaper A Newspaper B Blog A Blog A
Thursday, June 25, 2009
62. Starting With Zen
• Flexible standards-compliant and semantically correct XHTML theme
• Easily modified through CSS/enhanced version of Drupal’s template system.
• Out of the box, Zen is clean and simple with either a one, two, or three column
layout of fixed or liquid width. In addition, the HTML source order has content
placed before sidebars or the navbar for increased accessibility and SEO.
Thursday, June 25, 2009
63. Zen Features
• Well documented php and css files.
• Lots of easy-to-access classes and ids for CSS developers.
• Classes on body include items like "logged-in", "not-logged-in",
"front", "not-front", as well as the node type ("node-type-story",
"node-type-blog", etc) for single node pages. * Automatic
(table-less) column resizing for 1, 2, and 3-column layouts.
• Separate layout.css file to allow for changing the type of column
layout (holy grail, jello mold, etc).
• A print.css file optimizes print display automatically when sent to a
printer — removes, sidebars and nav elements, optimizes font size,
adds text to links showing href, etc.
Thursday, June 25, 2009
64. Subtheme of Zen
• The base Zen theme is designed to be easily extended by its sub-
themes.
• You shouldn't modify any of the CSS or PHP files in the zen/ folder;
but instead you should create a sub-theme of zen which is
located in a folder outside of the root zen/ folder.
• The examples below assume zen and your sub-theme will be
installed in sites/all/themes/, but any valid theme directory is
acceptable (see “Getting started” for more info.)
Thursday, June 25, 2009
65. Our DrupalAustin Mockup Again
DrupalAustin
Header
Home | About | Contact | Projects | Events
Left Center Right
Navigation DrupalAustin’s Been Busy Search
Drupal Austin has been busy lately, making awesome sites.
Menu 1
Drupal Austin has been busy lately, making awesome sites.
Menu 2
Drupal Austin has been busy lately, making awesome sites.
Menu 3
Menu 4
Menu 5 DrupalAustin’s Party
Menu 6 Drupal Austin has been busy lately, making awesome sites.
Menu 7 Drupal Austin has been busy lately, making awesome sites.
Menu 8 Drupal Austin has been busy lately, making awesome sites.
Menu 9
Menu 10
Drupal 7’s UI Overhaul Update
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Footer
Thursday, June 25, 2009
66. 3 Column
Fixed Right/Left
Fluid Center
Thursday, June 25, 2009
69. Step One:
Copy Zen Starter Kit
• Copy the STARTERKIT folder out of the zen/ folder and rename it to
be your new sub-theme.
• IMPORTANT: Only lowercase letters and underscores should be
used for the name of your sub-theme.
• For example, copy the sites/all/themes/zen/STARTERKIT folder and
rename it as sites/all/themes/foo.
• Why? Each theme should reside in its own folder. Unlike in Drupal 5,
sub-themes can (and should) reside in a folder separate from their
base theme.
Thursday, June 25, 2009
71. Define Base Theme
foo.info file
• base theme = Zen
• style sheets are defined in parent theme
• JavaScript defined in parent theme
• All template *tpl.php files
• Anything defined from the “template.php” file including theme
function overrides, preprocessors or anything else
Thursday, June 25, 2009
72. Choose Fixed
3 Column Layout
• Copy the layout-fixed.css from the zen/zen folder and place it in
your sub-theme's folder. Rename the layout stylesheet to
"layout.css".
• For example, copy zen/zen/layout-fixed.css and rename it as foo/
layout.css. Note that the .info file already has an entry for your
layout.css file.
• Why? In Drupal 6 theming, if you want to modify a stylesheet
included by the base theme or by a module, you should copy the
stylesheet from the base theme or module's directory to your sub-
theme's directory and then add the stylesheet to your .info file.
See the Drupal 6 Theme Guide for more info.
Thursday, June 25, 2009
73. Copy Zen Stylesheet
• Copy the zen stylesheet & save in sub-
theme's folder. Rename it.
• zen/zen/zen.css foo/foo.css.
• Your .info file overrides the base theme's
zen.css file.
Thursday, June 25, 2009
74. Copy HTML-elements
Stylesheet
• Place it in your sub-theme's folder.
• For example, copy zen/zen/html-
elements.css to foo/html-elements.css. Note
that the .info file already has an entry for
your html-elements.css file.
Thursday, June 25, 2009
75. Edit template.php &
themesettings.php
• Replace ALL occurrences of "STARTERKIT"
with the name of your sub-theme.
• For example, edit foo/template.php and
foo/theme-settings.php and replace
"STARTERKIT" with "foo".
Thursday, June 25, 2009
76. Enable Your Subtheme!
• # Log in as an administrator on your
Drupal site and go to Administer > Site
building > Themes (admin/build/
themes) and enable your new sub-
theme.
Thursday, June 25, 2009
77. Customization
• CSS: Most changes can be made just with CSS. You can create
forms.css, for example, just to theme forms. Remember: add this to
your theme’s .info file & clear your cache!
• PHP: Remove the regions you do not need. Zen is pretty good
about not giving you a lot of styling to remove before getting
going.
• jQuery Example: Use to add a class to a tag when hovering on it:
$(this) .hover (
function() {
$ (this) .addClass(‘hover’);
},
function () {
$(this) .removeClass(‘hover’);
Thursday, June 25, 2009
78. Part 4: Ninja
Tips & Tricks • Tools!
• Preprocessor
Functions
• template.php
• Customizing data
output
• More template files
for more control
Thursday, June 25, 2009
79. Great Tools For Analyzing
Design
• Firebug Plugin for Firefox
• Gridfox Plugin for Firefox
• Devel Module - Drupal Suite
• Web Developer Plugin, also for Firefox
Thursday, June 25, 2009
86. Firebug Lite
• JavaScript
file to
simulate
some Firebug
features in
other
browsers
• http://
getfirebug.c
om/lite.html
Thursday, June 25, 2009
87. Stealther Firefox Plugin
• Temporarily disables saved
information - caches,
cookies, histories, form
information
• Quickly view how site looks
for users not logged in
• https://
addons.mozilla.org/en-US/
firefox/addon/1306
Thursday, June 25, 2009
88. Devel Module - Suite for
Theme & Module Dev
• http:/drupal.org/projects/
devel
• Tip: Give all users Devel
Module permissions to clear
the cache without being
logged in. ONLY for
development sites!
• Great for exposing function
calls and elements, including
whether or not the node is a
teaser. This happens to be
boolean.
Thursday, June 25, 2009
89. Theming for Views
Great way to
keep track of function
calls.
Views is one of the harder
(and more necessary)
modules to theme.
Views can produce all
kinds of lists of content.
Views is basically a SQL
query builder.
Thursday, June 25, 2009
90. Browsershots.org
• Identify problems in
other browsers
• Multiple screenshots
for troubleshooting
• Takes up to 30
Minutes to generate
the screenshots
Thursday, June 25, 2009
91. Zotero
• Firefox extension
which allows you to
take a snapshot of a
webpage along
with your notes on it,
take notes on a per
page basis, add
tags to a page,
rename page title
Thursday, June 25, 2009
92. Design & Web Standards
• http://www.alistapart.com/topics/
• http://www.csszengarden.com/
• http://www.thinkvitamin.com/
• http://www.uxmag.com/
• http://getfirebug.com/
Thursday, June 25, 2009
93. Modules
• Read the theme section in the module developers guide.
• Modules in Drupal have the capability to allow presentation to be
overridden for use on individual sites – (this process is theming)
• Logic must be separated as much as possible from presentation
• Modules do as much of the work on the data as possible, and
hand that data off to the presentation layer.
• Modules then provide default implementations that provide the
basic presentation and serve as the basis for themes that wish to
provide an alternate presentation.
• Handled through the theme() function, called a “theme hook”
Thursday, June 25, 2009
94. Drupal API: Node Types
• Most content in Drupal are referred to as nodes; content type and
node type are roughly equivalent. Node attributes that you may
need to know about are:
• nid: the node’s ID.
• vid: the version ID for the node.
• type: basically, the content type, such as a page or blog.
• uid: the author’s user ID.
• status: whether published/visible (= 1) or unpublished/hidden
(= 0).
Thursday, June 25, 2009
96. Ways To Contribute
• Clean up XHTML and CSS
• Help create a set of well-named classes to
use across Drupal
• Help create templates that do not yet exist
Thursday, June 25, 2009
97. Thanks!
• Feel free to ask
questions.
Thursday, June 25, 2009