Introduction

WordPress 3.9 has changed the WordPress post editor quite a bit, and integrated TinyMCE 4.0 (the post editor software) directly into the WordPress core. As a result, custom style and shortcode buttons previously in the editor, including the Obox Styles and WooCommerce buttons, no longer appear. Any existing styles and shortcodes in your content will still work and display normally – you just can’t access the quick menus to add these currently.  Both Obox and Woo will be adding alternatives to these old functions in upcoming updates.

The button has been restored to all eCommerce themes with this feature in updates beginning May 15, 2014. Please ensure your theme is up to date.

The Solution

Section Title

A Failure Box
<div class="obox-alert obox-failure">A Failure Box</div>
A Success Box
<div class="obox-alert obox-success">A Success Box</div>
An Info Box
<div class="obox-alert obox-info">An Info Box</div>

Highlighted Text

<p class="obox-highlighted">Highlighted Text</p>

Dropcaps

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae massa velit, eu laoreet massa. Sed ac orci libero, eu dignissim enim. Aenean urna sem, cursus ut elementum sed, pellentesque ac massa. Mauris sit amet semper massa. Aliquam vitae nunc vestibulum mauris tempor suscipit id sed lacus. Vestibulum arcu risus, porta eget auctor id, rhoncus et massa. Aliquam erat volutpat.

standard text may be jazzed up with dropcaps which wrap. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio.

Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.

<p class="obox-dropcaps">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae massa velit, eu laoreet massa. Sed ac orci libero, eu dignissim enim. Aenean urna sem, cursus ut elementum sed, pellentesque ac massa. Mauris sit amet semper massa. Aliquam vitae nunc vestibulum mauris tempor suscipit id sed lacus. Vestibulum arcu risus, porta eget auctor id, rhoncus et massa. Aliquam erat volutpat.</p>

Divider

<hr class="obox-divider" />

Styled Blockquote

That which does not kill us makes us stronger.

-Friedrich Nietzsche

<div class="quote">
<blockquote>
<p style="text-align: left;"><strong>That which does not kill us makes us stronger.</strong></p>
<p style="text-align: left;">-Friedrich Nietzsche</p>
</blockquote>
</div>

Large Buttons

Large Button
Large Button
Large Button
Large Button
Large Button
Large Button
Large Button
Large Button
Large Button
Large Button

 



Small Buttons


Small Button


Small Button


Small Button


Small Button


Small Button


Small Button


Small Button


Small Button


Small Button


Small Button


 






<a class="obox-button obox-blue obox-large" href="#">Large Button</a>


Simply change the color name in the code to black, green, grey, navy, orange, purple, pink, teal or white. For a small button, change obox-large to obox-small


 


Columns


The following code snippet can be copy/pasted into the Text tab of your page editor to create three columns of text. Switch back to the Visual tab to edit the text and headings with your own. Images may be safely inserted directly above the headings or in place of them if desired.


    

  • 

    Heading 1
    

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    

    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    • 

  • 

    Heading 2
    

    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    • 

  • 

    Heading 3
    

    Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
    • 



<ul class="obox-grid obox-three-column">
<li class="obox-column">
<h4>Heading 1</h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</li>
<li class="obox-column">
<h4>Heading 2</h4>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</li>
<li class="obox-column">
<h4>Heading 3</h4>
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</li>
</ul>