This recipe details the steps involved in changing the screenshot image associated with a theme. This image provides the user with a preview of what the site will look like when the theme is enabled. This is normally only required when we are working with a sub-theme or a custom theme.
Once the theme is just about ready to go, visit the front page of the site to take the screenshot. Since we are providing a snapshot of the theme, temporarily swap the name of the site with the name of the theme. It might also be useful to prepare some example content for display on the front page to obtain an accurate representation of the style and layout of our theme.
Adding a screenshot for our theme can be done via the following steps:
- On the front page, press ALT + Print Screen to take a screenshot of the active window.
- Open up a graphics editor and paste the screenshot within.
- Make a wide selection of the theme incorporating different elements such as the position of the logo, breadcrumb, fonts, node styles, and so on.
- Crop and resize to 150x90 pixels which is the standard size for theme screenshots.
- Save the image as a PNG file named
screenshot.png. - Finally, copy the file to the theme's folder.
Visiting admin/build/themes (Home | Administer | Site building | Themes) should confirm that screenshot.png is being used to represent our theme.
Drupal automatically looks for a file named screenshot.png in the theme's folder and, if found, includes that image as a preview of the theme on the theme management page.
Each theme's .info file provides the syntax required to specify many of the theme's configuration settings. This also includes nominating the screenshot file to be used.