# Comment personnaliser la barre d'outils du compositeur ?

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

<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: [Août 27, 2024, 3:52 UTC](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577/3 "2024-08-27T15:52:42Z")

</div>

Il n’y a pas de paramètre pour configurer la barre d’outils, mais c’est possible via les thèmes et les plugins.

Ce serait bien d’avoir cette fonctionnalité, je vais donc la reclasser en demande de fonctionnalité.

Pour l’instant, les boutons peuvent être masqués avec du CSS… par exemple :

```scss
.d-editor-button-bar {
  .local-dates { // masque le bouton de date
    display: none;
  }
}

```

ou pour masquer une option du menu ⚙

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

```

Avec du CSS, il est également assez simple de réorganiser les éléments dans ces menus… vous pouvez faire quelque chose comme :

```scss
.d-editor-button-bar {
  .local-dates { // déplace le bouton de date au début
    order: -1/
  }
}

```

Nous avons un guide pour savoir comment modifier le CSS ici :

> [@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…

Cela dit, le changement le plus difficile est de déplacer quelque chose du menu déroulant vers la barre d’outils principale (ou vice versa). Vous devrez masquer le bouton d’origine avec du CSS, puis ajouter un bouton dupliqué à l’aide de l’API.

Examiner un composant de thème exemple, comme [Discourse Gifs](https://meta.discourse.org/t/discourse-gifs/158738), donne une idée générale de la façon dont cela est fait… bien que cela devienne délicat si vous n’êtes pas un développeur.

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

---

_[View the full topic](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577)._
