WordPress.org

Ready to get started?Download WordPress

Codex

Attention Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

User:TECannon/UI Pattern and Style Guide

This article is a ROUGH DRAFT. The author is still working on this document, so please do not edit this without the author's permission. The content within this article may not yet be verified or valid. This information is subject to change.

This is an guide to the styles used by the WordPress Administration Panel.

Global Styles

@content - intro to global styles here.

Fonts

Primary Font (Sans Serif) - "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;

  • font-size:13px;
  • line-height:1.4em;

Secondary Font (Serif) - Georgia,"Times New Roman","Bitstream Charter",Times,serif Generally used for... See specific uses for styles

  • Menu Bar - Title
  • Administration Menus - Top Level
  • Administration SubPanel - Top Level Header
  • Data Tables - Pagination Labels
  • Administration SubPanel - 3rd level headers of a visual area
1st levels - h2 of the work area, header of a widget-holder, header of a post box, it can be assumed that the top level once inside any area is the 2nd level -- even if there is no top level as in the screen meta tabs.


Icons

ui-icons.png

Administration icons are only needed for top-level admin-menu items. Sub-level menus and thier pages, used their parent icon in the Work Area Header.

Administration Menu Icons
  • Box Size: 28px by 28px
  • Image Size: aprx. 18px square
  • Use monochrome for top-level admin menu items
  • Use color version for selected and hover states.
Work Area Header Icons
  • Box Size: 36px by 36px
  • Image Size: aprx. 30px square
  • Monochrome only

Work Area (SubPanels)

Hierarchy & Headings

@content -- intro content

Work Area Header

ui-work-area-header.png

The h2 header is the title for the screen, so there should be only one h2 header.

  • Text: Primary Font, 24px (1.5em)
  • Line Height: 35px (1.4em)
  • Bold and Italic
  • Text Shadow: 1px down, no blur, white
  • Margin: 0
  • Padding: top-14px; bottom-3px; right-15px; left-0
  • Header Icon: 36px by 36px square with a 6 pixel margin inserted before the header text.

Secondary Headers [h3]

ui-work-area-subhead.png

Used on single form (Settings) screens

  • Text: Primary Font, 15px (1.17em)
  • Line Height: 18px (1.4em)
  • Bold

UI Widget and Postbox Headers [also h3]

ui-uiwidgets-head.png
  • Text: Primary Font, 12px
  • Line Height: 12px (1em)
  • Bold
  • Text Shadow: 1px down, no blur, white
  • Margin: 0
  • Padding: top and bottom - 7px; left and right - 9px
  • Height (including padding): 26px
  • Border: solid, 1px, 6px radius
  • Text Color: #464646
  • Text Shadow: 1px down, no blur, white
  • Background: #DFDFDF gray-grad.png
  • Border Color: #DFDFDF

Page Organization

Single Form Page
(Ex Settings Pages)
ui-page-single-form.png
Sectioned Form Page
(Ex Themes, Tools, Updates)
ui-page-sectioned-form.png
Data Table Page
(Ex Edit Posts)
Tabbed Pages
(Ex New Manage Themes)
Box Layout Page
(Ex Add Post, Dashboard)

Boxes

Basic Box
ui-container.png
Tag List Boxes
Tabbed Boxes
Publish Box

Is sortable but can't remove it in screen options

Full Form Box
ui-box-full-form.png

(ex QuickPress)

Parent/Child Box

Data Tables

Form Elements

  • Text: Primary Font, 12px
  • Line Height: 15px
  • Border: solid, 1px, 4px radius (on text input fields)
  • Padding: 3px
  • Margin: 1px
  • Text Color: #333333
  • Background: #FFFFFF
  • Border Color: #DFDFDF

Radio and Check-boxes

ui-forms-radio-input.png
ui-forms-checkbox-input.png
  • Vertically aligned middle
  • Individual item labels appear on the right

Select Elements (Dropdown Lists)

ui-forms-select.png
  • Text: 11px
  • Height: 22px (2em)
  • Padding: 2px

Text Inputs and Text Areas

ui-forms-text-input.png
Same styles as Text inputs, but text areas with multiple lines requires a line height.
  • Line height: 1.4em (apr 17px)

Buttons

Global Button Format
  • Text: Primary Font, 11px
  • Line Height: 13px
  • Border: solid, 1px, 11px radius
  • Padding: top/bottom - 3px; left/right - 8px
  • Width: based on text length
  • Height: aprx 23px
Button and Secondary Buttons (.button, .submit input, .button-secondary)
ui-button-states.png
  • Text Color: #464646
  • Text Shadow: 1px down, no blur, white
  • Background: #F2F2F2 white-grad.png
  • Border Color: #BBBBBB
  • Hover - text color:#000000; border color:#666666
  • Active - text color:#000000; border color:#666666; background:#f2f2f2 white-grad.png
  • Disabled - text color: #AAAAAA; border color:#DDDDDD
Primary Button (.button-primary)
ui-button-primary-states.png
  • Text Color: #FFFFFF bold
  • Text Shadow: 1px up(-1px), no blur, black (30% transparency)
  • Background: #21759B button-grad.png
  • Border Color: #298cba
  • Hover - text color:#eaf2fa; border color: #13455b
  • Active - text color:#eaf2fa; border color: #13455b; background: #21759B button-grad-active.png
  • Disabled - text color:#9FD0D5; background: 298CBA
Link Buttons (.button-link, a.button)
  • Line Height: 15px
  • Padding: top/bottom - 3px; left/right - 10px

Feedback Messages

Navigation Areas

Header Bar

Main Navigation (Administration Menus)

Screen Meta (Screen Options & Contextual Help)

Footer