modifier l'apparence du menu d'édition

[@stra]

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://quadra-motards.forum-pro.fr/

Description du problème

en fait, je n'ai pas  de soucis, mais suite au passage en modernBB, je trouvais que le menu d'édition des message était un peu "décalé", visuellement.
A force de recherche, j'ai changé les icônes et je voulais en faire profiter mes petits camarades de ForumActif.

Pour modifier cette barre de menu, il suffit d’insérer le code CSS suivant

Code:

/* icone menu edition */

        /* bold */
        .sceditor-button-bold div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/gras15.png') !important;
            background-position:0 !important;
        }
        
        /* italic */
        .sceditor-button-italic div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/italiq12.png') !important;
            background-position:0 !important;
        }
        
        /* underline */
        .sceditor-button-underline div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/soulig12.png') !important;
            background-position:0 !important;
        }
        
        /* strike */
        .sceditor-button-strike div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/barry11.png') !important;
            background-position:0 !important;
        }
        
        /* text align left */
        .sceditor-button-left div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/aligne13.png') !important;
            background-position:0 !important;
        }
        
        /* text align center */
        .sceditor-button-center div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/centry12.png') !important;
            background-position:0 !important;
        }
        
        /* text align right */
        .sceditor-button-right div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/aligny13.png') !important;
            background-position:0 !important;
        }
        
        /* text align justify */
        .sceditor-button-justify div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/aligne14.png') !important;
            background-position:0 !important;
        }
        
        /* bullet list */
        .sceditor-button-bulletlist div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/liste11.png') !important;
            background-position:0 !important;
        }
        
        /* ordered list */
        .sceditor-button-orderedlist div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/liste_11.png') !important;
            background-position:0 !important;
        }
        
        /* horizontal rule */
        .sceditor-button-horizontalrule div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/insere11.png') !important;
            background-position:0 !important;
        }
        
        /* quote */
        .sceditor-button-quote div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/citer12.png') !important;
            background-position:0 !important;
        }
        
        /* code */
        .sceditor-button-code div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/code14.png ') !important;
            background-position:0 !important;
        }
        
        /* spoiler */
        .sceditor-button-faspoiler div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/spoile13.png') !important;
            background-position:0 !important;
        }
        
        /* hide */
        .sceditor-button-fahide div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/cache10.png') !important;
            background-position:0 !important;
        }
        
        /* table */
        .sceditor-button-table div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/tablea14.png') !important;
            background-position:0 !important;
        }
        
        /* host an image */
        .sceditor-button-servimg div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/heberg12.png') !important;
            background-position:0 !important;
        }
        
        /* insert an image */
        .sceditor-button-image div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/ajoute17.png') !important;
            background-position:0 !important;
        }
        
        /* insert a link */
        .sceditor-button-link div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/ajoute18.png') !important;
            background-position:0 !important;
        }
        
        /* youtube */
        .sceditor-button-youtube div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/youtub12.png') !important;
            background-position:0 !important;
        }
        
        /* dailymotion */
        .sceditor-button-dailymotion div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/daylym12.png') !important;
            background-position:0 !important;
        }

/* header */
         .sceditor-button-headers div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/titres10.png') !important;
            background-position:0 !important;
        }
        
        /* flash */
        .sceditor-button-flash div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/flash11.png') !important;
            background-position:0 !important;
        }
        
        /* font size */
        .sceditor-button-size div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/taille11.png') !important;
            background-position:0 !important;
        }
        
        /* font color */
        .sceditor-button-color div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/couleu11.png') !important;
            background-position:0 !important;
        }
        
        /* font family */
        .sceditor-button-font div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/police11.png') !important;
            background-position:0 !important;
        }
        
        /* remove formatting */
        .sceditor-button-removeformat div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/taille12.png') !important;
            background-position:0 !important;
        }
        
        /* button more */
        .sceditor-button-more div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/plus-b12.png') !important;
            background-position:0 !important;
        }
        
        /* sub script */
        .sceditor-button-subscript div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/indice12.png') !important;
            background-position:0 !important;
        }
        
        /* super script */
        .sceditor-button-superscript div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/exposa12.png') !important;
            background-position:0 !important;
        }
        
        /* scroll horizontal */
        .sceditor-button-fascroll div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/defile12.png') !important;
            background-position:0 !important;
        }
        
        /* scroll vertical */
        .sceditor-button-faupdown div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/defile13.png') !important;
            background-position:0 !important;
        }
        
        /* WoW */
        .sceditor-button-fawow div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/smiley10.png') !important;
            background-position:0 !important;
        }
        
        /* random */
        .sceditor-button-farand div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/aleato11.png') !important;
            background-position:0 !important;
        }
        
         /* titres */
        .sceditor-button-farand div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/aleato11.png') !important;
            background-position:0 !important;
        }

        /* emoticon */
        .sceditor-button-emoticon div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/smiley10.png') !important;
            background-position:0 !important;
        }
        
        /* date */
        .sceditor-button-date div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/date12.png') !important;
            background-position:0 !important;
        }
        
        /* time */
        .sceditor-button-time div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/heure11.png') !important;
            background-position:0 !important;
        }
        
        /* paste text */
        .sceditor-button-pastetext div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/texte-10.png') !important;
            background-position:0 !important;
        }

        
        /* switch editor mode */
        .sceditor-button-source div {
            background-image:url('https://i58.servimg.com/u/f58/19/57/39/41/bascul12.png') !important;
            background-position:0 !important;
        }




