How to customize the composer toolbar?

Feature
3

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:

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

or to hide an option from the :gear: menu

.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:

.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:

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 gives a general idea of how that’s done… though this gets tricky if you’re not a developer.

7 Likes