Last updated 16 November 2016. Created on 18 December 2012.
Edited by huij.se, kentr, davidneedham, tim.plunkett. Log in to edit this page.

Style Guide provides a visual testing page for Drupal themes. Quickly compare the display of common elements across your themes, and verify that your new theme addresses all common style elements. Check out the demo site to see it in action.

Overview

The Style Guide module creates a preview page for displaying common theme elements in all active themes for your Drupal site. The module comes with previews for common HTML elements, such as tables, forms, links and lists. The Style Guide module creates an API and preview page for displaying common theme elements. Use it to preview items such as tables, menus, and lists in your custom themes.

Purpose

The purpose of a visual style guide as both a general theming and development tool is to ensure that common site elements are styled in a consistent and intentional way. For further reference see

Installing Style Guide

See Installing contributed modules

Using Style Guide

  • You must be logged in as user with the "View theme style guides" permission.
  • Navigate to http://example.com/admin/appearance/styleguide and you will see a style guide for the current default theme.
  • Using the tabs at the top of the page, you can switch to viewing the style guide in other enabled theme.

Using Style Guide Palette

Example

Check out the demo site to see it in action. Screen shot example of of the pager, progress bar, and breadcrumb elements in the Seven theme:

seven-example.png

AttachmentSize
seven-example.png24.85 KB

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.