[Topic Unique] Apparence du nouvel éditeur de messages

[Anzu]

Bonjour, suite à cette MAJ, des problèmes ont été constatés, notamment au niveau de l'apparence. (suppression de boutons, changement de couleur, etc)


Si vous avez des problèmes à ce niveau, merci de bien vouloir poster à la suite de ce message.


- Merci de ne PAS POSTER des commentaires inutiles, ceux ci seront immédiatement supprimés.

- Merci de bien vouloir préciser la version du forum concernée.

- N'hésitez pas à fournir des captures d'écran si nécessaire.

Bonjour, --------------------- Compte rendu ! --------------------- Votre problème vient de la dernière Mise à jour de l'éditeur. Voici les "Topic Unique" qui traitent des différents souci : - [Topic Unique] Apparence du nouvel éditeur de messages - [Topic Unique] HTML - Nouvel éditeur de messages - [Topic Unique] Abscence des boutons de l'éditeur - [Topic Unique] Les Smileys - Nouvel éditeur de message - [Topic Unique] Impossible de sortir du cadre de la citation Un topic de suivi des travaux en cours se trouve ici : Compte rendu du nouvel éditeur ! Un tutoriel d'astuce est aussi en place : Modifier l'apparence de l'éditeur via le CSS Vous avez aussi la possibilité d'attendre la semaine prochaine que les améliorations de cette MAJ soient mises en place par les techniciens.

[lacie holmes]

Merci pour ce nouveau sujet, cela sera bien plus pratique!

Alors je ré-expose mon problème, mais je tiens à dire que cela n'est pas primordial et que j'essaie de trouver une solution si il y en a. Donc, je viens juste en quête d'une possible réponse, sil il n'y en a pas actuellement, j'attendrai les modifications.

Bref. Malgré les codes données dans le topic de l'annonce du nouvel éditeur, je ne peux changer les propriétés de la police d'écriture. Plutôt que d'être en Verdana 13px en couleur noire, j'aimerai qu'elle soit en 11px en couleur grise, mais modifier le textarea ne fonctionne pas. Est-il donc possible de le modifier actuellement ou pas?

Merci d'avance, et bon courage pour régler tous les soucis actuels de ce nouvel éditeur de texte!

[MlleAlys]

Bonjour,

