Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PSD to a Drupal Theme (using a base theme)

5,385 views

Published on

by Oliver Kuy | web.kuydigital.com

  • Be the first to comment

PSD to a Drupal Theme (using a base theme)

  1. 1. PSD to a Drupal Theme (using a base theme) Oliver Kuy web.kuydigital.comPSD to a Drupal Theme (Base theme approach) Oliver Kuy | web.kuydigital.com
  2. 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. 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. 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. 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 shouldnt modify any of the CSS or PHP files in the fusion_core/ folder; but instead create a subtheme of Fusion. Dont modify anything here! Question: Why shouldnt 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. 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, well 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. 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. 8. Step 3 – Building your own Subtheme Then edit the phdrug.info file to update the name and description. Original .info contents New .info contentsname = Fusion Starter name = PHDRUG Themedescription = A fully featured Fusion description = A Fusion subthemestarter theme. Requires <a called PHDRUG. Requires <ahref="http://drupal.org/project/fusion">Fus href="http://drupal.org/project/fusion">Fuion Core</a> and the <a sion Core</a> and the <ahref="http://drupal.org/project/fusion_acce href="http://drupal.org/project/fusion_acclerator">Fusion Accelerator</a> suite to elerator">Fusion Accelerator</a> suite toenable easy point-and-click theming. enable easy point-and-click theming.base theme = fusion_core base theme = fusion_corecore = 7.x core = 7.xengine = phptemplate engine = phptemplatestylesheets[all][] = css/fusion-starter- stylesheets[all][] = css/phdrug-style.cssstyle.css PSD to a Drupal Theme (Base theme approach) Oliver Kuy | web.kuydigital.com
  9. 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. 10. Step 4 – Enable your new Subtheme Next, visit your sites admin/appearance to set your new theme as the default. Visit your subthemes 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. 11. Fusion Theme Regions PSD to a Drupal Theme (Base theme approach) Oliver Kuy | web.kuydigital.com
  12. 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. 13. How to get rid of the Drupal Welcome Message Install Views (Drupal is nothing without it and well 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. 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 Drupals “/node” path? 3 PSD to a Drupal Theme (Base theme approach) Oliver Kuy | web.kuydigital.com
  15. 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. 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. 17. PSD to a Drupal Theme (Base theme approach) Oliver Kuy | web.kuydigital.com
  18. 18. Fusion Theme Regions PSD to a Drupal Theme (Base theme approach) Oliver Kuy | web.kuydigital.com
  19. 19. DEMO Place video herePSD to a Drupal Theme (Base theme approach) Oliver Kuy | web.kuydigital.com
  20. 20. PSD to Drupal CyclePSD to a Drupal Theme (Base theme approach) Oliver Kuy | web.kuydigital.com
  21. 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

×