psd to a drupal theme (using a base theme)

PSD to a Drupal Theme (Base theme approach)Oliver Kuy | web.kuydigital.com

PSD to aDrupal Theme

(using a base theme)

Oliver Kuyweb.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.

name = PHDRUG Themedescription = A Fusion subtheme called PHDRUG. Requires <a href="http://drupal.org/project/fusion">Fusion Core</a> and the <a href="http://drupal.org/project/fusion_accelerator">Fusion Accelerator</a> suite to enable easy point-and-click theming.base theme = fusion_corecore = 7.xengine = phptemplate

stylesheets[all][] = css/phdrug-style.css

name = Fusion Starterdescription = A fully featured Fusion starter theme. Requires <a href="http://drupal.org/project/fusion">Fusion Core</a> and the <a href="http://drupal.org/project/fusion_accelerator">Fusion Accelerator</a> suite to enable easy point-and-click theming.base theme = fusion_corecore = 7.xengine = phptemplate

stylesheets[all][] = css/fusion-starter-style.css

Original .info contents New .info contents



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

3

1 – Create a page2 – type “node”3 – Click “Continue & edit

Question: What is Drupal's“/node” path?



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


Fusion Theme Regions


DEMO

Place video here


PSD to Drupal Cycle


Thank You

PSD to aDrupal Theme

(using a base theme)

psd to a drupal theme (using a base theme)

Documents

theme http

new theme

fusion base theme http

theme guide

fusion subthemestarter

fusion theme regions

subtheme child theme

level of drupal