PSD to a Drupal Theme (using a base theme)

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

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/


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


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.


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?



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/



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”



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



Rename the css file in the css/ folder to match.


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.


Fusion Theme Regions


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


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




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




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”


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


DEMO

Place video here


PSD to Drupal Cycle


Thank You

PSD to a
Drupal Theme
(using a base theme)

PSD to a Drupal Theme (using a base theme)

Recommended

More Related Content

What's hot (18)

Viewers also liked (14)

Similar to PSD to a Drupal Theme (using a base theme) (20)

PSD to a Drupal Theme (using a base theme)