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
5

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
image1013×596 51.4 KB

6

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?

7

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.

2 Likes
8

Thanks! That’s exactly that! :raising_hands:

1 Like