Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

PSD to a Drupal Theme (using a base theme)

5.725 visualizaciones

Publicado el

by Oliver Kuy | web.kuydigital.com

  • Inicia sesión para ver los comentarios

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

×