Modifier l'apparence de l'éditeur

Forum gratuit : Le forum des forums actifs :: Vous et Forumactif... :: ressources pour utilisateurs forumactif :: Trucs et astuces

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Modifier l'apparence de l'éditeur

Message par Tech Ven 14 Juin 2013 - 16:46

Modifier l'apparence de l'éditeur

Dans cette astuce, nous vous proposons différents codes CSS afin de personnaliser l'apparence de votre éditeur de texte. Ces codes CSS sont à placer en-dessous de vos codes actuels CSS, (en faisant quelques espacements pour ceux qui en ont déjà afin de mieux les repérer lorsqu'il faudra les enlever), comme suit :

Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

Nous vous invitons également à lire ce sujet : Le CSS - Comment ça marche ? pour comprendre les différentes propriétés du CSS.

Modifier la réponse rapide


Code:
/*--- Bloc réponse rapide ---*/

.sceditor-container.ltr.sourceMode {
width:550px !important;
background-color: #XXXXXX !important;
}
.sceditor-container.ltr.wysiwygMode {
width:550px !important;
background-color: #XXXXXX !important;
}

Il faut remplacer "XXXXXX" par un code couleur. Le premier concerne le mode d'édition "source" et le second concerne le mode "wysiwyg" (je vois ce que j'écris). La taille "550" est à modifier si vous trouver votre bloc ça trop grand ou trop petit.

Modifier la parie supérieure contenant les boutons


Code:
/*---  Partie supérieur contenant les outils ---*/

div.sceditor-toolbar {
background-color: #XXXXXX !important;
width: 540px !important;
}

Il s'agit du bloc contenant les icônes outils : le fond peut être modifié. Il suffit de modifier le "XXXXXX". Selon la taille que vous aurez changé dans le code du bloc rapide "550", il faudra aussi le modifier ici. J'ai mis 10px de moins.

Modifier la zone de texte (textarea)


Code:
/*---  Partie texte area : fond ---*/

.sceditor-container iframe, .sceditor-container textarea {
background-color: #XXXXXX !important;
text-align:justify;
margin:0 !important;
line-height: 16px;
width: 540px !important;
color: #XXXXXX !important;
font-size:11px !important;
}

Cela concerne le fond et la présentation. Le fond de votre bloc. C'est mieux de mettre le même que le code "sceditor-container.ltr.wysiwygMode". Il me semble que j'avais dû l'ajouter parce que sinon, il y avait un souci de fond quelque part.

  • text-align:justify; : c'est pour un texte justifié ;
  • margin:0 !important; : aucune marge ;
  • line-height: 16px; : les lettres qui se rapprochent, on peut retirer, pas un souci ;
  • width: 540px !important; : la taille du bloc (comme code précédent) ;
  • color: #XXXXXX !important; : couleur du texte à modifier "XXXXXX" ;
  • font-size:11px !important; : taille de la police.


Modifier un groupe de boutons


Code:
/*---  Groupe de boutons ---*/

div.sceditor-group {
background-color: #XXXXXX !important;
}

Cela concerne la couleur des groupes de boutons. Il faut modifier XXXXXX par un code couleur hexadécimal.

Modifier les boutons


Code:
/*---  Boutons ---*/

a.sceditor-button {
...
}

Vous pouvez ajouter un "background" par exemple à la place des ... .

Modifier les boutons sélectionnés


Code:
/*---  Boutons sélectionnés ---*/

a.sceditor-button.hover {
background-color: #XXXXXX !important;
}

Il faut modifier XXXXXX par un code couleur hexadécimal.

Modifier la taille des smileys


Code:
/*---  Smileys ---*/

.sceditor-emoticons {
width: 350px !important;
height: 250px !important;
overflow: auto !important;
}
img.smiley {
width: auto !important;
height : auto !important;
}

Changer la largeur de l'éditeur


Code:
/* largeur de l'éditeur */
.sceditor-container { width: 710px!important;
}

/* largeur de la zone de saisie de texte */
.sceditor-container iframe, .sceditor-container textarea {
width: 99%!important;
}

Il faut prévoir quelques pixels en moins pour la zone de saisie de texte.

Changer les couleurs de fond


Code:
/* fond de la barre d'outil */
.sceditor-toolbar {
background: blue !important;
}

