# Formatting toolbar

**URL:** https://meta.discourse.org/t/formatting-toolbar/40649
**Category:** Plugin
**Created:** [March 6, 2016, 12:39pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649 "2016-03-06T12:39:23Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [March 6, 2016, 12:39pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/1 "2016-03-06T12:39:23Z")

</div>

## Presentation

Add some formatting options to your discourse posts : center a text or an image, align to the right, justify, colors, underline, etc. It’s easy to use and it will provide some options to embellish your posts.

Here is an example of the possibilities provided by this plugin:

 ![](https://global.discourse-cdn.com/meta/original/3X/0/d/0d5ca46d57ad67b40ad00ded4c2d36ed492dab7c.png)

And in the composer you’ll have new buttons :

> ![formatting1](https://global.discourse-cdn.com/meta/original/3X/6/b/6b3df881600a0ef02c0e7367fcf6968507b3a5f8.jpeg)

  

## 🔗 Plugin link

Explore the code of the plugin in this github page

`https://github.com/mondiscourse/discourse-formatting-toolbar`

[https://github.com/mondiscourse/discourse-formatting-toolbar](https://github.com/mondiscourse/discourse-formatting-toolbar)

The plugin link to add in your app.yml file : `https://github.com/mondiscourse/discourse-formatting-toolbar.git`

  

## ⚠ Warning

If you use this plugin in conjunction with the [**official** BBCode plugin](https://meta.discourse.org/t/discourse-bbcode/65425) your Discourse instance will be broken!

Use this plugin only if you want the composer buttons with your bbcodes.

  

## 🪄 Tips

Here are a few tips to help you install this plugin or use all his potential

  

### Install a plugin in Discourse

Add this plugin link to your app.yml file : `https://github.com/mondiscourse/discourse-formatting-toolbar.git`

For more information, read this guide by @techAPJ - [**How to install a plugin**](https://meta.discourse.org/t/install-a-plugin/19157)

  

### Float right bbcode

We have a floatl bbcode (and button) that allows you to add a content on the left of your text (like the [image in this example](https://raw.githubusercontent.com/mondiscourse/discourse-formatting-toolbar/master/formatting.png)). There is also a`[floatr][/floatr]` bbcode, that adds a content on the right. The bbcode has been created but I didn’t add a button, it doesn’t feel necessary.

  

### Hide a button in the composer

To hide a specific button, it’s best to add some css in your theme, the bbcode will still be supported but the button will no longer be visible in your composer toolbar. You can choose to hide a button in Desktop or Mobile or both using the Common\>CSS section of your theme:

```css
/* UNDERLINE BUTTON */
.d-editor-button-bar .underline_ui_button {
    display: none;
}

```

```css
/* IMAGE BUTTON */
.d-editor-button-bar .addimg_ui_button {
    display: none;
}

```

```css
/* FLOAT LEFT BUTTON */
.d-editor-button-bar .floatl_ui_button {
    display: none;
}

```

```css
/* ALIGN LEFT BUTTON */
.d-editor-button-bar .left_ui_button {
    display: none;
}

```

```css
/* ALIGN CENTER BUTTON */
.d-editor-button-bar .center_ui_button {
    display: none;
}

```

```css
/* ALIGN RIGHT BUTTON */
.d-editor-button-bar .right_ui_button {
    display: none;
}

```

```css
/* JUSTIFY BUTTON */
.d-editor-button-bar .justify_ui_button {
    display: none;
}

```

```css
/* COLOR BUTTON */
.d-editor-button-bar .color_ui_button {
    display: none;
}

```

```css
/* SIZE BUTTON */
.d-editor-button-bar .size_ui_button {
    display: none;
}

```

  

### Float margin

You can change the margin size for the two float bbcodes, change the value of the margin, copy the code and add it in your Common\>CSS theme:

```css
.floatl {
     margin-right: =Margin_float_left=;
}

```

```css
.floatr {
    margin-left: =Margin_float_right=;
}

```

  

## 🙏🏻 Thanks

- [ZogStrip](https://github.com/discourse/vbulletin-bbcode) : for his Discourse BBcode plugin, which served as a base for this plugin.
- [eviltrout](https://github.com/eviltrout) : for the upgrade of the Discourse BBcode plugin with a new engine (2016)
- [Sam Saffron](https://github.com/SamSaffron) : for the upgrade of the Discourse BBcode plugin with the new markdown-it engine (2017)
- [cpradio](https://github.com/cpradio) : for the help on the toolbar.

---

_[View the full topic](https://meta.discourse.org/t/formatting-toolbar/40649)._