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

[Sophi@]

Hello,

Comme tout le monde, j'ai vu la mise à jour, j'ai été voir enfin plutôt sauté de sujet en sujet ici. Et j'ai essayé les codes et tout au mieux je suis parvenue à faire ceci:
http://bloodandpleasure.forumactif.com/post?f=84&mode=newtopic
Comme vous le voyez les boutons restent blanc alors que j'aurais aimé qu'ils soient en gris foncé #080808, le cadre est carré alors que j'aurais aimé qu'il soit arrondis. Mais le gros soucis est que le texte est super gros, pire quand on passe au mode wysiwyg on a un gros carré blanc tout moche.

Voici mon CSS si quelqu'un a une illumination qui pourrait m'aider.

Code:

/*nouvel éditeur barre du haut*/
div.sceditor-toolbar{
background-color: #000 !important;
text-align: center!important;
 border: solid 4px #131313 !important;
margin:-2px !important;
moz-border-radius: 10px ;!important;}
 
/*nouvel éditeur textarea*/
.sceditor-container iframe, .sceditor-container textarea{
background-color:#080808 !important;
border: solid 4px #131313 !important;
color:#666666 !important;
margin:-5px !important; }
 
/*nouvel éditeur gp bouton*/
div.sceditor-group{
background-color:#000 !important;
border: solid 1px #131313 !important;}
 
.sceditor-container.ltr.wysiwygMode {
border: solid 1px #131313 ;
background-color:#000 !important;
width:95% !important;}
 
.sceditor-container.ltr.sourceMode{
border: solid 1px #131313 ;
background-color:#000 !important;
width:95% !important;}
 
/* Permettre d'avoir des smileys  à la bonne taille */
.sceditor-emoticons {width: 250px !important; height: 250px !important; overflow: auto !important;}
img.smiley {width: auto !important; height : auto !important;}
 
a.sceditor-button.hover
{background-color:#111111 wysiwyg  !important;}

Je m'autocite puisque mon message semble ne pas avoir été lu.

Et au passage, je tenais quand même à dire que cette mise à jour est quand même profondément casse noisette, ça fait des heures voire des journées qu'on est dessus à tenter de changer les couleurs. Mettez au moins le codage avec le !important; sur le codage donné dans l'annonce!

[mustang]

Avec toutes mes excuses mais je ne connais strictement rien dans les code et le CSS

pour l'image je mais bien http://

Quand je fait basculer le mode d'édition j'arrive à mettre une image, mais avec le bouton insérer une image j'ai une croix rouge

Voici L'URL de mon forum http://autos-prestige.bbgraf.com

[Alpha.44]

Bonjour Sophi@,

Pour moi, les boutons sont en gris. Ils sont en blanc lorsqu'ils sont sélectionnés. C'est lorsqu'ils sont sélectionnés que ça pose souci ?

Vous souhaitez votre fond avec quelle couleur ? Je peux avoir le code couleur ?
Le texte en quelle couleur ? Il se modifiera uniquement en mode source. En quelle taille aussi ?

mustang : lorsque vous insérer votre image, vous supprimez le « http » qui est là par défaut ? Si ça se trouve, vous le laissez, ce qui fait un code non valide.

[Laïka Dunkel]

Spoiler:

Un grand merci pour avoir pris le temps de ce tuto détaillé

J'ai essayé sur le premier de mes forums, je pense être arrivée à quelque chose!

[Alpha.44]

Laïka Dunkel : de rien, je suis ravie que ça t'ait aidé !

[Amallia]

Adèle, je vais essayer de t'aider, comme les autres m'ont beaucoup aidé

Alors pour ma part, une de mes feuilles css a cette forme là (pour trouver ta feuille css, tu vas dans le panneau, ensuite dans affichage, puis couleur et tu as la feuille css. Pour les couleurs, tu peux prendre directement les codes que tu as choisi dans l'onglet couleur

Code:

/*nouvel éditeur barre du haut*/
div.sceditor-toolbar{
background-color: #COULEUR DU FOND DE LA TOOLBAR A METTRE ICI !important;
text-align: center!important; /* là, je centre les boutons pour que ce soit plus jolie */
 border: solid 1px #00000 !important; /* là je mets un cadre de 1px de largeur et de couleur noir */
margin:-2px !important; /* là je réduis la marge pour un côté plus esthétique */}

/*nouvel éditeur textarea*/
.sceditor-container iframe, .sceditor-container textarea{
background-color:#COULEUR DE FOND DE LA SAISI DES MESSAGES !important;
border: solid 1px #000 !important; /* toujours un cadre */
color:#COULEUR DU TEXTE !important; /* là c'est la couleur de ton texte dans la boite de dialogue */
margin:-5px !important; /* là encore j'enlève de la marge pour que ce soit plus jolie */}

/*nouvel éditeur gp bouton*/
div.sceditor-group{
background-color:#COULEUR DE FOND JUSTE EN DESSOUS DES BOUTONS !important;
border: solid 1px #000 !important;}

.sceditor-container.ltr.wysiwygMode {
border: solid 1px #000 ;
background-color:#COULEUR DE FOND DE LA SORTE DE BORDURE BLANCHE !important;
width:95% !important;}

.sceditor-container.ltr.sourceMode{
border: solid 1px #000 ;
background-color:#COULEUR DE FOND !important;
width:95% !important;}

/* Permettre d'avoir des smileys  à la bonne taille */
.sceditor-emoticons {width: 250px !important; height: 250px !important; overflow: auto !important;}
img.smiley {width: auto !important; height : auto !important;}

a.sceditor-button.hover
{background-color:#COULEUR DE FOND DU BOUTON QUI INDIQUE QUE L'ON EST PAS EN MODE wysiwyg  !important;}

Merci pour ce code, j'ai pu personnalisé un peu ce truc et le faire fondre au design du forum.

Bonjour, depuis la dernière mise à jour, sur mon forum la barre de mise en forme à complètement disparue:

Spoiler:

J'ai bien lu votre topic: https://forum.forumactif.com/t352401-nouvel-editeur-de-messages-pour-les-forums-forumactif

Et j'ai donc vérifié mes templates ( j'ai une version phbb2 )
L'ennuie c'est que ceux-ci sont à jour et je ne vois pas d'où peut provenir mon problème.

Merci d'avance.

Est-ce que ce problème va être réglé prochainement ?

[lilimorgane]

Si je peux me permettre une remarque, pourquoi avoir ajouter au nouvel éditeur autant de boutons qui ne servent à rien  ? Comme la date, l'heure, ect... Je ne sais meme pas ce qu'est le wow et à quoi sert le "formatage du texte".....Enfin peut etre que pour certains ca aura son utilité mais en attendant ca surcharge beaucoup la barre... N'y a t'il pas une possibilité de paramétrer les boutons qu'on souhaite en plus ou en moins comme pour la barre de navigation (avec une base non modifiable bien sur)?

[Jervis]

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

Et ceux qui ont le truc Wyswig
ça peut marcher ou non ?

[Lixyr]

Tu parles de quoi Jervis ?

[Alpha.44]

lilimorgane : il y a possibilité de cacher des icônes :

https://forum.forumactif.com/t352532-topic-uniqueapparence-du-nouvel-editeur-de-messages#3002396

La réponse a été donné dans ce post.

Jervis : oui, bien sûr. (:

[Jervis]

Bon je vais tenter quelque chose, je reviendrais avec un screen.

[-Light]

Bonjour,


Etat de l'édition d'un message sur mon forum hier, avant modification des templates.


Etat de l'édition d'un message sur mon forum aujourd'hui, après modification des templates selon ce tutoriel.

Comme vous pouvez le constater, le BBCode de mon forum phpBB2 n'apparaissait plus, en partie... Et cliquer sur le seul bouton apparaissant ("Basculer le mode d'édition") n'avait pas d'effet. Avant la mise à jour, il n'y avait aucun problème.

Aujourd'hui, j'ai suivi le tutoriel pour phpBB2 indiqué sur le lien, et c'est encore pire puisque l'espace consacré au BB2 n'existe plus et que, je ne sais pourquoi, la hauteur par défaut du champ de texte s'est considérablement réduite.
Voilà voilà, que suis-je censé faire ?

[Alpha.44]

-Light : tes deux templates étaient bien modifiés ?
Moi j'avais deux scripts seulement dedans, donc j'ai supprimé les deux templates pour les mettre par défaut ; depuis, tout est OK.

[Jervis]

Comme toujours, le fond de la police est noir.
Cela rend quand même un peu mieux. Le bloc a l'air plus classe sans l'épaisse couche de blanc
Mais la police, toujours ce probleme

Voila mon CSS

Code:

        /*--- Bloc réponse rapide ---*/
        
        .sceditor-container.ltr.sourceMode {width:650px !important; background-color: #000000 !important;}
        .sceditor-container.ltr.wysiwygMode {width:650px !important; background-color: #000000 !important;}
        
        /*---  Partie supérieur contenant les outils ---*/
        
        div.sceditor-toolbar {
        background-color: #000000 !important;
        width: 540px !important;
        }
        
        /*---  Partie texte area : fond ---*/
        
        .sceditor-container iframe, .sceditor-container textarea {
        background-color: #000000 !important;
        text-align:justify;
        margin:0 !important;
        line-height: 16px;
        width: 540px !important;
        color: #FFFFFF !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;}
         

[Alpha.44]

Jervis : C'est la police en mode "wysiwygMode" ?

Si oui, par défaut, le texte est en noir, je n'ai pas réussi à la modifier, mais les users peuvent le faire d'eux-même en personnalisant avec l'icône couleur, taille et police ; ils verront automatiquement les changements, puisqu'ils voient la mise en page qu'ils veulent en direct.

[Cricridu89]

Bonjour

Comment revenir à l'ancienne version s'il vous plait?
Pas pratique (avis des membres et moi-même)

[Lixyr]

Moi, ma police par défaut en mode WYSIWYG n'est pas noire mais kaki foncé.

[Jervis]

C'est un peu lourd quand même :/

autre soucis



Y'a un moyen pour déterminer ou montrer qu'il y'a une fin ? Parce que le creux noir fait un peu trop vide à mon gout :/

[Daisuke-Aniki]

Bonjour,
Ayant mon template de réponse personnalisé,l'apparition de ce nouvel éditeur est assez casse noisette, on nous l'impose sans nous demander notre avis ni la possibilité de revenir en arrière, mais là n'est pas le soucis.

Voila le soucis, un éditeur qui sort de mon code, et en plus qui est blanc donc totalement inesthétique au milieu de tout cela, j'aimerais donc pouvoir le rétrécir, le mettre en noir et si possible lui mettre des bords arrondis.
Merci d'avance pour votre aide.

[-Light]

-Light : tes deux templates étaient bien modifiés ?
Moi j'avais deux scripts seulement dedans, donc j'ai supprimé les deux templates pour les mettre par défaut ; depuis, tout est OK.

Oui, j'ai supprimé le template posting_body pour mettre la valeur par défaut, et c'est le même résultat que sur le screenshot que j'ai transmis.

[Alpha.44]

Moi, ma police par défaut en mode WYSIWYG n'est pas noire mais kaki foncé.

Va falloir que tu me dises comment tu as fait. (a)

Jervis, je ne vois pas ce que tu veux dire. :-/

[Lixyr]

Jervis, pour ça :

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.

[Jervis]

Lixyr > Je dois les rajouter ou dans mon CSS ?

[Lixyr]

Et bien tu regardes si tu n'as pas déjà mis les deux classes 

.sceditor-container.ltr.sourceMode

.sceditor-container.ltr.wysiwygMode

Si c'est le cas tu le mets dans la classe correspondante, sinon tu mets à la suite.

[MlleAlys]

j'aimerais donc pouvoir le rétrécir, le mettre en noir et si possible lui mettre des bords arrondis.

Etes vous allé voir ici : https://forum.forumactif.com/t352532-topic-uniqueapparence-du-nouvel-editeur-de-messages#3002396 (au moins pour la couleur, après si tu t'y connais un peu en css ça devrait aller, sinon si vous avez des ennuis... revenez par ici ! xD)

[Daisuke-Aniki]

j'aimerais donc pouvoir le rétrécir, le mettre en noir et si possible lui mettre des bords arrondis.

Etes vous allé voir ici : https://forum.forumactif.com/t352532-topic-uniqueapparence-du-nouvel-editeur-de-messages#3002396 (au moins pour la couleur, après si tu t'y connais un peu en css ça devrait aller, sinon si vous avez des ennuis... revenez par ici ! xD)

Merci Mlle Alys je vais aller voir ça et je reviens vous tenir au courant

[Lixyr]

Moi, ma police par défaut en mode WYSIWYG n'est pas noire mais kaki foncé.

Va falloir que tu me dises comment tu as fait. (a)

Jervis, je ne vois pas ce que tu veux dire. :-/

Baaaah en fait, mon forum est vert, donc ça fait un peu kaki, mais je viens de vérifier, non j'ai le même noir #111111 que vous.

[lilimorgane]

lilimorgane : il y a possibilité de cacher des icônes :

https://forum.forumactif.com/t352532-topic-uniqueapparence-du-nouvel-editeur-de-messages#3002396

La réponse a été donné dans ce post.

merci je n'avais pas vu mais c'est du CSS et je ne veux pas en faire car lors des MAJ de FDF, gros bazard, la preuve... Et puis s'il faut commencer à bidouiller nous meme, autant créer son propre forum, si on prend un hébergeur, c'est pour avoir du (presque) clé en main. Ce que je vousdrais, c'est qu'on ait la possibilité de choisir par paramétrage comme pour la barre de navigation.

[Alpha.44]

Oh, attention, Jervis a bien les codes dans son CSS !

Code:

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

Attention à ne pas faire doublon.

[fofie]

c´était vraiment pas nécessaire ce nouveau machin,c´est pas en "innovant" a la hate qu´on fait avancer une chose,parfois l´ancien est mieux.pas tous s´y connaissent dans les codes.

la meilleure c´est de ne pas être alerté et mis devant le fait accomplit.

peut on SVP avoir le choix de revenir a l´ancien,les gens bloquent devant cette nouvelle créature !!