Visual Editor Formats

If you are using the Meerkat theme, you can use the “Formats” menu in the visual editor  (orange arrow, below) to apply more advanced styles to your page/post content. The formats are grouped by type into submenus- the headers are shown in the screenshot below.

tinymce-formats-expanded

Apply a format

Place your cursor inside the block of text you want to format (don’t highlight the text), then choose a format from the pulldown menu. Except for headers, you can apply multiple formats to the same content.

Container styles: you can highlight multiple blocks of content with your cursor, then select a container style which will be applied to all of them.

Element specific styles: the formats under the “Links” submenu can only be applied to pre-existing links. The formats under the “Lists & Tables” submenu can only be applied to pre-existing lists or tables.

Determine current formats

To see which formats are currently assigned to a block of content, place your cursor inside the block of content, then open the formats pulldown menu, and look for any grey vertical bars to the left of the format names (outlined in red, below). In this example, the first sentence has the Header 2 format assigned to it.

tinymce-formats-current

Remove a format

Place your cursor inside the content, then select the applied format a second format from the formats pulldown menu.  For container styles applied to multiple content blocks, you can highlight more than one with your cursor, then choose the format a second time to remove it from all of them.

Format Demos

Click on a section below to see examples of content using the formats.

Headers

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Bar Header, green

Bar Header, blue


Columns & Spacers

Halves

1/2 width column, left. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut tincidunt metus, at convallis diam. Mauris aliquam, lorem in ultrices posuere, dolor mi congue libero, a varius velit nulla a mauris. Vestibulum et suscipit orci, in mattis erat. Integer semper interdum volutpat. Proin eget mi rutrum quam consectetur tristique et id nisl. Nam sit amet augue porttitor, vulputate turpis eget, scelerisque massa.
1/2 width column, right. Nullam venenatis lorem sed mi rhoncus sollicitudin. Aliquam in libero at risus luctus porta eget varius elit. In interdum pretium elit eu imperdiet. Morbi malesuada tellus rutrum dignissim interdum. Nunc convallis tempus neque sit amet pharetra. Mauris ipsum orci, dictum tristique lacinia in, posuere non nibh. Ut vitae volutpat ipsum. Suspendisse potenti. Aliquam erat volutpat.

Thirds

2/3 width column, left. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut tincidunt metus, at convallis diam. Mauris aliquam, lorem in ultrices posuere, dolor mi congue libero, a varius velit nulla a mauris. Vestibulum et suscipit orci, in mattis erat. Integer semper interdum volutpat. Proin eget mi rutrum quam consectetur tristique et id nisl. Nam sit amet augue porttitor, vulputate turpis eget, scelerisque massa.
2/3 width column, right. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut tincidunt metus, at convallis diam. Mauris aliquam, lorem in ultrices posuere, dolor mi congue libero, a varius velit nulla a mauris. Vestibulum et suscipit orci, in mattis erat. Integer semper interdum volutpat. Proin eget mi rutrum quam consectetur tristique et id nisl. Nam sit amet augue porttitor, vulputate turpis eget, scelerisque massa.
Space above

Adds 10px of space above the element

Space below

Adds 10px of space below the element

Clear

Apply to an element to clear out the influence of other floated elements on a page:

Rocks in a stream The picture of rocks is aligned left (i.e. "floated"), so everything else on the page wraps around it. You can force this behavior to stop at a specific point by applying "clear" container style to the content that should no longer be wrapping around the floated element.

This block of text has the clear container style, so it starts on a new line.


Quotes & Callouts


By default, (with the exception of the callout box), these styles are the full width of the page. You can mix and match with formats from the "Columns & Spacers" submenu for narrower elements.

This is a content box. Call attention to a paragraph by giving it a blue background & border.

Callout box

The callout is similar to the content box, but if you put a header inside of it, it will give it a green background. Also, it only takes up a much width as its content (other page content will wrap around it).

This is a sample blockquote. We recommend keeping it short!

Code is formatted like this

Text


Normal text Subscript

Normal text Superscript

strikethrough

This is a note. It's useful for things like photo credits or footnotes.

PDF link

Arrow link

Read more link

Fancybox image link (click picture)

Iridescent beetle
Button link


Lists & Tables

Default list (for comparison)
  • List tem one
  • List item two
  • List item three
Non-bulleted list
  • List tem one
  • List item two
  • List item three
Spacious list
  • List tem one
  • List item two
  • List item three
Data table
Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6


Device Dependent

Mobile only

The block of content will only be visible to people viewing your site with a smartphone.

Not mobile

The block of content will never be visible to people viewing your site with a smartphone.

Last modified on April 9, 2015