vous avez tout facilité à personnaliser vos icones, pour peu qu'elles respectent le format 16x16, et je vous conseille le format PNG.

Pour aller jusqu'au bout de la démarche, voici un lien pour un site extrêmement complet et pratique, où vous trouverez les icônes à votre goût.

voici ce que donne le code si vous ne changez pas les icônes:

[@stra]

il existe une autre méthode qui tire profit de font awesome

cette méthode nécessite un peu de javascript , à insérer sur toutes les pages (si vous ne l'avez pas déjà fait) il permet d'activer l'accès à font awesome.

Code:

jQuery(function() {
  var node = document.createElement('style');
  node.innerHTML = "@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');";
  jQuery('body').get(0).appendChild(node);
});

puis d'ajouter ce code dans votre CSS

Code:

/* icone menu edition */

.sceditor-toolbar .sceditor-button {
    text-indent: 0;
    padding: 1px !important;
    width: 32px !important;
    height: 32px !important;
}

.sceditor-toolbar .sceditor-button div {
    background: none!important;
    color: initial;
    font-family: FontAwesome;
    font-size: 20px;
    font-weight: normal;
    line-height: 30px;
    width: 100%;
    height: 100%;
}

        /* bold */
        .sceditor-button-bold div:before {
            content: "\f032";
        }
        
        /* italic */
        .sceditor-button-italic div:before {
            content: "\f033";
        }
        
        /* underline */
        .sceditor-button-underline div:before {
            content: "\f0cd";
        }
        
        /* strike */
        .sceditor-button-strike div:before {
            content: "\f0cc";
        }
        
        /* text align left */
        .sceditor-button-left div:before {
            content: "\f036";
        }
        
        /* text align center */
        .sceditor-button-center div:before {
            content: "\f037";
        }
        
        /* text align right */
        .sceditor-button-right div:before {
            content: "\f038";
        }
        
        /* text align justify */
        .sceditor-button-justify div:before {
            content: "\f039";
        }
        
        /* bullet list */
        .sceditor-button-bulletlist div:before {
            content: "\f0ca";
        }
        
        /* ordered list */
        .sceditor-button-orderedlist div:before {
            content: "\f0cb";
        }
        
        /* horizontal rule */
        .sceditor-button-horizontalrule div:before {
            content: "\f2d1";
        }
        
        /* quote */
        .sceditor-button-quote div:before {
            content: "\f10d";
        }
        
        /* code */
        .sceditor-button-code div:before {
            content: "\f121";
        }
        
        /* spoiler */
        .sceditor-button-faspoiler div:before {
            content: "\f066";
        }
        
        /* hide */
        .sceditor-button-fahide div:before {
            content: "\f070";
        }
        
        /* table */
        .sceditor-button-table div:before {
            content: "\f0ce";
        }
        
        /* host an image */
        .sceditor-button-servimg div:before {
            content: "\f0ee";
        }
        
        /* insert an image */
        .sceditor-button-image div:before {
            content: "\f03e";
        }
        
        /* insert a link */
        .sceditor-button-link div:before {
            content: "\f0c1";
        }
        
        /* youtube */
        .sceditor-button-youtube div:before {
            content: "\f16a";
        }
        
        /* dailymotion */
        .sceditor-button-dailymotion div:before {
            content: "\f008";
        }

         /* header */
         .sceditor-button-headers div:before {
            content: "\f1dc";
        }
        
        /* flash */
        .sceditor-button-flash div:before {
            content: "\f0e7";
        }
        
        /* font size */
        .sceditor-button-size div:before {
            content: "\f034";
        }
        
        /* font color */
        .sceditor-button-color div:before {
            content: "\f1fb";
        }
        
        /* font family */
        .sceditor-button-font div:before {
            content: "\f031";
        }
        
        /* remove formatting */
        .sceditor-button-removeformat div:before {
            content: "\f12d";
        }
        
        /* button more */
        .sceditor-button-more div:before {
            content: "\f196";
        }
        
        /* sub script */
        .sceditor-button-subscript div:before {
            content: "\f12c";
        }
        
        /* super script */
        .sceditor-button-superscript div:before {
            content: "\f12b";
        }
        
        /* scroll horizontal */
        .sceditor-button-fascroll div:before {
            content: "\f07e";
        }
        
        /* scroll vertical */
        .sceditor-button-faupdown div:before {
            content: "\f07d";
        }
        
        /* WoW */
        .sceditor-button-fawow div:before {
            content: "\f118";
        }
        
        /* random */
        .sceditor-button-farand div:before {
            content: "\f074";
        }

        /* emoticon */
        .sceditor-button-emoticon div:before {
            content: "\f118";
        }
        
        /* date */
        .sceditor-button-date div:before {
            content: "\f133";
        }
        
        /* time */
        .sceditor-button-time div:before {
            content: "\f017";
        }
        
        /* paste text */
        .sceditor-button-pastetext div:before {
            content: "\f0ea";
        }

        
        /* switch editor mode */
        .wysiwygMode .sceditor-button-source div:before {
            content: "\f204";
        }

        .sourceMode .sceditor-button-source div:before {
            content: "\f205";
        }


pour modifier l’icône d'un bouton, il suffit d'entrer l' unicode dans votre CSS : faites un tour sur cette page  , trouvez l'icone qui vous plait, notez son unicode et entré le dans le CSS,  "\unicode";