Modifier l'apparence de l'éditeur de message

[WillBro]

Bonjour, je parle de ça



J'aimerais enlever les options pour écrire en gras, en italique etc, et juste garder le @ pour tag les membres, et l'icone pour les gifs est-il possible de le modifier ? Changer la couleur par exemple, passer du bleu à l'orange

Enlever également l'icone des smileys, mais tout en préservant la possibilité d'utiliser des smileys/emojis

[WillBro]

Pas de réponse, ce n'est pas possible de modifier ça à partir des templates ?

[MlleAlys]

Bonjour,
Ça devrait être possible en css, mais je n'ai pas bien compris quels boutons vous souhaitez effacer et lesquels vous souhaitez garder ?
Est-ce que votre demande concerne uniquement l'éditeur de la réponse rapide, ou le complet également ?

[WillBro]

"Est-ce que votre demande concerne uniquement l'éditeur de la réponse rapide, ou le complet également ?"

Les deux

Je voudrais enlever l'option gras, italique, surligné, spoiler, smileys...

Garder gif mais changer sa couleur en orange

[MlleAlys]

Donc supprimer TOUS les boutons, SAUF le bouton tag et le bouton Gif ?
(et changer la couleur de celui gif)

Auriez-vous sur votre forum un sujet dans lequel les membres peuvent répondre s'il vous plait ?

[WillBro]

Oui, enfin le gif je peux le désactiver, pour éviter l'abus de gifs, ce qui pourrait ralentir le chargement des pages, mais oui dans l'idéal conserver juste le @, voir même le bouton "prévisualisation" que je trouve pas très utile non plus lol

Pourquoi cette question ? Pour l'instant le forum est en construction, on est que trois dessus pour l'instant, mais pourquoi ?

[WillBro]

(Je me suis auto-cité en me trompant de bouton, je sais pas comment supprimer un message)

[MlleAlys]

Parce que lorsque mon forum de test ne correspond pas à celui à modifier, le plus simple et rapide est souvent de voir directement sur celui-ci, pouvoir inspecter et tester les css directement dessus.
Mais ici pas grave, je vais en prendre un autre, ça va marcher aussi :

Voici pour le css pour masquer les boutons :

Code:


/*boutons éditeurs masqués*/
.sceditor-button {
  display: none !important;
}
a.sceditor-button.sceditor-button-mention, a.sceditor-button.sceditor-button-giphy {
  display: block !important;
}
input[value="Prévisualiser"] {
  display: none;
}


Pour ce qui est de la couleur du bouton, il s'agit d'une image : https://2img.net/i//fa/icon_gif.png
Il faut modifier cette image avec un logiciel adapté, l'héberger, et ensuite insérer cette nouvelle image sur le bouton avec le code css suivant :

Code:

.sceditor-button-giphy div {
  background-image: url(URL/NOUVELLE/IMAGE) !important;
}

en remplaçant "URL/NOUVELLE/IMAGE" par la correspondante.

[WillBro]

Parfait, vous m'êtes d'une grand utilité haha

Et pour le bouton prévisualisation ?

[MlleAlys]

C'est la dernière partie du premier code

Voici vite fait une image pour le bouton gif en orange (que je vous conseille de réhéberger sur le compte servimg de votre forum) à insérer dans le code donné précédemment : https://zupimages.net/up/23/35/tpr2.png

[WillBro]

C'est la dernière partie du premier code

Voici vite fait une image pour le bouton gif en orange (que je vous conseille de réhéberger sur le compte servimg de votre forum) à insérer dans le code donné précédemment : https://zupimages.net/up/23/35/tpr2.png

Je n'y connais absolument rien en codage CSS, ça doit être simple mais c'est du chinois pour moi Je dois y faire quoi pour faire disparaitre l'option prévisualisation ?

Faudrait que j'apprenne les bases du CSS un de ces jours haha

[MlleAlys]

Le bouton "prévisualisation" a normalement déjà disparu en même temps que les boutons de l'éditeur, si vous avez installé le premier code que j'ai donné.

La deuxième partie de mon message concerne la couleur du bouton "gif" que vous souhaitiez modifier : Je vous avez donné ce code là pour changer l'icone :

Code:

.sceditor-button-giphy div {
  background-image: url(URL/NOUVELLE/IMAGE) !important;
}

Puis ce lien-ci correspondant à une icone orange: https://zupimages.net/up/23/35/tpr2.png
Et vous pouvez donc fusionner les deux ainsi :

Code:

.sceditor-button-giphy div {
  background-image: url(https://zupimages.net/up/23/35/tpr2.png) !important;
}

De façon générale, un code css se compose ainsi :

Code:

élément { mise en forme de cet élément entre les accolades; }

et souvent on fait des retours à la ligne pour que ce soit plus lisible quand le code est plus long :

Code:

élément {
  mise en forme de cet élément entre les accolades ;
}

[WillBro]

Je l'ai inséré mais le bouton prévi' est toujours là, bon à la rigueur c'est pas non plus très important

Par contre en mode de réponse complète, les smileys s'affichent toujours, et sur tél portable le @ ne s'affiche pas

[MlleAlys]

Remplacez l'ensemble des codes précédents par :

Code:

 
/*boutons éditeurs masqués*/
.sceditor-button, #smiley-box, .quick-reply-upload {
  display: none !important;
}
a.sceditor-button.sceditor-button-mention, a.sceditor-button.sceditor-button-giphy {
  display: block !important;
}
input[value="Prévisualiser"], input[title="Prévisualisation"] {
  display: none;
}
.sceditor-button-giphy div {
  background-image: url(https://zupimages.net/up/23/35/tpr2.png) !important;
}

L'icone @ pour le tag n'était déjà par défaut pas disponible sur l'éditeur de réponse rapide en version mobile.

[WillBro]

C'est impec, merci