Tonal

tonal-mainimage

Tonal takes its cue from your content, with a minimal style that changes based on your background color. This theme has large featured images, full-width videos, and post formats that look great on any device.


Featured Images

Give your posts flair with large Featured Images.

tonal-featuredimage


Post Formats

Tonal supports all Post Formats. Display images and videos at full-width, or show links and quotes with special styling.

tonal-posttype

Each post format links to that format’s archive using an icon block to denote the format. This allows your readers to easily browse all posts of the same type.


Responsive Design

Tonal looks good on any device and screen size. Tonal responds to the device with an adaptive layout and a dynamic menu and widget panel.

tonal-responsive


Menu Panel

Tonal’s widgets and navigation are in hidden panel: click on the menu link in the top right, to expand and view those sections. This keeps the design sleek and helps Tonal adapts to whatever device you are viewing on, creating a clean reading experience for everyone.

tonal-menu


Background Adaptation

Tonal has a simple but powerful feature; it adapts to any background color you pick. Without you changing anything else, it will modify your typography and other elements to make sure they work with your new background color.

The background adaptation is really a fun feature to play with. You can easily create a unique look for your site by just changing the background color and be assured your content will still be readable. Note: Background Adaptation only works with solid colors, not custom images.

tonal-backgrounds


Custom Colors

You can further customize Tonal with Custom Colors and the Custom Design upgrade. There are even 3 unique palettes created just for this theme.

tonal-palettes

Custom Menus, Header, and Background

Not only can you change the look with a background color and Custom Colors, you can also select a Custom Background pattern for your site or a Custom Header.

You can set these up easily: just go to Appearance → Background to set the background or Appearance → Header to set the Header.

Tonal comes with one menu that is easily set up by going to Appearance → Menus.

Quick specs all measurements in pixels (unless otherwise stated) and maximum measurements on desktop

  1. The main column width is 680.
  2. The widget areas are 30%