Je suis parvenue à changer la plupart des couleurs qui ne me convenaient pas du nouvel éditeur, sauf une : celle du texte dans la zone de saisie en mode WYSIWYG (seulement celui là, ça a fonctionné pour l'autre mode ^^"). Elle reste noire alors que je la voudrais blanche...

EDIT => résolu : https://forum.forumactif.com/t352532-topic-unique-apparence-du-nouvel-editeur-de-messages#3002396

[Grimmy']

Bonjour,

J'ai essayer un des codes CSS a rajouter pour modifier l'apparence du nouvel éditeur, mais ça ne fonctionne pas ...

[pascaline75]

Bonjour

Le cadre du pavé de message est devenu plus petit que précédemment, est-ce normal ? cependant cela ne modifie pas le texte . J'ajoute que je n'ai jamais utilisé les templates , je ne sais pas les utiliser , j'aimerais savoir si cela aura une incidence avec vos modifs

Merci
Cordialement

Cordialement

[Zarby]

Bonjour,
J'ai ajouté ceci à mon css

Code:

/*nouvel éditeur barre du haut*/

div.sceditor-toolbar{
background-color:#000;}

/*nouvel éditeur textarea*/
.sceditor-container iframe, .sceditor-container textarea{
  background-image: url("http://krystel.mercier.perso.sfr.fr/La%20Chute/Version3/fond.png");}

/*nouvel éditeur gp bouton*/

div.sceditor-group{
background-color:#000;}

en suivant le tuto. Je n'ai cependant aucun changement au niveau de l'aspect des messages :/

[lacie holmes]

Zarby : D'après ce que j'ai compris, il faut rajouter ' !important " avant chaque point virgule de chaque propriétés.

Code:

/*nouvel éditeur barre du haut*/
 
div.sceditor-toolbar{
background-color:#000 !important;}
 
/*nouvel éditeur textarea*/
.sceditor-container iframe, .sceditor-container textarea{
  background-image: url("http://krystel.mercier.perso.sfr.fr/La%20Chute/Version3/fond.png") !important;}
 
/*nouvel éditeur gp bouton*/
 
div.sceditor-group{
background-color:#000 !important; }

EDIT: D'ailleurs, je remarque que MlleAlys a bien mieux exposé mon problème que moi. x) J'ai ce même soucis en mode WYSIWYG.

[Aelin]

Ici ou ailleurs peu importe, je repose la question:
est-ce que la taille de l'écriture quand on tape un message va revenir comme avant, où est-ce qu'on doit se contenter de pattes de mouches???
Ce qui n'est pas du tout pratique pour les personnes ayant des problèmes de vue, je le répète une fois de plus.

[Lixyr]

Bonsoir.
Au niveau du décalage à droite, ou de la zone vide, comme vous voulez, je redonne mon code ici pour ceux qui n'ont pas vu.

Bonsoir, Polices.

J'ai eu ce problème. Après une entière configuration de l'éditeur, je suis arrivée à une page où il y avait ce décalage. J'ai cru à un problème de cookie, mais il semblerait que ça vienne du fait que le staff travaille dessus. Avec du CSS, j'ai réussi à remettre ça bien:

Code:

.sceditor-container.ltr.sourceMode {width:95% !important;}

C'est en éditeur normal.

Code:

.sceditor-container.ltr.wysiwygMode {width:95% !important;}

C'est en éditeur WYSIWYG.

Là, ça permet de configurer la taille du tout, mais on peut aussi mettre des bordures, un fond etc.

Pour les polices et couleurs, comme le mode WYSIWYG est sous iframe, je ne pense pas qu'on puisse changer l'intérieur, en tout cas j'ai essayé et ça n'a rien donné. On peut mettre une marge, changer la bordure, le fond etc, mais pas le texte en lui-même.
Par contre, j'ai changé l'autre mode. Il faut rajouter un !important à chaque code afin qu'il soit pris en compte. Et bien différencier les deux modes, autrement, les codes ne fonctionnent pas.

Pour le mode normal, changez les bordures, mais aussi les polices etc :

Code:

.sceditor-container.ltr.sourceMode {ICI CODES GLOBAUX BORDURE, fond etc}

Code:

.sceditor-container textarea {
font:14px Times New Roman !important;
  color:white !important; }

[Zarby]

Merci
Et pour la grosse bordure blanche? J'ai mis un code css pour faire une bordure en espérant changer la couleur et la taille, mais cela ne change rien

Edit : Peut-on changer la couleur du survol et si oui quelle balise pour le css? un hover sur div.sceditor-group ne change rien

Spoiler:

[Lixyr]

Tu parles de l'énorme bordure blanche en mode WYSIWYG ? C'est le fond en fait. ^^" Essaie ça :

Code:

.sceditor-container.ltr.wysiwygMode {
  border: TA BORDURE GLOBALE ;background:#TA_COULEUR_DE_FOND;

Code:

.sceditor-container iframe {
  background:none !important; margin:0 !important;}

Il faut mettre une couleur de fond globale, et enlever celle dans l'iframe, ainsi que les marges qui pourraient laisser voir la couleur en dessous, et donc faire une grosse bordure toute moche.

[Zarby]

J'ai rajouté et cela ne change pas, j'ai toujours la bordure blanche...
J'avais aussi rajouté un edit concernant le survol et je rajouterais que ce serait peut-être bien de différencier le bouton "change de mode d'édition" dès lors que l'on est ou non en WYSIWYG. Ou à la limite changer l'intitulé au survol. Car cela n'est pas pratique pour savoir en quel mode nous sommes !

[Lixyr]

Je suis tout à fait d'accord pour le bouton d'édition, qu'il faudrait différencier selon qu'on est en mode normal, ou en WYSIWYG. ^^

Pour la bordure, huuum... ça marche bien sur mon forum, et mon forum test. Est-ce que tu as déjà un CSS pour cet éditeur ? Tu peux donner un lien où je verrai ce que ça donne ?

[Zarby]

Alors mon css c'est ça

Code:

/*nouvel éditeur barre du haut*/
div.sceditor-toolbar{
background-color: #32251D !important;
text-align: center!important;}
/*nouvel éditeur textarea*/
.sceditor-container iframe, .sceditor-container textarea{
background-image: url("http://krystel.mercier.perso.sfr.fr/La%20Chute/Version3/fond.png") !important;
  border: solid 1px #000 !important;
color:#fff !important;}
/*nouvel éditeur gp bouton*/
div.sceditor-group{
background-color: #67574C !important;}

.sceditor-container.ltr.wysiwygMode {
  border: solid 1px #000 ;
  background-image: url("http://krystel.mercier.perso.sfr.fr/La%20Chute/Version3/fond.png");}

.sceditor-container iframe {
          background:none !important;
  margin:0 !important;}

Et cela donne ça (je t'ai mis les deux modes pour lesquels, en plus, il faut insérer à chaque fois les valeurs sinon l'un le fait et pas l'autre - Je suis pas du genre à râler et être chiante mais franchement ça m'agace ! On alourdit un max notre css qui est déjà bien rempli.... - Du coup j'ai pas changé la couleur du texte partout et j'ai mis en blanc pour qu'on puisse pour l'instant le voir avant d'harmoniser

Spoiler:

Autre demande : se serait possible d'avoir un tuto détaillé sur tous ses changements? Celui fait à la suite de l'annonce dépanne, mais n'est pas assez complet. Là on envahit ce sujet du coup, car on a pas toutes les infos, et sans ces dernières on peut pas y arriver (pourtant je m'y connais un peu en code >.>)


Edit : en mode wysiwyg, je n'arrive pas à faire changer la couleur noire. J'ai rajouté un code css dans la balise sceditor-container.ltr.wysiwygMode sans succès.

Désolée pour cette ribambelle de questions >.>"

[-Méphisto-]

La fenêtre d'écriture est privée de tous ses boutons (gras, taille, etc.) sur mon forum

[Glorio]

Pourrais-t-on supprimer les icônes encadrer en rouge ?

[Lixyr]

Ah oui, tu dois mettre le code que j'ai donné dans ton css, donc dans la même classe que tu avais déjà mise, et non pas le rajouter après, sinon il ne le prend pas en compte. 

Donc ça te donne ça :

Code:

/*nouvel éditeur barre du haut*/
        div.sceditor-toolbar{
        background-color: #32251D !important;
        text-align: center!important;}
        /*nouvel éditeur textarea*/
        .sceditor-container iframe, .sceditor-container textarea{
        background-image: url("http://krystel.mercier.perso.sfr.fr/La%20Chute/Version3/fond.png") !important;
          border: solid 1px #000 !important;
        color:#fff !important;
          margin:0 !important;}
        /*nouvel éditeur gp bouton*/
        div.sceditor-group{
        background-color: #67574C !important;}
        
       
        
        .sceditor-container.ltr.sourceMode, .sceditor-container.ltr.wysiwygMode
{ border: solid 1px #000 ;
          background-image: url("http://krystel.mercier.perso.sfr.fr/La%20Chute/Version3/fond.png");}

[Stormbringer74]

Bonjour,

J'ai essayer un des codes CSS a rajouter pour modifier l'apparence du nouvel éditeur, mais ça ne fonctionne pas ...

 
 
je confirme.. les codes ne fonctionnent pas.. pourrait on avoir des correctifs ?

[Ayael]

Bonjour, si vous souhaitez ajouter une barre de défilement à votre boite de smiley (parce que la mienne faisait dix kilomètre de long) ce code semble marcher.

Code:

div.sceditor-emoticons {
 
  height:300px;
  overflow:auto;
}

[Zarby]

Oulala >.>' je n'avais pas grillé que j'avais deux fois la même balise je dois être vraiment fatiguée ! Merci à toi. C'est toujours présent, mais en beaucoup moins gros, donc ça va un peu mieux. J'avais rajouté un edit à mon précédent message, pour changer la couleur du texte en mode wysiwyg

Merci de ta patience en tout cas et de ton aide !

[MlleAlys]

Quelques codes css pour modifier l'apparence du nouvel éditeur.
(Tout ce que j'ai posté ici fonctionne chez moi... mais s'il y a des modifications ont été faites sur certains codes afin de régler des problèmes, n'hésitez pas à m'envoyer un message pour que je les modifie ! )

Pour les codes css : ces codes sont à copier/coller (puis enregistrer ! xP) dans votre feuille de style css :
Affichage > Images et couleurs > couleurs > onglet Feuille de style css.
Si vous n'avez encore aucun code sur cette feuille, il vous suffit de coller puis enregistrer.
Si vous en avez déjà, vous pouvez passer quelques lignes pour séparer les nouveaux codes des précédents, coller, et enregistrer
Tout ce qui est entre balises /*....*/ sont des commentaires, vous pouvez les modifier, les enlever, ou en ajouter comme vous le voulez pour mieux vous y retrouver ^^

(spoiler)Voilà déjà un code pour l'apparence pour personnaliser grossièrement votre éditeur:

(spoiler) Pour modifier l'apparence des outils (voir plus bas comment modifier un bouton en particulier):

(spoiler) Pour modifier la largeur de l'éditeur (PROBLÈME RÉSOLU, SI VOUS AVEZ UTILISÉ CE CODE VOUS POUVEZ LE RETIRER):

(spoiler) Pour désactiver le mode wysiwyg (cela règle apparemment également certains problèmes lié à ce mode avec Internet explorer ^^"):

(spoiler) activer le mode source par défaut :

(spoiler) Pour modifier la mise en forme du mode wysiwyg:

(spoiler) Pour avoir les smileys à la bonne taille (PROBLÈME RÉSOLU, SI VOUS AVEZ INSTALLÉ CE CODE VOUS POUVEZ LE RETIRER) :

(spoiler) Pour contrôler la taille de l'encadré des smileys (PROBLÈME RÉSOLU, SI VOUS AVEZ INSTALLÉ CE CODE VOUS POUVEZ LE RETIRER) :

(spoiler) Pour supprimer le dédoublement des smileys et autres soucis liés (PROBLÈME RÉSOLU, SI VOUS AVEZ INSTALLÉ CE CODE VOUS POUVEZ LE RETIRER) :

(spoiler) Pour mettre une couleur de fond à la place de l'image dans la boite des smileys :

(spoiler) Pour pouvoir écrire en dessous du cadre de citation (PROBLÈME RÉSOLU, SI VOUS AVEZ INSTALLÉ CE CODE VOUS POUVEZ LE RETIRER) :

(spoiler) Pour modifier un bouton, voici d'abord les class de chaque bouton (voir plus bas comment les utiliser):

(spoiler) Pour cacher un bouton:

(spoiler) Pour changer le fond d'un bouton en particulier:

(spoiler) Pour changer l'image d'un bouton:

(spoiler) Pour empêcher la fenêtre servimg de se refermer:

(spoiler) Pour avoir un sélecteur de couleur plus simple:

(spoiler) Pour ajouter ou modifier une police de l'éditeur:

En espérant que ça en aide certains

et encore une fois, merci à Ea pour tout ces codes !! :thanks:

[AlanBike]

Salut,

Alors, fofo comme dans le profil.
En réponse rapide, pas de problèmes spécifiques.
En mode réponse normale, il y a un problème:
En mode WYSIWYG: l'éditeur semble se servir de la couleur de police renseignée pour l'ancienne fenêtre(blanc). Donc, le texte n'apparait pas(blanc sur blanc).
En mode non wysiwyg, pas de problème. La police apparait bien en noir sur fond blanc.

Cordialement

PS: idem pour le curseur qui apparait bien en noir en mode non wysiwyg et en blanc(donc on ne le voit pas) en wysiwyg.

[Lucrezia2]

ce coup ci j'espère que je suis au bon endroit, ça fait la troisième fois que je poste ce qui suit, et qu'on me dit de le mettre ailleurs !

"bonjour tout le monde ! je suis comme vous, j'ai des blocages aux niveau des icones B et autres qui ont disparu, le fond noir superbe qui me permettait de voir est devenu blanc dans la réponse rapide et réponse normale ! AU SECOUR

par contre, je suis mal voyante et je comprends difficilement où je dois poster vos codes et autres... si quelqu'un pouvait me rétablir tout ça, j'en serais ravie ! ou alors m'expliquer A + B comme à un gosse, par où je dois passer exactement pour aller où je dois modifier, car j'ai voulu vérifier dans Affichage, couleurs... et là je suis perdue, je ne sais pas ce que je dois modifier et où !

D'avance merci !

http://veniseladecadente.forums-rpg.com/
je vous créé même un compte si vous voulez ! ^^"

Et un de mes joueurs à dit

"
Coucou,
Je ne vois plus les codes de police à la fin des paragraphes avant de poster et impossible d'ôter le (B) sur mon post de ce jour. Bref, je ne suis pas douée!
Merci!"

bref AU SECOUR moi je ne comprends rien dans vos histoires de codes etc...

[lilimorgane]

J'ai un soucis: lorsque j'utilise la réponse normale (donc pas la rapide), je ne peux pas écrire, il ne me met que la barre d'icones, le cadre pour écrire n'apparait pas ni le curseur, d'ailleurs ca le fait içi aussi

[MlleAlys]

pour cacher un bouton ou modifier son fond, voici d'abord les class de chacun (ou presque ^^") :

Spoiler:

Pour cacher un bouton, prenez sa class et attribuez lui l'affichage " display: none; " dans votre css.
Par exemple si je veux masquer le bouton date, j'ajoute ce code dans mon css :

Code:


.sceditor-button.sceditor-button-date {
  display: none;
}

Pour changer le fond, même principe, sauf que vous attribuez une propriété background.
Par exemple, pour mettre le bouton de changement de mode en rouge :

Code:

.sceditor-button.sceditor-button-source {
 background-color: red;
}

[AlanBike]

J'ai un soucis: lorsque j'utilise la réponse normale (donc pas la rapide), je ne peux pas écrire, il ne me met que la barre d'icones, le cadre pour écrire n'apparait pas ni le curseur, d'ailleurs ca le fait içi aussi

Bonjour,

Cliquez sur le dernier bouton, celui qui indique "basculer le mode d'édition".
Cela fait il revenir le curseur et la fenêtre d'écriture?

Cordialement

[le.cricket]

le nouvel éditeur de message est une véritable catastrophe, de plus vous changez sans prévenir ! je n'arrive plus à mettre des images correctement et les smileys il faut une loupe pour les voir !! voici la capture :




peut-on revenir à l'ancien système SVP ! merci


de plus mon forum est avec un fond noir et c'est très compliqué, peut-on remettre le fond noir svp

[Tech]

Bonjour,

Comme signalé pour la centième fois, les smileys seront bientôt changés et reprendront leur état initial

Merci de patienter.

Cordialement.

[MlleAlys]

Bon si je reviens à mon propre problème :

Bonjour,

Je suis parvenue à changer la plupart des couleurs qui ne me convenaient pas du nouvel éditeur, sauf une : celle du texte dans la zone de saisie en mode WYSIWYG (seulement celui là, ça a fonctionné pour l'autre mode ^^"). Elle reste noire alors que je la voudrais blanche...
=> lien vers poster un message sur mon forum pour un aperçu : http://estrelane.forumactif.com/post?f=7&mode=newtopic
(phpBB2)

Merci d'avance !

N'y a t il donc aucun moyen de changer la couleur de police en mode wysiwyg ? ^^"

[adele]

coucou
j'ose une petite question ...
comment faire pour changer le fond et mettre en couleur , sans passer par votre ecriture "martienne" ,
bref, j'aimerais quelque chose à faire de Simple !
car j'y connais rien en CSS ou template
merci beaucoup