When you apply a theme to your site pages, you have to choose from the list of available themes in the site selector. The only identification for each theme is the theme’s name, along with a small thumbnail preview image that gives a brief impression of the theme. By default, themes don’t provide a thumbnail image, so you must create one. This is even more important when developing color schemes for a theme. Names are not displayed for color schemes, so a thumbnail preview is required to identify them.
Follow these steps to create a thumbnail preview for your theme:
With your theme applied to your site and an optional color scheme chosen, take a screenshot that best represents it.
Crop any unwanted areas and re-size the screenshot to 150 pixels high by 120 pixels wide. Your thumbnail must be these exact dimensions to display properly.
Save the image as a
thumbnail.pngand place it in the theme’s
src/imagesfolder (create this folder if it doesn’t already exist). On redeployment, the
thumbnail.pngfile automatically becomes the theme’s thumbnail.
Now, when you apply the theme, its thumbnail displays along with the other themes that are available to your site.
Creating Reusable Pieces of Code for Your Themes