Find and install a contributed theme from Drupal.org

Draft (work in progress) -- AWAITING PEER REVIEW
Description: 
Understanding, installing and evaluating a Drupal theme
Overview: 

Themes control the look and feel of your Drupal site. A theme contains files that determine the structure of your site and code that defines design elements. Themes can be versioned out as sub-themes as well. Many of the popular themes are "base themes" intended to be clean starting points for a sub-theme. In this lesson, we will install a stand-alone contributed theme on Drupal.org and review it.

Steps: 
  1. Locate and download a theme
     
    Finding and installing a theme is much like the process for modules. Visit the themes page on drupal.org and find the theme Best Responsive. To filter our search, we want to select compatibility of 7.x and use the search terms. Many themes use the term "responsive" so you may need to scroll a bit.
     
    Once you found it, visit the theme's project page and read the description.
     
    To download the theme, scroll down to the Downloads section. If the theme is for a site that will be public, always choose the latest stable release. If you intend to contribute patches or troubleshoot the theme, you should download the latest development version. At the time this lesson was written, Best Responsive only has one release and it is 7.x-1.1. Click on the tar.gz link to download the files.
  2.  

  3. Install and enable a theme
     
    Locate the compressed tar.gz file you downloaded and double-click to expand it. Drag the folder to your /sites/all/themes folder.
     
    To enable the theme, visit mysite/admin/appearance. This page lists all of the themes available for the site. Drupal core comes with a handful of standard themes: Bartik (standard D7 theme), Seven(standard D7 admin theme), Garland(legacy D6 look) and Stark(a stripped down base theme). You'll find Best Resposive listed in the the Disabled Themes section. Click "Enable and set default."
     
    Visit your homepage to see the new look of your site.
     

    Alternative methods for downloading and installing a theme:

    • Copy the url of the tar.gz file by ctrl-clicking the link and selecting Copy Link Location. Visit mysite/admin/appearance and click on "Install new theme" link new the top of the page. Paste the url into the first field and click Install. This method works well for local sites or site under a secure layer. Sites on http will give a warning that your password will be sent in plain text. Not a good thing. You will still need to visit the /admin/appearance page to enable and set default.
    • Using drush in the command line, you can run the command below to download:
      drush dl best_responsive --destination="sites/all/themes"
      and this to enable:
      drush en best_responsive
  4. Configure a theme
     
    Return to your /admin/appearance page and click on the "Settings" link by the new theme. Themes have varying degrees of configuration options. Some have many settings to let you customize the colors, fonts and responsive breakpoints. The Best Responsivetheme is fairly simply, but does include settings for the slideshow and social icon links that are specific to this theme. Most themes offer the ability to toggle on or off various theme elements, like the logo, slogan or navigation menus. Play around with all of these settings to see the effect they have on the layout.
  5.  

  6. Review the files in a theme
     
    For an in-depth understanding of the anatomy of a theme, visit this page.
     
    Best Responsive includes the typical files usually found in a theme:
     
    • .info file - This is the only required file in a theme. It describes the theme, what other resources will be included and theme settings.
    • css - This theme has style.css for all the styling and responsive.css that contains media queries targeting various devices and browser widths.
    • favicon and logo - Both of these can usually be overridden in the theme settings
    • images - all of the icons, backgrounds and other image resources used
    • js folder - javascript files that help with interactive elements like the slideshow or offer a browser polyfill like html5.js.
    • license and readme file - Read them. The ReadMe file often contains helpful hints to save you lots of time troubleshooting.
    • screenshot - used on the /admin/appearance page as a preview.
    • template.php - Contains php logic specific to the theme in the form of theme hooks. For example: changing the output of the breadcrumbs.
    • templates folder - All of the PHP templates for the various page layouts. These contain the markup of the site with variables inserted.
    • theme settings - Creates those custom theme settings for the homepage slider and social icons we saw earlier.
  7.  

  8. Give it a spin
     
    This theme has a link to a demo on its project page. It's often helpful to visit the demo to see how the author intending the theme to be used. Click around on the demo site to see the various content types and elements.
     
    Given that Best Responsive is making a big claim with it's name, you'll want to resize the browser to see how the site reconfigures. Also, test it on as many browsers and devices you have access to.
     
    If you find any issues with a theme you are testing, visit the project page and review the issue cue. If there is no issue reported, contribute to the community by reporting this issue this way and helping to resolve it. Others may be experiencing the same issue.

Lesson tags:

Comments