Drupal Beginner Track #4 Intro to Drupal 7 Theming

Drupal Theming
“
A theme is a collection of files that define
the presentation layer.
https://www.drupal.org/node/171194
Theme Overview
What are the different options when it
comes to theming?
contrib
Free, open source!
purchased
Improved design
YMMV
How to pick a theme?
▧
▧
▧
▧
▧
▧
▧
▧
How many reported installs?
Do they have a stable release?
Who wrote it?
Good documentation?
Any boobytraps in the issue queue?
When was the last commit?
Is it RESPONSIVE?
HOW DOES IT LOOK?
Custom
From scratch
From a base theme
Base Themes
LAB 1
Find a contrib theme & install it on your site
http://www.drupal.org
LAB 1
1. GO: http://www.drupal.org
2. Navigate to:
Download & Extend > Most Installed Themes
3. Pick a theme (not a base theme) & download the zip
4. Unzip the theme
5. Copy the theme folder to sites/all/themes/contrib
6. Import site into Acquia ADD
○ Select the folder you copied to your laptop
○ Import the database from SANDcamp2016.sql
7. Log in as admin/sandcamp2016
8. Enable the DrupalAce theme
& set as default under ‘Appearance’
Anatomy of a Theme
Stuff you find inside a theme
[theme_name].info
css/
js/
img/
templates/
template.php
Theme info
Configuration
settings
Defined
Regions
CSS
JavaScript
Other Stuff
plugins
settings
etc.
LAB 2
Create your own custom subtheme
LAB 2
1. Download & Install ‘Bootstrap’ base theme
https://www.drupal.org/project/bootstrap
2. Create your subtheme
Copy
/sites/all/themes/bootstrap/bootstrap_subtheme to
/sites/all/themes
3. Rename the bootstrap_subtheme folder to mytheme
4. In mytheme folder, rename bootstrap_subtheme.info.
starterkit to mytheme.info
5. Customize mytheme.info
Set ‘name’ to ‘My Custom Bootstrap Sub-theme’
Set ‘description’ to ‘My first custom theme’
6. In your browser, go to ‘Appearances’ and set
mytheme to “enable & set default”
TPL files
www.drupal.org/node/1089656
▧
▧
▧
▧
▧
modules\system\html.tpl.php
modules\system\page.tpl.php
modules\system\region.tpl.php
modules\node\node.tpl.php
modules\block\block.tpl.php
Search for *.tpl.php
in your site installation folder
and take a look at a few of them
Putting
business logic
code in the
*.tpl.php
▧
▧
▧
▧
▧
TPL File Precedence
page--node--[nid].tpl.php
page--[node-name].tpl.php
page--node.tpl.php
page--front.tpl.php (if front page)
page.tpl.php
▧
▧
▧
▧
▧
TPL File Precedence
page--node--[nid].tpl.php
page--[node-name].tpl.php
page--node.tpl.php
page--front.tpl.php (if front page)
page.tpl.php
Customizing A View using template suggestions
Advanced > Theme: Information
LAB 3
Create your own custom region
LAB 3 - Add a custom region to theme
1. Define the new region in mytheme.info
regions[content_footer] = 'Content footer'
2. Copy
.../bootstrap/theme/system/page.tpl.php to
.../mytheme/templates/page.tpl.php
3. Print the new region content in ...
/mytheme/templates/page.tpl.php
After line 155:
<?php print render($page['content']); ?>
Add these three lines of code:
<?php if (!empty($page['content_footer'])): ?>
<?php print render($page['content_footer']); ?>
<?php endif; ?>
4. Flush all caches!!
5. Create a new custom block
6. Place it in the new ‘Content Footer’ region
LAB 4
Customize your CSS!
LAB 4 - Add CSS
1. Open .../mytheme/css/style.css
2. Add CSS rule:
body {
background-color: #ffa500;
}
3. In your browser, RELOAD
LAB 5
Theme a block
LAB 5 - theme a specific block
1. Create a new custom content block
Structure > Blocks > Add Block
Block title: leave blank (shown to user)
Block description: My Custom Block (for admin)
Body block: This is my custom block
2. Place block in the Footer region
Structure > Blocks
3. Use a browser inspector to get the CSS ID of the block.
It will be something like block-block-n
4. Open .../mytheme/css/style.css
Add a CSS rule:
#block-block-2 {
background-color: #FFFF00;
}
5. In your browser, RELOAD
LAB 5 - block-block-2
1. Create a new custom content block
Structure > Blocks > Add Block
Block title: leave blank (shown to user)
Block description: My Custom Block (for admin)
Body block: This is my custom block
2. Place block in Right Sidebar (Secondary)
Structure > Blocks
3. Use a browser inspector to get the CSS ID of the block.
It will be something like block-block-n
4. Open .../mytheme/css/style.css
Add a CSS rule:
#block-block-1 {
background-color: #FFFF00;
}
5. In your browser, RELOAD
DEMO 1
Automatically add “Copyright
2016” to the footer region
where the year is generated
dynamically as opposed to
being static text.
DEMO 1
1. Edit template.php in your mytheme folder
and add these lines:
function mytheme_preprocess_page(&$variables){
$variables['copyright'] =
t("Copyright @date", array('@date' => date('Y'),));;
}
2. Edit /templates/page.tpl.php in your mytheme folder
and just below this line (almost at bottom of file):
<?php print render($page['footer']); ?>
Add:
<?php if(isset($copyright)) : ?>
<?php print $copyright; ?>
<?php endif; ?>
3. Flush all caches (when in doubt flush twice or more!)
DEMO 2
1. Turn on and configure Devel module with settings:
Display $page array
Rebuild the theme registry on every page load
2. Edit template.php in your mytheme folder
and add these lines
/**
* Add plus sign to all block titles in the footer region
*/
function mytheme_preprocess_block(&$variables){
//
dpm($variables['block']);
//
dpm($variables['block']->region);
if ($variables['block']->region == "footer") {
$variables['block']->subject = '-' . $variables['block']->subject;
}
//
}
dpm($variables['block']->subject);
DEMO 2
1. Turn on and configure Devel module with:
Display $page array
Rebuild the theme registry on every page load
2. Edit template.php in your mytheme folder
and add these lines (or copy from bootstrap-final)
/**
* Add plus sign to all block titles in the footer region
*/
function mytheme_preprocess_block(&$variables){
//
dpm($variables['block']);
//
dpm($variables['block']->region);
if ($variables['block']->region == "footer") {
$variables['block']->subject = '-' . $variables['block']->subject;
}
//
}
dpm($variables['block']->subject);
LAB 7
Configure for production service
LAB 6 - Configure for production
1. In Drupal Admin, go to
Configuration >
Development >
Performance
2. Turn on
a. Cache pages for anonymous users
b. Cache blocks
c. Aggregate and compress CSS files
d. Aggregate JavaScript files
Additional resources
http://meetup.com/San-Diego-Drupal-Users-Group/
https://groups.drupal.org/san-diego
https://www.drupal.org/irc
Extra Credit/Bonus
▧ CSS Injector module
▧ How to modify markup in Views
▧ Display Suite, Panes and
Paragraph modules
▧ SimplyTest.me to try out new modules
Thanks!
Any questions?
You can find me at:
@richyumul
[email protected]