/* fond de la zone de saisie de texte */
.sceditor-container{
background-color:#A4A440 !important;
 
}
.sceditor-container iframe, .sceditor-container textarea{
  background-color:#A4A440 !important;
}

/* fond de groupe de bouton */
body div.sceditor-group {
background: orange;
}

/* fond d'un bouton survolé ou activé */

.sceditor-button.hover, a.sceditor-button:hover {
background: purple;
}


Supprimer des bordures et ombres


Code:
/* bordure de l'éditeur */
div.sceditor-container {
border: none;
}

/* bordure entre la barre d'outils et la zone de saisie de texte */
body div.sceditor-toolbar {
border-bottom: none;
}

/* bordure sous les groupes de bouton */
body div.sceditor-group {
border-bottom: none;
}

/* ombre d'un bouton survolé ou activé */
a.sceditor-button:hover, a.sceditor-button.hover {
box-shadow: none;
}

Moins réduire les smileys


Code:
/* limitation de la taille du cadre des smileys */
.sceditor-emoticons {
max-width: 350px !important;
max-height: 250px !important;
overflow: auto !important;
text-align: center;
}
.sceditor-emoticons  div {
display: inline!important;
}

/* taille maximum de 40 pixels */
img.smiley {
width: auto !important;
height : auto !important;
vertical-align: middle;
max-width: 40px;
max-height: 40px;
}

Supprimer le dédoublement de smileys et autres soucis liés


Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Supprimer le dédoublement de smileys" et pour placement "Toutes les pages" (plus d'informations sur la gestion des scripts).

Code:
$(function(){ $(function() {
  $(".sceditor-button-emoticon").click(function() {
    $(".smiley").unbind("hover")
  })
})});

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

