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.


  • 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