[Topic Unique] Apparence du nouvel éditeur de messages

[Anzu]

Rappel du premier message :

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.

[Adminmonforum]

aaaaaahhhhhhhhhh !!!
j'avais bien réussi à retrouver des smileys plus gros grâce au code CSS trouvé 
et à les faire défiler avec le code suivant
mais maintenant, plus moyen de les mettre dans les messages (j'ai une version phbb3)
quand je clique dessus, l'image se dédouble et rien ne se passe ; même plus en copié/collé.

[MlleAlys]

Est-ce que je peux enlever cette couleur blanche afin d'y mettre le bleu que j'avais avant ??

Avez vous essayé d'installer ces codes ? https://forum.forumactif.com/t352532-topic-uniqueapparence-du-nouvel-editeur-de-messages#3002396

[Alpha.44]

Vanaxo,

Dans cette partie ici :

Code:

sceditor-container.ltr.sourceMode

Code:

sceditor-container.ltr.wysiwygMode

Il faut ajouter :

Code:

background-color: #XXXXXX !important;

Et modifier XXXXXX par un code couleur. (:

Idem pour ici :

Code:

.sceditor-container iframe, .sceditor-container textarea

Si tu n'y arrives pas, tu n'auras qu'à nous fournir ton code CSS pour la réponse rapide et nous te le ferons. Ou suivre ce tutoriel :
https://forum.forumactif.com/t352532p210-topic-unique-apparence-du-nouvel-editeur-de-messages#3003323

[Vanaxo]

Alpha 44, merci de votre gentillesse et de votre temps, je sais combien il doit être dur de répondre à tous, vraiment merci beaucoup!!

Voila ce que j'ai moi : 


J'ai réussi a mettre un code pour les smiley mais vraiment j'y suis allée à l'aveuglette, j'y connais pas grand chose 

[Alpha.44]

Vanaxo : oh, de rien. <3 Je sais bien que c'est difficile, ayant débuté il y a deux ans, ça n'a pas toujours été simple non plus, alors si je peux aider.

Dans cette feuille de CSS, il va falloir ajouter ceci (j'ai mis le tutoriel détaillé) :

A ajouter dans le CSS :

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.

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.

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

Ca 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

Code:

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

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

Ca concerne la couleur des groupes de boutons. XXXXXX à modifier.

Code:

/*---  Boutons ---*/

a.sceditor-button {
}

Ici je n'ai rien mis, mais on peut ajouter un "background".

Code:

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

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

XXXXXX à modifier.

Code:

/*---  Smileys ---*/

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

Taille des smileys.

Au final, ça donne ça :

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

A chaque fois, il faut modifier le XXXXXX par un code couleur. Ils peuvent être retrouvés ici, si vous ne savez pas comment ça fonctionne :

http://www.zenfulcreations.com/resources/design/i/colorbyvalue.gif

Il s'agit des premiers codes dans chaque case. Par exemple, pour le blanc, c'est représenté par FFFFFF.
Le code sera donc : background-color: #FFFFFF

[Vanaxo]

Hou la la, c'est un peu la panique là .... les boutons ça va, les smiley aussi,  l'écriture aussi tout est top j'aimerais juste que les réponses rapide et normales  aille avec la couleur du forum. Mais je ne sais même pas comment trouver le code couleur 

[Alpha.44]

Je peux avoir la couleur que tu souhaites s'il te plait ? (: Et je te l'intègre au code. ^^

[Vanaxo]

AH et si j'attend un peu, il y aura peut-être la possibilité de le faire normalement via le panneau admin en cochant des couleurs aux bons endroits ? 

Car là j'ai trop peur de mettre le nez la dedans....

[Vanaxo]

Oui bien sur la couleur est celle là ( avant que ce soit blanc ) : 

[Alpha.44]

Voici :
(Normalement c'est bon)

Code:

/*--- Bloc réponse rapide ---*/
 
.sceditor-container.ltr.sourceMode {width:550px !important; background-color: #235061 !important;}
.sceditor-container.ltr.wysiwygMode {width:550px !important; background-color: #235061 !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: #235061 !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;}

Cela dit, il manque encore quelques couleurs ; couleur du texte (que tu peux me donner si tu veux pour que je complète), idem pour les boutons, si tu souhaites modifier la couleur de ces derniers. Pareil pour la couleur du fond, derrière les boutons. (:

Je ne sais pas du tout s'il y aura la possibilité de modifier plus simplement que par la feuille CSS, mais n'hésite pas à demander si jamais ; ma boîte MP est ouverte. (:

[Djlc.Discomobile]

honteux cette modération de tout nos messages en plus de pas etre compétant de mauvaise fois a présent

[MlleAlys]

honteux cette modération de tout nos messages en plus de pas etre compétant de mauvaise fois a présent

Bonsoir,
Ce sujet a été ouvert pour aider les membres ayant des problèmes avec l'apparence de leur éditeur, si ce n'est pas pour traiter de ce sujet, alors vous n'avez sans doute pas posté au bon endroit...
merci

(et je préviens de suite, au cas où, que je ne continuerai pas cette discussion)

[Djlc.Discomobile]

oui patronne

[Vanaxo]

honteux cette modération de tout nos messages en plus de pas etre compétant de mauvaise fois a présent

S'il vous plait, c'est vraiment aimable ce que vous dites. Ils font tout pour nous aider! 

Facile de critiquer, vous pensez sincèrement que cette situation les amuse !?!? 

Alpha 44 merci bcp !!! Vous êtes un vrai rayon de soleil dans cette tempête !!

regardez comme ça va mieux!!


Je voudrais bien que la barre ou il y a les boutons soit aussi dans le ton du forum mais du coup avec cette couleur ?


Après je vous fiche la paix

[Alpha.44]

Merci Vanaxo, c'est adorable.

Aucun souci ! ^^ Contente que ça aille mieux. (:

Est-ce que je peux aussi avoir la couleur du texte souhaitée lorsque vous écrirez dans la zone de saisie ? Dans le code donné, il me manque le code couleur et j'aimerais l'intégrer pour qu'il soit complet. (:

Concernant les boutons, on les laisse en gris ?

[sophb]

Bonsoir,

Comment fait-on pour intégré une police de caractère qui n'existe pas dans le nouvel éditeur ? ...... et de même, supprimer des polices de caractères qui sont en surplus ?

Merci

[Alpha.44]

Vanaxo, voici le code :

Code:

/*--- Bloc réponse rapide ---*/
 
.sceditor-container.ltr.sourceMode {width:550px !important; background-color: #235061 !important;}
.sceditor-container.ltr.wysiwygMode {width:550px !important; background-color: #235061 !important;}
 
/*---  Partie supérieur contenant les outils ---*/
 
div.sceditor-toolbar {
background-color: #47A3C4 !important;
width: 540px !important;
}
 
/*---  Partie texte area : fond ---*/
 
.sceditor-container iframe, .sceditor-container textarea {
background-color: #235061 !important;
text-align:justify;
margin:0 !important;
line-height: 16px;
width: 540px !important;
color: #99C9DB !important;
font-size:11px !important;
}
 
/*---  Groupe de boutons ---*/
 
div.sceditor-group {
background-color: #B8DAE7 !important; }
 
/*---  Boutons ---*/
 
a.sceditor-button {
}
 
/*---  Boutons sélectionnés ---*/
 
a.sceditor-button.hover {
background-color: #FFFFFF !important;
}
 
/*---  Smileys ---*/
 
.sceditor-emoticons {width: 350px !important; height: 250px !important; overflow: auto !important;}
img.smiley {width: auto !important; height : auto !important;}

Dites-moi si les couleurs vous conviennent. (:

[Vanaxo]

Ah non moi j'ai rien fait, c'est juste vous prenez sur votre temps pour aider les autres, pendant que certains n'aiment que râler....

ALors nous écrivons en blanc normalement, sauf si ça embête pour écrire dans l'espace de conexion, car blanc sur blanc c'est pas top ...


Si ça n'embête pas pour l'encar de connexion alors oui je veux bien l'écriture en blanc svp. 
Les boutons eux, vous pouveu les mettre en bleu aussi si c'est possible le clair ou le foncé comme vous désirez.

[Alpha.44]

Bonsoir,

Comment fait-on pour intégré une police de caractère qui n'existe pas dans le nouvel éditeur ? ...... et de même, supprimer des polices de caractères qui sont en surplus ?

Merci

Bonsoir,

Vous souhaitez intégrer votre police à l'éditeur en lui-même, le bouton ? Ou bien changer la police lorsque vous écrivez ?

[Vanaxo]

Avant que je le fasse, dois-je effacer ce que j'ai collé avant ou je met a la suite ? 

[Alpha.44]

Ah non moi j'ai rien fait, c'est juste vous prenez sur votre temps pour aider les autres, pendant que certains n'aiment que râler....

ALors nous écrivons en blanc normalement, sauf si ça embête pour écrire dans l'espace de conexion, car blanc sur blanc c'est pas top ...


Si ça n'embête pas pour l'encar de connexion alors oui je veux bien l'écriture en blanc svp. 
Les boutons eux, vous pouveu les mettre en bleu aussi si c'est possible le clair ou le foncé comme vous désirez.

Il y aura toujours des mécontents. (a)

Avant que je le fasse, dois-je effacer ce que j'ai collé avant ou je met a la suite ? 

Oui, faut modifier le tout par le code que j'ai donné en dernier. Si la couleur ne convient pas, je modifierai ensuite, idem pour la couleur de texte que j'ai mis en bleu lorsque c'est en mode "source" (lorsque l'icône feuille cornée est activée).

[Vanaxo]

C'est top !!!! Juste l'écriture blanche au lieu de noire si possible ? A moins que ça gêne pour l'encart de connexion ? 

[Eveanelle]

Bonjour !

Est-ce que quelqu'un a essayé le Javascript fourni par MlleAlys ? (merci à toi d'ailleurs si tu es dans le coin ^^)

Car chez moi cela ne fonctionne pas, la couleur de police en WYSIWYG est toujours en noir sur noir donc invisible.. Tous mes membres sont passé en mode code source donc ce n'est pas trop grave mais ça fait pas très sérieux disons... Une solution ?

J'ai copié collé le code fourni tel quel, j'ai bien activé le javascript et j'ai mis sur toutes les pages. Je pige pas ce qui cloche, il marche chez les autres ?

[Alpha.44]

*-*

L'écriture noire lorsque la feuille cornée (l'icône dans la barre d'icônes, la dernière icône) est décochée ?

Alors, en revanche, si c'est ça, ça ne fonctionne pas dans le CSS. Ca marche dans le Javascript ! Un sujet avait été ouvert, avec le code, je peux te le retrouver si tu veux. (:

[MlleAlys]

Bonjour !

Est-ce que quelqu'un a essayé le Javascript fourni par MlleAlys ? (merci à toi d'ailleurs si tu es dans le coin ^^)

Car chez moi cela ne fonctionne pas, la couleur de police en WYSIWYG est toujours en noir sur noir donc invisible.. Tous mes membres sont passé en mode code source donc ce n'est pas trop grave mais ça fait pas très sérieux disons... Une solution ?

J'ai copié collé le code fourni tel quel, j'ai bien activé le javascript et j'ai mis sur toutes les pages. Je pige pas ce qui cloche, il marche chez les autres ?

Il fonctionne bien chez moi (il n'est pas de moi), et il me semble que je n'avais eu pour l'instant que des retours positifs... ^^"

As-tu bien remplacé, dans le code javascript, CODE COUELUR ICI par le code de ta couleur ? ^^"

Sinon, un autre code avait été fourni dans ce sujet, que j'avais essayé mais qui chez moi ne fonctionnait pas mieux que le premier, que j'ai donc gardé...
Mais il faudrait retrouver le message...
Si le problème avec ce premier code se répète, je l'enlèverai

(en attendant je pars à la pêche au code xD)

ah, voilà l'autre ! =D https://forum.forumactif.com/t352532p330-topic-unique-apparence-du-nouvel-editeur-de-messages#3003828

[magiephotofiltre]

merci ,mais je prend quel code ?

[Alpha.44]

merci ,mais je prend quel code ?

https://forum.forumactif.com/t352532p210-topic-unique-apparence-du-nouvel-editeur-de-messages#3003323

[Albert1942]

bonsoir

je n'ose même pas posé de questions tellement il y en a déjà eu, et de peur que ma question reste sans réponse

Le changement c'est maintenant (qu'on disait il y a un an, et on s'en mort les doigts maintenant)

à quand le retour en arrière ????
pas dans 4 ans quand même:cry:

[Albert1942]

et même ici les smileys merdouillent

[MlleAlys]

merci ,mais je prend quel code ?

Concernant la couleur de la police en mode wysiwyg ? tu peux essayer le premier, et s'il ne fonctionne pas le deuxième... ^^"