# How to customize the composer toolbar?

**URL:** https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577
**Category:** Feature
**Tags:** composer
**Created:** [August 27, 2024, 2:43pm UTC](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577 "2024-08-27T14:43:43Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![wisedesk](https://avatars.discourse-cdn.com/v4/letter/w/ce73a5/32.png) [@wisedesk](https://meta.discourse.org/u/wisedesk)
#### Post date: [August 27, 2024, 2:43pm UTC](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577/1 "2024-08-27T14:43:43Z")

</div>

I’m wondering if there is any way to customize which buttons are displayed (and in which order) on the New Topic toolbar.

Specifically, I want to replace the Date/Time button with the Add Event button. The Date/Time just causes confusion for new users and in our context, Events is what we want to highlight. Instructing users to first ignore the calendar-looking button, click on the gear icon, and then click on the other calendar looking icon is not the greatest considering our community has a lot of non-tech oriented and older folks using it.

I do see there are topics about customizing the new topic _button_, but not the toolbar itself.

---

<div class="post-metadata">

### Author: ![putty](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/putty/32/370902_2.png) [@putty](https://meta.discourse.org/u/putty)
#### Post date: [August 27, 2024, 2:45pm UTC](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577/2 "2024-08-27T14:45:56Z")

</div>

I’m also curious about this. We recently added a tool to the composer toolbar and it pushed the ⚙ down to the next line.

 ![CleanShot 2024-08-27 at 10.44.59](https://global.discourse-cdn.com/meta/original/4X/d/e/9/de919f99c7b8b086723d5b49ccffb980ca560c41.png)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [August 27, 2024, 3:52pm UTC](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577/3 "2024-08-27T15:52:42Z")

</div>

There’s no setting to configure the toolbar, but it’s possible through themes and plugins.

It would be nice to have this feature, so I’m going to re-categorize it as a feature request.

For now, buttons can be hidden with CSS… for example:

```scss
.d-editor-button-bar {
  .local-dates { // hides the date button
    display: none;
  }
}

```

or to hide an option from the ⚙ menu

```scss
.toolbar-popup-menu-options {
  [data-name="Build Poll"] {
    display: none;
  }
}

```

With CSS it’s also fairly straightforward to reorder items in these menus… you can do something like:

```scss
.d-editor-button-bar {
  .local-dates { // moves the date button to the beginning
    order: -1/
  }
}

```

We have a guide for figuring out how to change CSS over here:

> [@Making custom CSS changes on your site](https://meta.discourse.org/t/make-css-changes-on-your-site/168101):
>
> bookmark This guide explains how to make CSS changes on your Discourse site, including an introduction to CSS, where to add CSS in Discourse, and how to find the right selectors using browser inspection tools. person_raising_hand Required user level: Administrator Summary This guide covers: A brief introduction to CSS and key concepts How to add CSS to your Discourse site using theme components Using browser inspection tools to find the right CSS selectors Understanding CSS basics C…

All that said, the more difficult change is moving something to/from the dropdown menu and into the main toolbar (or vice versa). You’d need to hide the original button with CSS and then add a duplicate button using the API.

Looking at an example theme component, like [Discourse Gifs](https://meta.discourse.org/t/discourse-gifs/158738) gives a general idea of how that’s done… though this gets tricky if you’re not a developer.

> <https://github.com/discourse/discourse-gifs/blob/b0431b26143809f7a952cd98c2249db9e976bbfc/javascripts/discourse/initializers/gif-integration.js#L11C1-L23C12>

---

<div class="post-metadata">

### Author: ![SkyLin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/skylin/32/206593_2.png) [@SkyLin](https://meta.discourse.org/u/SkyLin)
#### Post date: [December 5, 2024, 1:38pm UTC](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577/4 "2024-12-05T13:38:32Z")

</div>

for the ⚙ menu

When I tried writing this way, the display order didn’t change.  
PS: `display: none;` didn’t work either.

```css
.toolbar-popup-menu-options {
  [data-name="Create event"] {
    order: -1;
  }
}

```

The following syntax works as expected, moving “Create event” to the top.

```css
.select-kit-collection {
  display: flex;
  flex-direction: column;
}

.select-kit-row[data-name="Create event"] {
  order: -1;
}

```

I’m not familiar with CSS, ChatGPT helps to create the code above.

---

<div class="post-metadata">

### Author: ![alltiagocom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alltiagocom/32/492709_2.png) [@alltiagocom](https://meta.discourse.org/u/alltiagocom)
#### Post date: [March 24, 2025, 8:05am UTC](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577/5 "2025-03-24T08:05:22Z")

</div>

Yes, this is really needed. Not only a “default” option for all users, but then each user could customize it, because not everyone needs to have a button to make the text “Bold”, or "Italic, of even the “Ask AI”.

But for now, being able to at least move things around globally and adding them to the hidden/cog wheel menu, would help.

On my 13" screen things are starting to get a little bit cramped (I always like to have some of the original topic visible for quoting sections, etc):

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/6/a/76a3640319ac90bff8955e19dc58748b507d0b8a.png)

---

<div class="post-metadata">

### Author: ![alltiagocom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alltiagocom/32/492709_2.png) [@alltiagocom](https://meta.discourse.org/u/alltiagocom)
#### Post date: [March 24, 2025, 8:08am UTC](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577/6 "2025-03-24T08:08:17Z")

</div>

I’m curious: how did you add that note “20 characters required”, and does it then show how many the person typed already?

How about for the title?

---

<div class="post-metadata">

### Author: ![putty](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/putty/32/370902_2.png) [@putty](https://meta.discourse.org/u/putty)
#### Post date: [March 24, 2025, 2:27pm UTC](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577/7 "2025-03-24T14:27:44Z")

</div>

To be honest I’m not entirely sure. That was installed on a community that I previously ran (but no longer do). [It looks like this it can be located here](https://github.com/discourse/discourse-characters-required).

---

<div class="post-metadata">

### Author: ![alltiagocom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alltiagocom/32/492709_2.png) [@alltiagocom](https://meta.discourse.org/u/alltiagocom)
#### Post date: [March 24, 2025, 4:19pm UTC](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577/8 "2025-03-24T16:19:46Z")

</div>

Thanks! That’s exactly that! 🙌

---

<div class="post-metadata">

### Author: ![bitmage](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bitmage/32/389881_2.png) [@bitmage](https://meta.discourse.org/u/bitmage)
#### Post date: [April 27, 2025, 3:16am UTC](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577/9 "2025-04-27T03:16:43Z")

</div>

> [@wisedesk](#):
>
> The Date/Time just causes confusion for new users and in our context, Events is what we want to highlight. Instructing users to first ignore the calendar-looking button, click on the gear icon, and then click on the other calendar looking icon is not the greatest considering our community has a lot of non-tech oriented and older folks using it.

I also have older folks on my forum, and I feel silly explaining this to them.

The gear is also a very non-obvious symbol for “there’s more”. Maybe an ellipsis would be more appropriate? **Is there a straightforward way I can change the icon?**

Another stumbling block I found here is that on mobile there is a little hamburger icon that hides/shows the toolbar, and it seems to be off by default. This causes way more confusion than any benefit it could offer. I turned it off:

```css
.composer-controls .toggle-toolbar {
  display: none;
}

.d-editor-button-bar {
  display: grid !important;
}

```

---

<div class="post-metadata">

### Author: ![sb56637](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@sb56637](https://meta.discourse.org/u/sb56637)
#### Post date: [August 26, 2025, 1:29am UTC](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577/10 "2025-08-26T01:29:28Z")

</div>

> [@awesomerobot](#):
>
> All that said, the more difficult change is moving something to/from the dropdown menu and into the main toolbar (or vice versa). You’d need to hide the original button with CSS and then add a duplicate button using the API.
> 
> Looking at an example theme component, like [Discourse Gifs](https://meta.discourse.org/t/discourse-gifs/158738) gives a general idea of how that’s done… though this gets tricky if you’re not a developer.
> 
> [discourse-gifs/javascripts/discourse/initializers/gif-integration.js at b0431b26143809f7a952cd98c2249db9e976bbfc · discourse/discourse-gifs · GitHub](https://github.com/discourse/discourse-gifs/blob/b0431b26143809f7a952cd98c2249db9e976bbfc/javascripts/discourse/initializers/gif-integration.js#L11C1-L23C12)

Hi there, I was wondering if this method is still recommended, or is it affected by this?

> [@Modernizing inline script tags for templates & JS API](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482):
>
> Using \<script type='text/discourse-plugin\> or \<script type='text/x-handlebars'\> in themes is now deprecated. Any use of these tags in themes should be updated according to the instructions below. Regular \<script\> and \<script type='text/javascript'\> are unaffected by this change. Timeline These are rough estimates, subject to change May 2025 - console deprecation messages enabled July 2025 - admin warning banners enabled Late September 2025 March 2026 - removal of feature Converting…

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [August 26, 2025, 9:01am UTC](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577/11 "2025-08-26T09:01:27Z")

</div>

Using `api.onToolbarCreate` from a `.js` initializer is still supported 👍

The topic you linked only refers to including javascript in `<script type="text/discourse-plugin">` tags.

---

<div class="post-metadata">

### Author: ![opcourdis](https://avatars.discourse-cdn.com/v4/letter/o/45deac/32.png) [@opcourdis](https://meta.discourse.org/u/opcourdis)
#### Post date: [August 26, 2025, 6:53pm UTC](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577/12 "2025-08-26T18:53:30Z")

</div>

Hi,

I have the “create event icon” placed to the right and outside the +menu, but you can place it to the left with those instructions :

1° In your theme’s header in admin\>appearance\>theme\>edit\>edit code\>head add this javascript

```javascript
<!-- Custom Create Event Button (Icon-based, Language-proof) -->
<script>
(()=>{const e=".d-editor-button-bar",t=".btn.no-text.fk-d-menu __trigger.toolbar-menu__ options-trigger.toolbar __button.options.toolbar-popup-menu-options",n=".fk-d-menu__ inner-content",o=".d-modal.fk-d-menu-modal",c=e=>{const t=e.querySelector('svg use[href="#calendar-day"]');return t?t.closest("button"):null},r=(e,t,n=4e3)=>new Promise((o,c)=>{const r=t(e);if(r)return o(r);const l=new MutationObserver(()=>{const n=t(e);n&&(l.disconnect(),o(n))});l.observe(e,{childList:!0,subtree:!0}),setTimeout(()=>{l.disconnect(),c()},n)}),l=(e=4e3)=>{const t=new MutationObserver(()=>{document.querySelector(o)&&t.disconnect()});t.observe(document.body,{childList:!0,subtree:!0}),setTimeout(()=>t.disconnect(),e)},s=e=>{if(e.querySelector(".custom-create-event-btn"))return;const o=document.createElement("button");o.className="btn no-text btn-icon toolbar__button link custom-create-event-btn",o.title="Create event",o.innerHTML='<svg class="fa d-icon d-icon-calendar-day svg-icon"><use href="#calendar-day"></use></svg>',e.appendChild(o),o.addEventListener("click",async()=>{const e=document.querySelector(t);if(!e)return;e.click();let o=document.querySelector(n);o||(await new Promise((e,t)=>{const c=new MutationObserver(()=>{(o=document.querySelector(n))&&(c.disconnect(),e())});c.observe(document.body,{childList:!0,subtree:!0}),setTimeout(()=>{c.disconnect(),t()},2e3)}));try{(await r(o,c)).click(),l()}catch{}})},u=new MutationObserver(()=>{const t=document.querySelector(e);t&&s(t)});u.observe(document.body,{childList:!0,subtree:!0});const d=document.querySelector(e);d&&s(d)})();
</script>

```

2° if you want the icon to the left and not to the right : on the same admin page you will find a CSS tab where you may add this there :

.btn.no-text.btn-icon.toolbar\_\_button.link.custom-create-event-btn { order: -1; }

3° Bonus : if you want this button to be visible at this place into only certain categories use the script there and modify the conditions with your categories names [Discourse Calendar and Events - #547 by opcourdis](https://meta.discourse.org/t/discourse-calendar-and-event/97376/547)

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/7/0/b703c96190543abb5e977ec1a8f4580c91be357f.png)

---

<div class="post-metadata">

### Author: ![sb56637](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@sb56637](https://meta.discourse.org/u/sb56637)
#### Post date: [August 27, 2025, 4:07am UTC](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577/13 "2025-08-27T04:07:22Z")

</div>

Thanks very much to @david and @opcourdis for the helpful replies.

---

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [September 22, 2026, 5:37am UTC](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577/14 "2026-09-22T05:37:52Z")

</div>

A small first step towards this feature request is now live as an experimental upcoming change, see

> [@(Basic) Toolbar Customisation \[Experiment\]](https://meta.discourse.org/t/basic-toolbar-customisation-experiment/412749):
>
> The toolbar has grown a lot over the years, and not everyone uses all of it. If you write in Markdown by hand, or you never touch the text-size menu, you can now just turn those off for yourself. How to try it Go to Admin → Upcoming Changes at /admin/config/upcoming-changes Find Composer toolbar customization and enable it Then, as any member: Preferences → Interface → Composer toolbar Untick anything you don’t want and save You can turn it off again at any time from the same place. …