1. PSD to a
Drupal Theme
(using a base theme)
Oliver Kuy
web.kuydigital.com
PSD to a Drupal Theme (Base theme approach)
Oliver Kuy | web.kuydigital.com
2. What you need
A working Drupal 7 Installation
Fusion based theme (http://drupal.org/project/fusion)
Adobe Photoshop website template (using 960grid - http://960.gs)
Two browsers with one browser running Firebug
FTP program (Filezilla, etc.)
Text Editor (Notepad++, Text Wrangler, etc.)
CSS knowledge & skills (sorry we really need to do some coding)
For tutorials, go to http://www.w3schools.com/css/
PSD to a Drupal Theme (Base theme approach)
Oliver Kuy | web.kuydigital.com
3. Step 1 – Drupal Installation
Assuming that you already have a fresh or existing Drupal installation
running locally on your computer or on a remote server. If not, you
can refer to this page -
http://drupal.org/documentation/install/beginners
PSD to a Drupal Theme (Base theme approach)
Oliver Kuy | web.kuydigital.com
4. Step 2 – Download & Install a Base Theme
For this tutorial, we will download the Fusion base theme -
http://drupal.org/project/fusion
Since the themes folder at the top level of Drupal is typically reserved
for Drupal core themes, you should create a sites/all/themes/
directory for contributed(non-core) themes and put uploaded themes
there.
PSD to a Drupal Theme (Base theme approach)
Oliver Kuy | web.kuydigital.com
5. Step 3 – Building your own Subtheme
The Fusion Core base theme (parent theme) is designed to be easily
extended by a subtheme (child theme). You shouldn't modify any of
the CSS or PHP files in the fusion_core/ folder; but instead create a
subtheme of Fusion.
Don't modify
anything
here!
Question: Why shouldn't we modify
any of the CSS or PHP files in the
fusion_core/ folder?
PSD to a Drupal Theme (Base theme approach)
Oliver Kuy | web.kuydigital.com
6. Step 3 – Building your own Subtheme
Copy the fusion_starter folder and rename it to be your new
subtheme. IMPORTANT: Only lowercase letters and underscores
should be used for the name of your subtheme.
For this tutorial, we'll name our subtheme “phdrug” and place it under
sites/all/themes/
PSD to a Drupal Theme (Base theme approach)
Oliver Kuy | web.kuydigital.com
7. Step 3 – Building your own Subtheme
In your new subtheme folder, rename the .info file to include the
name of your new subtheme. In this case, we rename it as
“phdrug.info”
PSD to a Drupal Theme (Base theme approach)
Oliver Kuy | web.kuydigital.com
8. Step 3 – Building your own Subtheme
Then edit the phdrug.info file to update the name and description.
Original .info contents New .info contents
name = Fusion Starter name = PHDRUG Theme
description = A fully featured Fusion description = A Fusion subtheme
starter theme. Requires <a called PHDRUG. Requires <a
href="http://drupal.org/project/fusion">Fus href="http://drupal.org/project/fusion">Fu
ion Core</a> and the <a sion Core</a> and the <a
href="http://drupal.org/project/fusion_acce href="http://drupal.org/project/fusion_acc
lerator">Fusion Accelerator</a> suite to elerator">Fusion Accelerator</a> suite to
enable easy point-and-click theming. enable easy point-and-click theming.
base theme = fusion_core base theme = fusion_core
core = 7.x core = 7.x
engine = phptemplate engine = phptemplate
stylesheets[all][] = css/fusion-starter- stylesheets[all][] = css/phdrug-style.css
style.css
PSD to a Drupal Theme (Base theme approach)
Oliver Kuy | web.kuydigital.com
9. Step 3 – Building your own Subtheme
Rename the css file in the css/ folder to match.
PSD to a Drupal Theme (Base theme approach)
Oliver Kuy | web.kuydigital.com
10. Step 4 – Enable your new Subtheme
Next, visit your site's admin/appearance to set your new theme as the
default.
Visit your subtheme's settings page (click "Settings" next to it at
admin/appearance) to configure basic options and layout.
PSD to a Drupal Theme (Base theme approach)
Oliver Kuy | web.kuydigital.com
11. Fusion Theme Regions
PSD to a Drupal Theme (Base theme approach)
Oliver Kuy | web.kuydigital.com
12. FURTHER READING
Full documentation on using Fusion:
http://fusiondrupalthemes.com/support/documentation
Full documentation on creating a custom Fusion subtheme:
http://fusiondrupalthemes.com/support/theme-developers
Drupal theming documentation in the Theme Guide:
http://drupal.org/theme-guide
PSD to a Drupal Theme (Base theme approach)
Oliver Kuy | web.kuydigital.com
13. How to get rid of the Drupal Welcome Message
Install Views (Drupal is nothing without it and we'll use it
anyway) - http://drupal.org/project/views
Install Ctools (since this is required by Views) -
http://drupal.org/project/ctools
Avoid any coding by using modules
We are doing this to work on an empty canvas and have full
control on all regions.
Note: We also need to turn off all blocks
PSD to a Drupal Theme (Base theme approach)
Oliver Kuy | web.kuydigital.com
14. How to get rid of the Drupal Welcome Message
Create a View – (Structures > Views > + Add a new view)
1
2 1 – Create a page
2 – type “node”
3 – Click “Continue & edit
Question: What is Drupal's
“/node” path?
3
PSD to a Drupal Theme (Base theme approach)
Oliver Kuy | web.kuydigital.com
15. How to get rid of the Drupal Welcome Message
Click “add” on
CONTEXTUAL FILTERS
Select “Global” in Filters
Click on the checkbox
“Global: Null”
Click on the radio button
“Display contents of "No
results found"”
Click “Apply (All)
Displays”
Click “Save”
PSD to a Drupal Theme (Base theme approach)
Oliver Kuy | web.kuydigital.com
16. Prepare your Adobe Photoshop website template
Assign possible regions for your website elements (see sample)
Merge layers with effects
Try to avoid using texts as an image (exception would be the logo)
Think about flexibility on areas that need to be dynamic
Make adjustments if needed to simplify
Use CSS for solid colors, borders, rounded corners, shadows, etc.
rather than images
Use Views to display your Content Types (Blog, Story, Page, etc)
Image & Imagecache modules (v.6) or Media and ImageMagick
modules (v.7) to automate cropping and resizing of photos & images
PSD to a Drupal Theme (Base theme approach)
Oliver Kuy | web.kuydigital.com
17. PSD to a Drupal Theme (Base theme approach)
Oliver Kuy | web.kuydigital.com
18. Fusion Theme Regions
PSD to a Drupal Theme (Base theme approach)
Oliver Kuy | web.kuydigital.com
19. DEMO
Place video here
PSD to a Drupal Theme (Base theme approach)
Oliver Kuy | web.kuydigital.com
20. PSD to Drupal Cycle
PSD to a Drupal Theme (Base theme approach)
Oliver Kuy | web.kuydigital.com
21. Thank You
PSD to a
Drupal Theme
(using a base theme)
PSD to a Drupal Theme (Base theme approach)
Oliver Kuy | web.kuydigital.com