Changer la couleur de texte en mode wysiwyg


Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "couleur wysiwyg" et pour placement "Toutes les pages" (plus d'informations sur la gestion des scripts).

Code:
$(function() {
  var a = $("#text_editor_textarea");
  0 != a.length && $(function() {
    a.sceditor && a.sceditor("instance") && a.sceditor("instance").css("body,p{color:red}");
  });
});

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

Mettre un sélecteur de couleur avec moins de couleur


Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "couleur wysiwyg" et pour placement "Toutes les pages" (plus d'informations sur la gestion des scripts).

Code:
$(function () {
    $(function () {
        if(!$.fn["sceditor"]) return;
        $.sceditor.command.get('color')._dropDown = function (editor, caller, callback) {
            var content = $("<div />"),
                cmd = $.sceditor.command.get('color');

            if (!cmd._htmlCache) {

                var pre = '<strong style="background-color:#',
                    suf = ';" unselectable="on"><span></span></strong>';

                var htmlGen = [pre, 'ffffff,000000,eeece1,1f497d,4f81bd,c0504d,9bbb59,8064a2,4bacc6,f79646'.split(',').join(suf + pre), suf].join('');

                var htmlList = [pre, 'f2f2f2,7f7f7f,ddd9c3,c6d9f0,dbe5f1,f2dcdb,ebf1dd,e5e0ec,dbeef3,fdeada,d8d8d8,595959,c4bd97,8db3e2,b8cce4,e5b9b7,d7e3bc,ccc1d9,b7dde8,fbd5b5,bfbfbf,3f3f3f,938953,548dd4,95b3d7,d99694,c3d69b,b2a2c7,92cddc,fac08f,a5a5a5,262626,494429,17365d,366092,953734,76923c,5f497a,31859b,e36c09,7f7f7f,0c0c0c,1d1b10,0f243e,244061,632423,4f6128,3f3151,205867,974806'.split(',').join(suf + pre), suf].join('');

                var htmlStandard = [pre, 'c00000,ff0000,ffc000,ffff00,92d050,00b050,00b0f0,0070c0,002060,7030a0'.split(',').join(suf + pre), suf].join('');

                var htmlGeneralPanel = ['<div class="editor_color_panel" style="z-index:12;" unselectable="on"><div class="color_general" unselectable="on">', htmlGen, '</div><div class="color_list" unselectable="on">', htmlList, '</div><div class="color_standard" unselectable="on">', htmlStandard, '</div></div>'].join('');

                cmd._htmlCache = htmlGeneralPanel;
            }

            content.append(cmd._htmlCache)
                .find('strong')
                .click(function (e) {
                    callback($(this).attr('style').substr(17, 7));
                    editor.closeDropDown(true);
                    e.preventDefault();
                });

            editor.createDropDown(caller, "color-picker", content);
        };

    })
});


N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

Code:
.editor_color_panel{
 background-color:#fff;
 width:189px;height:135px;
}
.editor_color_panel .color_general{
 height:16px;
 margin:11px 7px 9px 11px;
}
.editor_color_panel .color_list{
 height:70px;
 margin:0 7px 0 11px;
}
.editor_color_panel .color_standard{
 height:16px;
 margin:13px 7px 8px 11px;
}
.editor_color_panel strong{
 font-size:0;
 display:block;
 width:14px;
 height:14px;
 margin-right:3px;
 float:left;
 cursor:pointer;
}

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

Voici un code final à modifier pour exemple :


Code:
/*--- Bloc réponse rapide ---*/

.sceditor-container.ltr.sourceMode {width:550px !important; background-color: #XXXXXX !important;}
.sceditor-container.ltr.wysiwygMode {width:550px !important; background-color: #XXXXXX !important;}

/*---  Partie supérieur contenant les outils ---*/

div.sceditor-toolbar {
background-color: #XXXXXX !important;
width: 540px !important;
}

/*---  Partie texte area : fond ---*/

.sceditor-container iframe, .sceditor-container textarea {
background-color: #XXXXXX !important;
text-align:justify;
margin:0 !important;
line-height: 16px;
width: 540px !important;
color: #XXXXXX !important;
font-size:11px !important;
}

/*---  Groupe de boutons ---*/

div.sceditor-group {
background-color: #XXXXXX !important; }

/*---  Boutons ---*/

a.sceditor-button {
}

/*---  Boutons sélectionnés ---*/

a.sceditor-button.hover {
background-color: #XXXXXX !important;
}

/*---  Smileys ---*/

.sceditor-emoticons {width: 350px !important; height: 250px !important; overflow: auto !important;}
img.smiley {width: auto !important; height : auto !important;}

Cette astuce a été travaillée par de nombreux membres ayant fourni des codes. Merci à tous.

Aucune reproduction possible sans accord, conformément à l’article L122-1 du CPI.

Pour proposer une astuce, merci de l'envoyer par MP à un Aidactif ou un Modéractif.
Tech

Tech
Membre actif

Masculin
Messages : 22683
Inscrit(e) le : 01/12/2007

https://forum.forumactif.com/
Tech a été remercié(e) par l'auteur de ce sujet.
  • 0

Astuce Re: Modifier l'apparence de l'éditeur

Message par Tech Ven 14 Juin 2013 - 21:38

Modifier l'apparence de l'éditeur (suite)

Depuis le 13/06/2013, Forumactif s'est équipé d'un nouvel éditeur de message, plus moderne, aux formes plus arrondies que le précédent.

Voir illustration :

Pourtant, comme tout le reste, il est possible de le personnaliser en changeant ses couleurs pour l'accorder avec le reste de votre forum. Il serait en effet dommage qu'il reste blanc sur un fond sombre, forçant vos yeux à passer d'un environnement clair à un environnement foncé lors de l'écriture puis de la lecture des messages. Voici comment le modifier simplement, en utilisant seulement le CSS.

Modifier/personnaliser l'Editeur de message


Commençons par modifier l'ensemble du bloc, nous passerons à ce qu'il contient ensuite. Ce bloc porte le nom de : "sceditor-container" et c'est une "class", ce nom devra donc être précédé d'un "point" dans le CSS.

Voir illustration :

Code:
.sceditor-container
{
...vos propriétés
}

Là, si vous tentez d'y appliquer un fond, une couleur par exemple, vous pourrez constater qu'il ne se passe rien. Pourtant, vous êtes bien sur la bonne zone. Votre propriété css ne fonctionnera que si vous y ajoutez l'élément "!important" en fin de ligne. Cet élément sert à faire passer une propriété "en force" en la plaçant comme prioritaire face à celle par défaut. Normalement sur Forumactif la feuille CSS est prioritaire sur le CSS de base, mais il y a des exceptions, comme par exemple le surlignement des liens, vous avez peut-être pu le constater. Toutes les propriétés que vous attribuerez à cet éditeur devront être mises en "important".

L'éditeur ne prenant pas toute la largeur du bloc où il se trouve, on peut commencer par l'agrandir et le centrer :

Code:
.sceditor-container
{
width: 98% !important;
margin: auto !important;
}

Comme vous le voyez, il faut à chaque ligne l'indication "!important" qui force la propriété à passer par dessus celle déjà présente dans le templates.

Si vous voulez ajouter des marges en haut et en has de votre bloc, faites comme ceci :

Code:
.sceditor-container
{
width: 98% !important;
margin: 10px auto !important;
}

Le "10 px" s'appliquera en haut et en bas, changez-le selon votre goût, et si vous préférez détailler faites :

Code:
.sceditor-container
{
width: 98% !important;
margin: 10px auto 10px auto !important;
}

La règle ici c'est que chaque valeur s'applique à un côté, et toujours dans l'ordre suivant : HAUT – DROITE – BAS – GAUCHE. En clair vous partez du haut et vous tournez dans le sens des aiguilles d'une montre, et vous savez à quoi se rapporte chaque valeur de votre "margin".

Pour appliquer un fond et une bordure c'est le même principe, toujours avec le "!important".

Code:
.sceditor-container
{
width: 98% !important;
margin: 10px auto !important;
background: #333333 !important;
border: 1px solid #000000 !important;
}

Voir illustration :

Remarque : vous pouvez appliquez une couleur de fond autant qu'une image de fond, la faire se répéter ou non, toutes les propriétés fonctionnent dès lors que vous n'oubliez le "!important" en fin de ligne.

Attention : par défaut ce bloc possède une bordure claire (gris très clair), si vous ne voulez pas la garder mais que vous ne voulez pas non plus une autre bordure mettez en propriété de bordure :

Code:
border: none !important;

Passons à la zone d'en-tête du cadre où se trouvent les boutons. Cette zone s'appelle : "sceditor-toolbar", et c'est également une "class".
De la même manière que pour l'ensemble du bloc, vous pouvez alors choisir votre couleur de fond et de bordure, mais toujours en ajoutant le "!important".

Voici mon exemple :

Code:
.sceditor-toolbar
{
  background: #141414 !important;
  border-bottom: 1px solid #000000 !important;
}

Voir illustration :

J'ai fait simple, libre à vous d'y inclure un motif de fond, des bordures différentes, etc...

Il s'agit ensuite de mettre en forme les blocs gris qui contiennent les groupes de boutons, rassemblés par type. Ces blocs s'appellent : "sceditor-group" et ce sont également des "class".

Un exemple :

Code:
.sceditor-group
{
  background: #444444 !important;
  border: 1px outset #333333 !important;
  border-radius: 5px !important;
}

Voir illustration :

Remarque : vous vous en doutez, c'est que les dessins des boutons ne sont pas faits pour être sur le foncé. Il faudra donc éclaircir un peu notre fond pour chaque bouton. Je vais donc laisser mon gris tel quel, mais passer à la suite avec la mise en forme des boutons.

Les boutons peuvent avoir deux mises en forme : l'une normale, l'autre au survol du bouton. Pour cela nous allons utiliser :
  1. a.sceditor-button : bouton normal ;

  2. a.sceditor-button:hover : bouton au survol.


Voici mon exemple :

Code:
a.sceditor-button
{
  background: #777777 !important;
  border-radius: 20px !important;
}
a.sceditor-button:hover
{
  background: #999999 !important;
}

Voir illustration :

Oui, des boutons ronds, why not ? Very Happy ! Libre à vous de mettre un fond plus clair pour que les dessins se voient mieux, de mettre un survol avec transition, une lueur (box-shadow) ou de remettre les boutons carrés au survol... Pour ça je laisse votre imagination jouer x).

Par contre, vous aurez peut-être constaté que lorsque le monde wysiwyg est activé, certains boutons apparaissent comme "sélectionnés", et donc actif. Par exemple l'alignement (gauche, droite, centré, justifié) est juste cliquable en version normale et vous donne les bonnes balises, mais en version wysiwyg le bouton doit resté d'une couleur différente pour montrer qu'il est actif. Du coup, il vous faut ajouter une propriété pour ce bouton actif :

Code:
a.sceditor-button.active
{
  background: #c2c2c2 !important;
}

Voir illustration :

Mon alignement gauche est actif, il est plus clair que les autres, et si je change l'alignement c'est le bouton choisi qui sera plus clair.

Passons maintenant au cadre de texte. Il faut tout d'abord savoir qu'il y a deux cadres textes selon le mode d'édition dans lequel vous vous trouvez. En effet, vous pouvez passer du mode wysiwyg ("what you see is what you get") au mode de saisie classique en cliquant sur l'icone de la feuille (le dernier de la liste). C'est donc les deux blocs qu'il faut changer, sans quoi vous risquez d'avoir des couleurs de fond différentes selon le mode lorsque vos utilisateurs les changeront.

Il est conseillé de rester simple dans la mise en forme de ce bloc : une couleur de fond, une bordure, un padding pour éviter d'avoir le texte collé aux bordures et voilà x).

Code:
.sceditor-container textarea, .sceditor-container iframe
{
  padding: 5px !important;
  background: #555555 !important;
  border: 1px solid #666666 !important;
}

Voir illustration :

Pour information le "textarea" s'applique pour le mode classique et l'iframe contient le mode "wysiwyg".

Attention : dans ce bloc vous ne pouvez pas tout changer. Si vous avez une police particulière sur votre forum ainsi qu'une couleur de texte précise, il vous faut faire très attention au mode "wysiwyg" car ses propriétés ne sont pas toutes modifiables. Si vous voulez un texte de couleur blanche sur votre cadre de saisie, il redeviendra forcément noir si l'utilisateur change de mode et passe en "wysiwyg". Prenez-en compte, il faut que votre texte soit lisible dans les deux cas. Les forum clairs n'auront pas trop de souci, mais les forum sombres pourraient vouloir un fond sombre et un texte clair, or ce n'est pas possible. Je vous conseille donc d'utiliser des tons moyens, un gris moyen, un marron pas trop foncé etc... comme je l'ai fait dans mon exemple.

Récapitulatif du CSS


Code:
.sceditor-container => bloc complet de l'éditeur
.sceditor-toolbar => zone d'en-tête de l'éditeur (avec les groupes de boutons)
.sceditor-group => groupes de boutons, rassemblés par type
a.sceditor-button => bouton normal
a.sceditor-button:hover => bouton survolé
a.sceditor-button.active => bouton "actif" (mode wysiwyg)
.sceditor-container textarea, .sceditor-container iframe => contenus des blocs textes, attention à vérifier la lisibilité des deux modes et adapter votre couleur de fond en fonction.

Voilà, notre personnalisation simple est achevée, et votre éditeur s'intègre sûrement un peu mieux dans le paysage désormais (je l'espère du moins ! XD). A vous de customiser tout cela comme bon vous semble, restez cependant efficaces et simples car c'est un cadre de saisie, vos utilisateurs doivent pouvoir y écrire longtemps sans se fatiguer les yeux, surtout pour un forum RPG par exemple.

Une petite remarque en ce qui concerne cet éditeur qui a pu en déstabiliser plus d'un au premier abord : il comporte tout de même pas mal d'avantages :

  • Au final il reste plus personnalisable que le précédent (qui posait lui aussi son lot de problème avec le mode wysiwyg) même s'il faudrait pouvoir modifier facilement ses couleurs. Mais n'oubliez pas qu'il n'est qu'en version bêta, il sera peut-être possible de voir la modification de ses couleurs se faire directement via le PA dans l'onglet "Couleurs"... ;

  • Il ne comporte pas l'énorme défaut du précédent qui faisait remonter le bloc de texte tout en haut à la moindre mise en forme faite en mode "classique", et ça pour nos mises en forme c'est quand même très reposant, il faut l'avouer ! ;

  • Il ne va pas non plus afficher un lien ou une image tout à la fin de la saisie alors que notre cursus est placé au milieu d'un paragraphe. Là, il l'affiche à l'endroit du cursus, c'est également plaisant ;

  • Le choix des couleurs est également plus grand, et on peut apprécier cela dans nos choix de tons pour nos dialogues RP x).


Remerciements


Merci à @Sparrow-style de Never Utopia d'accepter de nous partager son tutoriel très détaillé pour la personnalisation de l'éditeur. Vous pouvez consulter le tutoriel sur son forum à cette adresse.

Cette astuce a été proposée par Sparrow-style.

Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.
Tech

Tech
Membre actif

Masculin
Messages : 22683
Inscrit(e) le : 01/12/2007

https://forum.forumactif.com/
Tech a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Vous et Forumactif... :: ressources pour utilisateurs forumactif :: Trucs et astuces

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum