[Topic Unique] Apparence du nouvel éditeur de messages

[marginal]

Rappel du premier message :

MlleAlys...  SVP, ne vous sous-estimez pas.   Sérieux...  la solution proposée a réglé 50 % des problèmes...  incroyable ! MÉGA MERCI !

Il ne reste que les modifications inopérantes en mode WYSIWYG.  Est-ce que ca pourrait venir de Linux ???

en même temps, je n'aurais pas fait cette bête erreur de virgule, ça aurait fonctionné dès le début ><"

les commandes du clavier répondent bien chez moi, sur ce forum comme sur le votre...
(enfin, si j'ai bien compris de quoi il s'agissait ^^")

EDIT : SeLfde4Th7, ce code, c'est pour les espaces avant et après la citation... est ce que c'est de ça qu'on parle ? (j'aurais encore mal compris ? xD

Même ici, je suis pas capable d'utiliser les flèches, le backspace et le delete.....   fonctionne pas en mode WYSIWYG.  

Dis, mlleAlys,  Tu es ou sur la planète... je t'en doit une...  sérieux !  

Martin

alleluya !!!!!!!!!!!!  Toutes les fenêtres peu importe le mode sont de même couleur !!!  

J'ai aucune idée quel code a fait ca mais MelleAlys... vous avez fait le travail !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!  MERCI !

c'était donc bien cette fichue petite virgule qui gâtait tout le code ! ><"

Maintenant le seul soucy qu'il me reste, c'est qu'en mode WYSIWYG, les flèches, le back space, et la touche delete ne fonctionnent pas...

Des idées ?  

Euh... c'est à dire ? ^^"
(mais j'ai bien peur que non =S)

[Elfwyn]

Pardon mais ton code ne marche pas, sinon montre-moi pour mettre juste "Georgia" please ^^

[MlleAlys]

Pardon mais ton code ne marche pas, sinon montre-moi pour mettre juste "Georgia" please ^^

normalement Georgia est déjà dans la liste des polices de l'éditeur, non ? Oo c'est la 5ème de la liste...
Ou bien voulais tu dire en faire la police d'écriture par défaut de l'éditeur ?

[Elfwyn]

Oui c'est bien ça, en faire la police par défaut. J'aime cette police, et il n'y a quelle qui va avec le design du forum, donc zut à l'arial !

[-Méphisto-]

Non, j'avais des polices d'écriture personnalisée, mais le nouvel éditeur a détruit toutes ces personnalisations. Ce que tu vois écrit n'est pas tapé dans la fenêtre d'écriture : je l'ai simplement ajouté avec paint sur l'image de la capture d'écran.

Mais la prochaine étape sera aussi de remettre mes polices d'écriture personnalisées, si c'est possible ... Je souhaite régler chaque problème causé par ce changement l'un après l'autre. Long is the road.

Pour ajouter des polices, tu peux utiliser ce script (merci Ea ! ^^) :
- Allez dans Modules > gestion des codes javascript
- vérifiez que la gestion des codes est bien cochée sur "OUI"
- créez un nouveau code
- donnez lui un nom ("polices éditeur" par exemple)
- cochez "sur toutes les pages"
- collez ce code dans la zone de saisie et modifiez la liste des polices (en les séparant par une virgule) :

Code:

$(function(){
 
 $.sceditor.defaultOptions.fonts= 'Arial,Arial Black,Comic Sans MS,Courier New,Georgia,Impact,Sans-serif,Serif,Times New Roman,Trebuchet MS,Verdana';
 
});


-validez !

Merci beaucoup MlleAlys

[MlleAlys]

Oui c'est bien ça, en faire la police par défaut. J'aime cette police, et il n'y a quelle qui va avec le design du forum, donc zut à l'arial !

Alors, dans le mode source, c'est via le css :

Code:

.sceditor-container textarea {
    font-family: georgia !important;
}

et pour le mode wysiwyg, c'est via le javascript de mise en forme, que tu as utilisé non ? Ajoute
font-family: georgia;
dans la balise du body, et voit si ça le met partout, ou si tu dois aussi ajouter cette ligne dans les codes et citations ^^
(si ça ne fonctionne pas, redonne moi ton code javascript s'il te plait ^^")

[AldoMasta]

Oui c'est bien ça, en faire la police par défaut. J'aime cette police, et il n'y a quelle qui va avec le design du forum, donc zut à l'arial !

Alors, dans le mode source, c'est via le css :

Code:

.sceditor-container textarea {
    font-family: georgia !important;
}

et pour le mode wysiwyg, c'est via le javascript de mise en forme, que tu as utilisé non ? Ajoute
font-family: georgia;
dans la balise du body, et voit si ça le met partout, ou si tu dois aussi ajouter cette ligne dans les codes et citations ^^
(si ça ne fonctionne pas, redonne moi ton code javascript s'il te plait ^^")

Alors résumé bilan de ces formules sur mon éditeur de messages:

-ajout dans le css:

Spoiler:

Fonctionne bien pour le mode d'edition "à l'ancienne", police personnalisée qui apparait.

-Création du javascript:

Spoiler:

Ne fonctionne pas dans le mode WYSIWYG, police arial de base affichée!

Mais je n'ai peut-être pas compris cette phrase et n'ai peut-être pas placé le "font-family" comme il faut:

Ajoute
font-family: georgia;
dans la balise du body

-Une solution pour que la police fonctionne aussi en mode WYSIWYG?
-Une solution pour changer la couleur de base de la police de l'éditeur en mode WYSIWYG?

Merci d'avance et désolé de t'ennuyer!

[-Méphisto-]

Pas d'urgence bien sûr, mais j'aimerais juste savoir si ces trois problèmes signalés seront traités directement par forum actif, qui a peut-être mis cela dans son planning pour tous les forums ou s'il faut se débrouiller individuellement ici pour trouver et installer des codes ? 

Up. C'est juste pour être fixé

[Elfwyn]

Bonjour,

Félicitations Melle zèbre coloré, tu as résolu mon souci de police, et ça fait là un sacré poids en moins merci beaucoup. En fait mon CSS improvisé était bon à la base, juste que j'oubliais le "family" xD. Par ailleurs si tu avais la solution à ceci au passage...

Je t'en saurais gré ^^

Mais je n'ai peut-être pas compris cette phrase et n'ai peut-être pas placé le "font-family" comme il faut:

Ajoute
font-family: georgia;
dans la balise du body

-Une solution pour que la police fonctionne aussi en mode WYSIWYG?
-Une solution pour changer la couleur de base de la police de l'éditeur en mode WYSIWYG?

Merci d'avance et désolé de t'ennuyer!

Permets-moi de te donner à mon tour la solution en ce cas ^^

Code:

$(function(){ $(function() {
          $('.sceditor-container iframe').contents().find('head').append('<style type="text/css">
body, p {
    background: #000000; /*couleur de fond de la zone de saisie*/
    font-family: georgia;  
    color: #bababa;  /*couleur de la police dans la zone de saisie*/
}
blockquote, blockquote cite, code {
    background-color: #000000;  /*couleur de fond des citations et codes*/
    color: #ffffff; /*couleur de la police dans les citations et les codes*/
    border: 1px solid #cccccc; /*bordure des citations et codes*/
}
code:before {
    color: #ffffff;  /*couleur du mot -code-*/
}
</style>')
        })});

Ca c'est le Javascript à placer de façon à pouvoir personnaliser la zone WYSIWYG. Tu n'as cas copier/coller celui là et arranger les couleurs et polices selon ta convenance. Ou alors, auquel cas tu te repères dans cette purée de pois, il te suffit de placer...

Code:

font-family: TA POLICE;

À la suite de...

Code:

$(function(){ $(function() {
          $('.sceditor-container iframe').contents().find('head').append('<style type="text/css">
body, p {

En gardant tout le reste qui suit bien sûr, une fois ceci fait.

Bien à toi, Elfwyn.

[AldoMasta]

Fonctionne, et permet de parametrer pas mal de choses dans le Mode WYSIWYG!
Merci pour cette aide précieuse!

[MlleAlys]

Bonjour,

Félicitations Melle zèbre coloré, tu as résolu mon souci de police, et ça fait là un sacré poids en moins merci beaucoup. En fait mon CSS improvisé était bon à la base, juste que j'oubliais le "family" xD. Par ailleurs si tu avais la solution à ceci au passage...

Je t'en saurais gré ^^

Aurais tu un lien vers un forum ouvert aux invités s'il te plait ? ^^"

[Félina13]

Bonjour,

De mon côté, j'ai remarqué que pour les réponses rapides, c'est nickel (rien à redire).

Mais à la création de message, y'a un soucis. Sur Firefox, mon forum étant en version phpbb2 et les dernières modifications liés à l'apparence du nouvel éditeur de messages ont été effectuées... je me suis rendue compte que pour l'aperçu de l'éditeur (fond blanc) pourrait facilement prêter à confusion pour les non initiés aux forums, et ils pourraient croire que leur message ne se font plus ! Car au  lieu d'écrire juste dans le carré du dessous, ils pourraient écrire que dans le 1er carré et donc penser qu'ils ne peuvent plus écrire leurs messages, car après avoir cliqué sur envoyé si on écrit que dans le "fond blanc", alors tout disparait et le message ne se fait pas...

(j'espère avoir été clair dans mes explications)

merci pour tout, et à bientot

bonjour,

Je me permets un petit up sans réponse à mon message... merci

[MlleAlys]

Je me suis rendue compte que pour l'aperçu de l'éditeur (fond blanc) pourrait facilement prêter à confusion pour les non initiés aux forums, et ils pourraient croire que leur message ne se font plus ! Car au  lieu d'écrire juste dans le carré du dessous, ils pourraient écrire que dans le 1er carré et donc penser qu'ils ne peuvent plus écrire leurs messages, car après avoir cliqué sur envoyé si on écrit que dans le "fond blanc", alors tout disparait et le message ne se fait pas...

(j'espère avoir été clair dans mes explications)

heu... non en fait, je n'ai pas bien compris... =S
Tu souhaites changer la couleur de fond de la zone de texte de l'éditeur ?

[Elfwyn]

Bonjour,

Félicitations Melle zèbre coloré, tu as résolu mon souci de police, et ça fait là un sacré poids en moins merci beaucoup. En fait mon CSS improvisé était bon à la base, juste que j'oubliais le "family" xD. Par ailleurs si tu avais la solution à ceci au passage...

Je t'en saurais gré ^^

Aurais tu un lien vers un forum ouvert aux invités s'il te plait ? ^^"

Ce n'est plus guère utile, j'ai résolu mon problème comme un grand, t'as vu ça xD. Voici le rendu et je mettrais la solution ensuite...

Le procédé...

• Intégrer le CSS suivant...
  

Code:

.forumline .row1, .forumline .row2, .forumline .row3, .forumline .row3Right {
            height: 10px;
        }

.gensmall .row1 {
  height: 290px !important;
}

Cela redimensionnera votre boite à smiley sur sa hauteur. Vous aurez juste à régler les pixels selon vos goûts. Vous pouvez faire de même avec la largeur en ajoutant (width: DIMENSIONpx !important;)

Walà walà ^^

[MlleAlys]

Le procédé...

• Intégrer le CSS suivant...
  

Code:

.forumline .row1, .forumline .row2, .forumline .row3, .forumline .row3Right {
            height: 10px;
        }

.gensmall .row1 {
  height: 290px !important;
}

Cela redimensionnera votre boite à smiley sur sa hauteur. Vous aurez juste à régler les pixels selon vos goûts. Vous pouvez faire de même avec la largeur en ajoutant (width: DIMENSIONpx !important;)

Walà walà ^^

Bravo !
Mais tu ne voulais pas te débarrasser de la barre blanche aussi ?
Et à quoi correspond exactement

Code:

.forumline .row1, .forumline .row2, .forumline .row3, .forumline .row3Right {
    height: 10px;
}

? ça ne te change rien d'autre sur ton index ou autre par contre ? (ce n'est peut être pas le cas hein, j'essaye juste de comprendre xD)

[Elfwyn]

Ha oui... pas fait attention, ce code ne sert à rien xD. J'étais presque convaincu qu'il servait de base à l'autre, mais bref. Quant à la barre blanche, c'est moi qui l'ai mis sur l'image pour que vous puissiez voir xD

Si tu veux voir l'effet de ce code, met la valeur à 500 PX, tu seras fixée

[MlleAlys]

sinon, pour changer la taille de boite des smileys et être certains de ne toucher qu'à cela, tu peux utiliser ce code là :

Code:

#smileyContainer iframe {
    height: 290px;
}

Parce que, mine de rien, les classes .forumline, .row1/2/3 et .gensmall sont utilisées à de nombreux endroits =S ... Alors qu'en utilisant l'Id #smileyContainer tu es certain de ne toucher qu'à cet élément là ^^

[-Méphisto-]

Ce code, c'est pour le css, le java ? 
Il n'agit que sur la taille boite smiley ?

Sur la capture de Elfwyn, on voit en plus que l'espace vide en dessous de l'éditeur a enfin disparu, mais à la base ce bug n'a pas de rapport avec le cadre des smileys. Faut-il donc utiliser un autre code encore pour que cet espace disparaisse ?

[Elfwyn]

Ce code, c'est pour le css, le java ? 
Il n'agit que sur la taille boite smiley ?

Sur la capture de Elfwyn, on voit en plus que l'espace vide en dessous de l'éditeur a enfin disparu, mais à la base ce bug n'a pas de rapport avec le cadre des smileys. Faut-il donc utiliser un autre code encore pour que cet espace disparaisse ?

C'est un code CSS, et si, je t'assure que ça vient bien de là, et après vérification, oui on sait jamais avec les codes qui aiment les caprices. Met ce code là...

Code:

#smileyContainer iframe {
    height: 290px;
}

Tu vas voir ça règle tout ^^

[-Méphisto-]

J'ai collé le code et j'ai ceci comme réponse :

Erreur détectée
Nous avons compté un nombre impaire de guillemets donc une chaine est mal fermée. Cela signifie que votre CSS risque de ne pas être valide et ne sera pas affiché correctement sur votre forum.

Nous vous conseillons de relire votre code.

[-Méphisto-]

Cela venait sans doute du fait que j'ai écrit juste avant à quoi servait le code que j'ajoutais.
Mon commentaire était en vert sauf un mot qui s'est mis en rouge. Je l'ai enlevé et le code a été accepté ... mais sans résultat

[-Méphisto-]

[MlleAlys]

sinon, pour changer la taille de boite des smileys tu peux utiliser ce code là :

Code:

#smileyContainer iframe {
    height: 290px;
}

Ce code, c'est pour le css, le java ? 
Il n'agit que sur la taille boite smiley ?

Sur la capture de Elfwyn, on voit en plus que l'espace vide en dessous de l'éditeur a enfin disparu, mais à la base ce bug n'a pas de rapport avec le cadre des smileys. Faut-il donc utiliser un autre code encore pour que cet espace disparaisse ?

la hauteur de la cellule est la même que celle des smileys, et c'est cette dernière qui la plus grande à cause de la boite des smileys. en diminuant la taille de la boite des smileys, on diminue la taille des deux cellules, et donc l'espace sous l'éditeur ^^

[quote="-Méphisto-"]J'ai collé le code et j'ai ceci comme réponse :

Erreur détectée
Nous avons compté un nombre impaire de guillemets donc une chaine est mal fermée. Cela signifie que votre CSS risque de ne pas être valide et ne sera pas affiché correctement sur votre forum.

Nous vous conseillons de relire votre code.

Cela venait sans doute du fait que j'ai écrit juste avant à quoi servait le code que j'ajoutais.
Mon commentaire était en vert sauf un mot qui s'est mis en rouge. Je l'ai enlevé et le code a été accepté ... mais sans résultat [/quote

les commentaires se mettent comme ceci /* commentaire */ :

Code:

/*boite des smileys*/
#smileyContainer iframe {
    height: 290px;
}

ou bien

Code:

#smileyContainer iframe {
    height: 290px;  /*hauteur boite des smileys*/
}

Tu as dû faire une mauvaise manipulation, peux tu montrer ton code css s'il te plait ? il doit manquer une accolade quelque part, ou bien certaines sont imbriquées, ou il y en a une en trop, etc ^^"

[MlleAlys]

(spoiler) -Méphisto- a écrit :

Ah, ici, je ne sais pas si on peut réduire encore l'espace sous l'éditeur, mais je vais voir.
Le code plus haut permet normalement de réduire l'espace sous les smileys.
Pour les icones, je vais voir aussi.

Pourrais tu donner le lien vers le forum ouvert aux invités s'il te plait ? ^^

[-Méphisto-]

Code:

cadre sans espace gris sous smileys et fenêtre
        #smileyContainer iframe {
            height: 290px;
        }

Voici le code à présent accepté juste pour avoir enlevé "d'écriture" après "fenêtre".

Mais ça n'a rien changé aux cadres gris toujours présents (cf les captures d'écran postées juste au-dessus)

Il faut que j'écrive un autre chiffre que 290, c'est ça ?


J'ouvre une section pour les invités :

http://cafet.1fr1.net/f76-6eme

[MlleAlys]

Les commentaires doivent être placés entre des balises /*....*/ , comme ceci :

Code:

/*cadre sans espace gris sous smileys et fenêtre*/
#smileyContainer iframe {
    height: 290px;
}

pour la hauteur tu peux mettre 192 px, mais en fait dans ton cas je crois que c'est plus simple de retirer le fond de la fenêtre plutôt ^^ :

Code:

#sceditor_smilies body {
    background: none;
}

pour les icones des messages, je ne peux pas t'aider, les icones sont dans des lignes de tableau différentes ><"

[-Méphisto-]

Merci, j'ai modifié la description de chaque code, mais ça ne l'a pas fait fonctionner pour autant.

[MlleAlys]

ça a l'air de fonctionner chez moi Oo As tu essayé de mettre des valeurs plus petites, comme 192px ?
As tu essayé le code pour retirer le fond ?

Pour l'espace qui reste sous l'éditeur, c'est un peu du bidouillage, mais tu peux essayer ce code là :

Code:

.sceditor-container.ltr.wysiwygMode {
    margin-bottom: -15px;
}

[-Méphisto-]

As tu essayé de mettre des valeurs plus petites, comme 192px ?

Je viens et ça donne cela :



Ce qui fait encore plus laid ...

As tu essayé le code pour retirer le fond ?

Heu ... non ? comment ?
C'est la raison pour laquelle j'ai demandé plusieurs fois sur ce topic si ces modifs étaient dans le planning du staff ou pas.
Parce que si c'est dans le planning, je préfère attendre que bidouiller des choses qui risquent d'en parasiter d'autres. Mais si ce n'est pas dans le planning, vu que nous sommes nombreux à rencontrer ces problèmes, c'est le moment ou jamais de se lancer une bonne fois, si ça ne sert à rien d'attendre.

Si un membre du staff peut nous éclairer ? Vaut-il mieux attendre que les techniciens s'y penchent ou vaut-il mieux chercher des solutions ?

Pour l'espace qui reste sous l'éditeur, c'est un peu du bidouillage, mais tu peux essayer ce code là :

Il n' a pas marché. En erevanche l'espace sous la fenêtre est redevenu correct (voir capture) mais suite au changement cadre smiley, qui lui n'est pas bon ...

Je vais remettre 290 mais le cadre gris va réapparaitre sous les smiley et sous l'éditeur.


C'est à désespérer ...

[MlleAlys]

Le code pour retirer le fond :

Code:

html#sceditor_smilies body {
    background: none;    /*pas de fond*/
}

Ou bien, si tu veux quand même garder une bordure :

Code:

#sceditor_smilies body {
    background: none;  /*pas de fond*/
    border: 1px solid black;    /*bordure*/
}

et tu n'es pas obligé de prendre 192 ou 290, tu peux prendre un peu plus grand que 192 histoire de ne pas avoir la barre de défilement verticale, mais un cadre gris plus petit en dessous ^^"

Et pour l'espace sous l'éditeur, oui c'est bien de celui là dont je parlais ^^"

[-Méphisto-]

Merci du fond du cœur pour tous tes conseils et tes aides précieuses.
Je vais voir ça ce soir. Je sature littéralement depuis un moment, bloqué sur cet ordi et tous ces codes. Il faut que je respire un peu (tu devrais aussi faire une pause, je ne sais pas comment tu tiens, toi et ceux qui aident sans relâche depuis un bon moment)

Grand merci encore, je revois ça ce soir à tête reposée.