bartboy011

<p>This plugin adds a collection of WordPress shortcodes for <a href="http://bulma.io/" rel="nofollow ugc">Bulma</a> components as well as a simple TinyMCE dropdown to add them.</p>
<h3>Usage</h3>
<p>The easiest way to add shortcodes is through the Bulma dropdown in the WordPress editor. Alternatively, you can manually type out the shortcodes.</p>
<h3>Columns</h3>
<p>Columns are used to create a responsive grid:</p>
<pre><code>[bulma-columns]
[bulma-column]
Your content...
[/bulma-column]
[bulma-column]
Your content...
[/bulma-column]
[/bulma-columns]
</code></pre>
<p>The <code>[bulma-column]</code> shortcode accepts a type argument:</p>
<pre><code>[bulma-column type="is-8"][/bulma-column]
</code></pre>
<p>Due to limitations within the WordPress shortcode system, nesting identical shortcodes will break. To work around this, there are additional shortcodes you can use that will also produce columns:</p>
<pre><code>// Will break
[bulma-columns]
    [bulma-column]
        [bulma-columns]
            [bulma-column][/bulma-column]
            [bulma-column][/bulma-column]
        [/bulma-columns]
    [/bulma-column]
    [bulma-column]
        [bulma-columns]
            [bulma-column][/bulma-column]
            [bulma-column][/bulma-column]
        [/bulma-columns]
    [/bulma-column]
[/bulma-columns]

// Will Work
[bulma-columns]
    [bulma-column]
        [bulma-columns-1]
            [bulma-column-1][/bulma-column-1]
            [bulma-column-1][/bulma-column-1]
        [/bulma-columns-1]
    [/bulma-column]
    [bulma-column]
        [bulma-columns-1]
            [bulma-column-1][/bulma-column-1]
            [bulma-column-1][/bulma-column-1]
        [/bulma-columns-1]
    [/bulma-column]
[/bulma-columns]
</code></pre>
<p>You can nest up to five levels deep with this system (column, column-1, column-2, column-3, column-4).</p>
<h3>Button</h3>
<p>Creates the tag <code><a href="#" class="button">Your Content</a></code>.</p>
<p>Accepts three arguments:</p>
<ul>
<li><code>type</code> – Accepts class names – defaults to ‘is-primary’</li>
<li><code>link</code> – Accepts strings – defaults to ‘#’</li>
<li><code>icon</code> – Accepts valid <a href="http://fontawesome.io/" rel="nofollow ugc">font-awesome</a> icon names</li>
</ul>
<p>Ex: <code>[bulma-button type="is-primary" link="www.example.com" icon="github"]Star on GitHub[/bulma-button]</code>.</p>
<h3>Icon</h3>
<p>Creates the tag <code><span class="icon"><i class="fa fa-<icon name>></i></span>"</code>.</p>
<p>Accepts two arguments:</p>
<ul>
<li><code>type</code> – Accepts class names – defaults to ‘is-primary’</li>
<li><code>icon</code> – Accepts valid <a href="http://fontawesome.io/" rel="nofollow ugc">font-awesome</a> icon names</li>
</ul>
<h3>Box</h3>
<p>Adds a Bulma box element.</p>
<p>Accepts one argument, type. Defaults to NOT full-width box as this element in WordPress is mostly helpful for adding emphasis to an item like a photo. If type is set to full-width, it’ll behave like a normal Bulma box.</p>
<p>Ex:</p>
<pre><code>// NOT full-width
[bulma-box]Your content...[/bulma-box]

// Full-width
[bulma-box type="full-width"]Your Content...[/bulma-box]
</code></pre>
<h3>Notification</h3>
<p>Adds a Bulma notification element.</p>
<p>Accepts one argument, type.</p>
<p>Ex: <code>[bulma-notification type="is-primary"]Alert[/bulma-notification]</code></p>
<h3>Card</h3>
<p>Creates a Bulma Card element. This shortcode has several child codes:</p>
<pre><code>[bulma-card]
[bulma-card-header][/culma-card-header]
[bulma-card-content][/bulma-card-content]
[bulma-card-footer][/bulma-card-footer]
[/bulma-card]
</code></pre>
<p>None of the shortcodes accept arguments.</p>
<pre><code>[bulma-card-footer] can be given multiple footer items:


[bulma-card-footer]Item1|Item2|Item3[/bulma-card-footer]

// Will generate:

<footer class="card-footer">
    <div class="card-footer-item">
        Item1
    </div>
    <div class="card-footer-item">
        Item2
    </div>
    <div class="card-footer-item">
        Item3
    </div>
</footer>
</code></pre>
<h3>Menu</h3>
<p>Creates a Bulma menu.</p>
<p>Ex:</p>
<pre><code>[bulma-menu]
[bulma-menu-label]Label[/bulma-menu-label]
[bulma-menu-list]<a href="#">Item1</a>|<a href="#">Item2</a>[/bulma-menu-list]
[/bulma-menu]
</code></pre>


Bulma Shortcodes

This plugin adds a collection of WordPress shortcodes for Bulma components as well as a simple TinyMCE dropdown to use them.

Automattic

WooCommerce

Claudio Sanches

WooThemes

<p>This plugin adds a new section called WooCommerce on the Customize menu, allowing you to easily change color of buttons and <a href="https://wordpress.org/plugins/woocommerce/" rel="ugc">WooCommerce</a> elements.</p>
<p>Starting WooCommerce 2.3 the Frontend styles options will no longer be part of WooCommerce and will only be available by using this plugin.</p>
<h4>WooCommerce Colors in action:</h4>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/Hvyy36FOiTA?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<h4>Requeriments</h4>
<ul>
<li>WordPress 4.0 or later.</li>
<li>WooCommerce 2.3 or later.</li>
</ul>
<h4>Contribute</h4>
<p>You can contribute to the source code in our <a href="https://github.com/woothemes/woocommerce-colors/" rel="nofollow ugc">GitHub</a> page.</p>


WooCommerce Colors

No longer works

Allows you to change the buttons color and other elements of WooCommerce. Beautifully.

Bulma Shortcodes vs WooCommerce Colors