modifier l'apparence du menu d'édition
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
modifier l'apparence du menu d'édition
Détails techniques
Version du forum : ModernBBPoste 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:
Re: modifier l'apparence du menu d'édition
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.
puis d'ajouter ce code dans votre CSS
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";
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";
Sujets similaires
» Modifier la barre menu
» Modifier la barre du menu
» Modifier le nom des onglets du menu ?
» Modifier cellules du menu accordéon
» Modifier le menu de la version mobile
» Modifier la barre du menu
» Modifier le nom des onglets du menu ?
» Modifier cellules du menu accordéon
» Modifier le menu de la version mobile
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum