Modifier l'apparence de l'éditeur

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

  • 0

Astuce Modifier l'apparence de l'éditeur

Message par Tech le Ven 14 Juin 2013 - 16:46

Modifier l'apparence de l'éditeur

Bonjour,

Nous vous proposons quelques codes à placer dans votre panneau d'administration.

Ceux-ci 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 / Images et Couleurs / Couleurs : ONGLET Feuille de style CSS

Il est à noter que ceci n'est que provisoire, les corrections à venir vont corriger certains défauts.

Nous vous invitons également à lire ce sujet : Le CSS - Comment ça marche ? et à vous rendre sur ce site : Le Site du Zéro - Mémento du CSS pour trouver un grand nombre de propriétés applicables par 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. XXXXXX à modifier.




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;
}
XXXXXX à modifier.




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;
}
Taille des smileys.




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
- Allez dans Modules > Gestion des codes javascript
- Vérifiez que l'option "Activer la gestion des codes Javascript " est cochée sur OUI
- Créez un nouveau code. Donnez lui un nom ("smileys" par exemple)
- Cochez "sur toutes les pages" pour le placement,
- Puis dans la zone de saisie collez ce code :
Code:
$(function(){ $(function() {
  $(".sceditor-button-emoticon").click(function() {
    $(".smiley").unbind("hover")
  })
})});
- Validez !




Changer la couleur de texte en mode wysiwyg
- Allez dans Modules > Gestion des codes javascript
- Vérifiez que l'option "Activer la gestion des codes Javascript " est cochée sur OUI
- Créez un nouveau code. Donnez lui un nom ("couleur wysiwyg" par exemple)
- Cochez "sur toutes les pages" pour le placement,
- Puis dans la zone de saisie collez ce code :
Code:
$(function() {
  var a = $("#text_editor_textarea");
  0 != a.length && $(function() {
    a.sceditor && a.sceditor("instance") && a.sceditor("instance").css("body,p{color:red}");
  });
});
- Validez !




Mettre un sélecteur de couleur avec moins de couleur

- Allez dans Modules > Gestion des codes javascript
- Vérifiez que l'option "Activer la gestion des codes Javascript " est cochée sur OUI
- Créez un nouveau code. Donnez lui un nom ("couleur wysiwyg" par exemple)
- Cochez "sur toutes les pages" pour le placement,
- Puis dans la zone de saisie collez ce code :

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);
        };

    })
});
- Validez !
- Ajouter dans le css ( PA > Affichage > Couleurs > Feuille de style ) ceci :

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;
}



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;}
  
   



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

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

http://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 le Ven 14 Juin 2013 - 21:38

Merci à Sparrow-style de Never Utopia d'accepter de nous partager son tutoriel très détaillé pour la personnalisation de l'éditeur :

@Sparrow-style a écrit:
Modifier/personnaliser l'Editeur de message


Note : l'éditeur étant actuellement en version bêta et susceptible de surbir des modifications, ce tutoriel pourra être modifié ou adapté en fonction.

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, mais qui dans un premier abord peut paraitre moins esthétique, surtout pour les forum aux teintes sombres.


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.

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.


(Le bloc complet est ce qui apparait avec un fond rouge et des bordures roses pâles sur mon screen)

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 template.

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;
}


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;
}


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;
}


Une 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 :
a.sceditor-button = bouton normal
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;
}

Sur ce screen le bouton "italique" est survolé, il apparait un peu plus clair que les autres.

(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;
}

(J'avais déjà mis la couleur de la zone texte, dans votre éditeur il doit être toujours blanc, ce qui est normal.)

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;
}


Pour information le "textarea" s'applique pour le mode classique et l'iframe contient le monde "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'avoue !
- 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).

Source (tutoriel original): Personnalisation du nouvel éditeur FA



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

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

http://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


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