Your SlideShare is downloading. ×

PSD to a Drupal Theme (using a base theme)

3,622

Published on

by Oliver Kuy | web.kuydigital.com

by Oliver Kuy | web.kuydigital.com

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,622
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
78
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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 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. 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. 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 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. 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 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. 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 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. 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. 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 herePSD to a Drupal Theme (Base theme approach) Oliver Kuy | web.kuydigital.com
  • 20. PSD to Drupal CyclePSD 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

×