How to customize the composer toolbar?

Feature
1

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.

2 Likes
2

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

CleanShot 2024-08-27 at 10.44.59

1 Like
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
4

for the :gear: menu

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

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

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

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

1 Like