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

[Alpha.44]

Merci SandyL, ça commençait à m'agacer. XD

philou46 : Dans cette partie de votre CSS :

Code:

/*---  Groupe de boutons ---*/
        
div.sceditor-group {
}

Essayez d'ajouter ceci :

Code:

text-align:center !important;

Avant le crochet qui clôture.

[MlleAlys]

Bonjour,
J'ai du rater une chose
Je voudrais centrer les icones de la barre du nouvel éditeur (comme ici) et je ne sais pas trop comment faire.
J'ai changer via le css couleurs, police, ça c'est bon, mais pour centrer les icones, je sêche.
Une idée ?
D'avance merci.
Cordialement.

Bonjour !
Essayez ça :

Code:

.sceditor-container {
  text-align: center;
}

(si vous avez déjà modifié .sceditor-container , vous pouvez juste ajouter cette ligne avec les autres à l'intérieur des accolades)

[SandyL]

Loupfred, mon message n'a pas du être assez clair. C'est gentil de vouloir nous défendre, mais stop.

[AenigmA]

Bonjour, logiquement ce doit être ainsi :

Code:

div.sceditor-toolbar {
    -moz-user-select: none;
    background: none repeat scroll 0 0 padding-box #F7F7F7;
    border-bottom: 1px solid silver;
    border-radius: 3px 3px 0 0;
    line-height: 0;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding: 3px 5px 2px;
    text-align: center;
}

[skitty.]

Je ne sais pas si quelqu'un a déjà noté le problème (un peu la flemme de tout lire xD), mais il y a des espaces superflus qui apparaissent lorsqu'on poste un message contenant du code CSS et HTML. Par exemple, voici une partie de la fiche de mon RPG avant le nouvel éditeur et la même partie de la fiche d'un membre lorsqu'elle a été postée avec le nouvel éditeur. Bon, ce n'est pas super grave, c'est juste disgracieux... Il y a un moyen d'y palier ? J'avoue que devoir tripoter le CSS ça ne me plaît pas, je trouve ça un peu exagéré, l'ancien éditeur était plus facile d'utilisation x)

[philou46]

Bonjour,
J'ai du rater une chose
Je voudrais centrer les icones de la barre du nouvel éditeur (comme ici) et je ne sais pas trop comment faire.
J'ai changer via le css couleurs, police, ça c'est bon, mais pour centrer les icones, je sêche.
Une idée ?
D'avance merci.
Cordialement.

Bonjour !
Essayez ça :

Code:

.sceditor-container {
  text-align: center;
}

(si vous avez déjà modifié .sceditor-container , vous pouvez juste ajouter cette ligne avec les autres à l'intérieur des accolades)

Merci Alpha et MlleAlys, ça fonctionne !
Cordialement.

[Albert1942]

Albert1942 :

Dans cette partie :
.sceditor-container iframe, .sceditor-container textarea {

Il faut ajouter ceci au code :

Code:

color: #000000 !important;

Juste avant le crochet {

mais ça m'a fait perdre la couleur du fond des réponses

[Feuille de Tilleul]

Aloooours. (:

magiephotofiltre : je n'ai pas compris ta réponse ; le code couleur, c'est le code du fond ou du texte ?

Feuille de Tilleul :

Quelle largeur fait ton forum ? (Pour ne pas que je te donne un code trop large !)
As-tu modifié la réponse rapide ? A moins de l'avoir loupé dans le CSS, je ne l'ai pas vu. :-/

Il fait 73%
Non, j'ai rien modifié

[karinette75]

bonjour,
 j'ai plus la barre au dessus du cadre réponse depuis ce matin c'est assez gênant :

 

pouvez vous m'aider merci d'avance

[Tech]

bonjour,
 j'ai plus la barre au dessus du cadre réponse depuis ce matin c'est assez gênant :

 

pouvez vous m'aider merci d'avance

Bonjour,

Merci de vous diriger vers le bon sujet : https://forum.forumactif.com/t352657-topic-unique-abscence-des-boutons-de-l-editeur

[chris3033]

Bonjour,
je viens de lire les 19 pages...
j'ai un souci avec la citation d'un message.
en fait quand on cite un autre membre on ne peut qu'écrire à sa suite, dans le même cadre, ou alors il faut passer en mode édition.
Pourtant hier nous n'avions pas ce problème. existe t-il une solution? merci.

[Tech]

Bonjour,
je viens de lire les 19 pages...
j'ai un souci avec la citation d'un message.
en fait quand on cite un autre membre on ne peut qu'écrire à sa suite, dans le même cadre, ou alors il faut passer en mode édition.
Pourtant hier nous n'avions pas ce problème. existe t-il une solution? merci.

Il suffit de descendre en dessous du cadre via la flèche du bas de votre clavier

[chris3033]

j'ai bien lu cette réponse mais même en faisant ça ça ne fonctionne pas. j'ai déjà tenté.

[Tech]

Je viens encore d'essayer et je n'ai aucun problème, pouvez-vous nous faire une capture d'écran ?

Cordialement.

[chris3033]

mon curseur se met à la place du carde rouge. et impossible de le sortir du cadre jaune pour le mettre dessous. même avec la flèche bas de mon clavier

c'est pas grave en soi, j'ai dit à mes membres de passer par le mode édition. c'est juste plus embêtant c'est tout

[Tech]

Votre Firefox à l'air à jour, vous me le confirmer ?

Vous ne pouvez pas cliquer plus bas sur la zone ?

[chris3033]

oui mon firefox est bien à jour

j'ai tout tenté : utiliser comme vous me l'avez dit la flèche du bas, cliquer avec la souris... mais rien mon curseur reste dans la zone jaune.
et ce qui est bizarre c'est que hier ça fonctionnait bien. le problème est apparu aujourd'hui alors que je n'ai rien changé.

[Jean Nicolas]

Exact et ça le fait aussi sur ce forum sous iE.
Ce matin ça fonctionnait.

[Tech]

C'est bizarre car moi ça fonctionne :

Ceci est un test
Sur plusieurs lignes

Et je peux ré-écrire après

Vous avez vidé votre cache ?

[Arjuna]

Bonjour

Y a t-il un moyen simple de retrouver l'ancienne apparence de l'éditeur ?
Entre les boutons et la couleur du fond, les smileys qui étaient bien plus fonctionnels....
Je regrette vraiment cette mise à jour ( qui n'apporte rien de beau ).

Merci pour la solution simple sans bidouiller les css.

Malheureusement non, il n'y pas de solution pour modifier l'apparence de l'éditeur sans ajouter des codes dans le css pour l'instant.

Pourriez vous nous faire un topic simple , résumant les codes à introduire dans les css, SVP
par ex

• fond coloré au lieu de blanc,
  
• couleur des boutons
  
• mode éditeur permanent,
  
• couleurs de police simples ( par nom et limité)
  
• liste des emoticons non réduites en taille
  
• ....

Merci d'avance

[chris3033]

C'est bizarre car moi ça fonctionne :

Ceci est un test
Sur plusieurs lignes

Et je peux ré-écrire après

Vous avez vidé votre cache ?

oui je l'ai fait. mais sans succès. je vais testé sur un autre ordi. mais ça me rassure, je vois que je ne suis pas la seule

[chris3033]

test effectué sur un autre ordinateur avec un autre identifiant que le mien sur mon forum et pareil ça ne fonctionne pas non plus

[SandyL]

Arjuna, il y a déjà un peu partout ces listes de codes, en cherchant un peu vous allez les trouver


J'ajoute que ces codes sont TEMPORAIRES à savoir qu'ils sont dédiés à vous aider en attendant que les techniciens corrigent la MAJ de l'éditeur.

DONC, n'oubliez pas où vous les auraient insérés enfin de pouvoir les retirer par la suite. 

[Glorio]

mon curseur se met à la place du carde rouge. et impossible de le sortir du cadre jaune pour le mettre dessous. même avec la flèche bas de mon clavier

c'est pas grave en soi, j'ai dit à mes membres de passer par le mode édition. c'est juste plus embêtant c'est tout

oui mon firefox est bien à jour

j'ai tout tenté : utiliser comme vous me l'avez dit la flèche du bas, cliquer avec la souris... mais rien mon curseur reste dans la zone jaune.
et ce qui est bizarre c'est que hier ça fonctionnait bien. le problème est apparu aujourd'hui alors que je n'ai rien changé.

J'ai le même soucis, quand je cite un un message de quelqu'un, je peux pas quitter le cadre jaune, que ça soit par MP privé ou dans les posts des sujets. Je dois basculer le mode d'édition pour pouvoir quitter le cadre, et passer avec les balises.

Comment faire pour ce soucis ?

Je suis sous PHPBB2 ; Google Chrome.

[MlleAlys]

Pourriez vous nous faire un topic simple , résumant les codes à introduire dans les css, SVP
par ex

• fond coloré au lieu de blanc,
  
• couleur des boutons
  
• mode éditeur permanent,
  
• couleurs de police simples ( par nom et limité)
  
• liste des emoticons non réduites en taille
  
• ....
  

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

Je viens de modifier le premier, "code général" de façon à ce qu'il reprenne les autres de façon plus claire (enfin j'espère xD)
Si ce n'est pas le cas, vous pouvez reposter ici en nous indiquant exactement les couleurs que vous souhaitez, et nous ferons le code ^^

[Self]

Bonjour à tous.

Je reviens vers ce topic pour voir di quelqu'un aurais trouver un code permettant d'enlever le zoom des smiley au passage de la souris alors j'ai essayer des codes qui me parraisser logiqque du style:

Code:

.sceditor.emoticon.hover{
diplay: none !important}

Et d'autre mais sachant que ce style de fonction peut passer par js, css et html cela ne m'étonnerais pas qu'il faudrait du javascript et la je ne m'y connais pas du tout.

De même en me connectant sur mon forum ce matin me disant avoir oublier de passer un coup de ccleaner hier soir le bouton pour changer le mode d'édition sera donc toujours sur le mode BBcode et il s'avère qu'enfaite non.
Quelqu'un aurais quelque chose pour laisser activer de base le mode BBcode ?

[MlleAlys]

Quelques codes css pour modifier l'apparence du nouvel éditeur.

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


Voilà déjà un code général pour personnaliser votre éditeur (il permet entre autre de modifier les couleurs de fond, de police en mode source, la taille des smileys,.. ) :

Code:





/***********************************************APPARENCE NOUVEL EDITEUR*/


/*général*/
.sceditor-container {
    width: 100% !important;  /********************************largeur de l'édieur*/
    text-align: center;
    border: none !important;
}
.sceditor-container.ltr.wysiwygMode, .sceditor-container.ltr.sourceMode {
    background-color : blue !important;  /****couleur de fond global de l'éditeur*/
}
/*fin général*/


/*toolbar*/
div.sceditor-toolbar {
    background-color :red !important;  /************couleur de fond de la toolbar*/
    border: none !important;
}
div.sceditor-group {
    background-color: yellow !important;  /*couleur de fond des groupes de boutons*/
    border: none !important;
}
a.sceditor-button {
    background-color: purple !important;  /************couleur de fond des boutons*/
    margin: 1px; /*************************espace entre les boutons dans un groupe*/
}
a.sceditor-button.hover, .sceditor-button.active {
    background-color: orange !important;  /***couleur de fond des bouton surlignés*/
}
/*fin toolbar*/

/*zone de texte*/
.sceditor-container iframe, .sceditor-container textarea {
    background-color: green !important;   /****couleur de fond de la zone de texte*/
    border: 1px solid white !important; /*couleur de la bordure de la zone de texte*/
    width: 95% !important; /***************************largeur de la zone de texte*/
    color: white !important;   /*************couleur de la police (en mode source)*/
    font-size: 12px !important;   /***********taille de la police (encmode source)*/
    padding: 5px !important;
}
/*fin zone de texte*/

/*encadré de saisie quand on clique sur un bouton*/
.sceditor-dropdown {
    background-color: blue !important;  /**************couleur de fond de l'encadré*/
}
.sceditor-dropdown, .sceditor-dropdown label, .sceditor-dropdown .button {
    color: white !important;  /*****************couleur de la police dans l'encadré*/
}
.sceditor-dropdown textarea, .sceditor-dropdown input {
    background-color: green !important;  /******couleur de fond des zones de saisie*/
}
/*fin encadré de saisie*/

/*smileys*/
 .sceditor-emoticons .smiley {
    width: auto !important;
    height: auto !important;
    max-width: 40px !important;  /************************largeur max d'un smiley*/
    max-height: 40px !important;  /***********************hauteur mex d'un smiley*/
}
.sceditor-dropdown.sceditor-emoticons {
    max-height: 200px;  /********************hauteur max de la fenêtre des smileys*/
    max-width: 300px; /**********************largeur max de le fenêtre des smileys*/
    overflow: auto;
}
/*fin smileys*/

/*********************************************FIN APPARENCE NOUVEL EDITEUR*/





Ce code, appliqué tel quel, vous donnera ce résultat :


A vous à présent de remplacer les tailles et couleurs par celles que vous souhaitez (les commentaires entre /* ... */ dans le code vous aideront, j'espère, à vous y retrouver )

Pour modifier la couleur de la police en wysiwyg (javascript), et/ou supprimer l'effet de dédoublement des smileys, et/ou modifier les boutons plus en détail,  voir le message ici : https://forum.forumactif.com/t352532-topic-unique-apparence-du-nouvel-editeur-de-messages#3002396 (oui le début est le même )

[MlleAlys]

Bonjour à tous.

Je reviens vers ce topic pour voir di quelqu'un aurais trouver un code permettant d'enlever le zoom des smiley au passage de la souris alors j'ai essayer des codes qui me parraisser logiqque du style:

Code:

.sceditor.emoticon.hover{
diplay: none !important}

Et d'autre mais sachant que ce style de fonction peut passer par js, css et html cela ne m'étonnerais pas qu'il faudrait du javascript et la je ne m'y connais pas du tout.

De même en me connectant sur mon forum ce matin me disant avoir oublier de passer un coup de ccleaner hier soir le bouton pour changer le mode d'édition sera donc toujours sur le mode BBcode et il s'avère qu'enfaite non.
Quelqu'un aurais quelque chose pour laisser activer de base le mode BBcode ?

Malheureusement, je crois que personne n'a trouvé de solution pour l'aperçu des smileys, et concernant le mode wysiwyg par défaut qui se remet à chaque fois, je ne peux pas t'aider non plus, je ne m'y connais pas du tout là dedans ^^"

[kara l. Sullivan]

Kara : Pour l'écriture en noire sur la réponse rapide, c'est en mode WYS ?
Dans ce cas, il faudrait regarder ce post :
https://forum.forumactif.com/t352532p390-topic-unique-apparence-du-nouvel-editeur-de-messages#3004276

Pour la hauteur, pouvez-vous nous montrer votre code CSS pour l'éditeur s'il vous plait ?

Code:

/*-------fond editeur----*/
.sceditor-emoticons .smiley {
  width: auto !important;
  height: auto !important;
  max-width: 40px !important;
  max-height: 40px !important;
}
div.sceditor-emoticons {
 
  height:300px;
  overflow:auto;
}
.sceditor-container.ltr.sourceMode, .sceditor-container.ltr.wysiwygMode
        {
          background-color : #181818 !important;
          border: none !important;
        }
        div.sceditor-toolbar
        {
          background-color :#101010 !important;
          border: none !important;
        }
        .sceditor-container iframe, .sceditor-container textarea
        {
          background-color: transparent !important;
          color: #e0cccd !important;
          border: none !important; margin:2 !important;
        }
        div.sceditor-group
        {
          background-color: #000000 !important;
          color: #121212 !important;
          border: none !important;
        }
        a.sceditor-button
        {
          background-color: #181818 !important;
        }
        a.sceditor-button.hover
        {
          background-color: #DB1B24 !important;
          border: none !important;
        }

j'ai l'angle en mode réponse normal pas en rapide.
merci a vous de m'aidés

[MlleAlys]

Pour la hauteur, pouvez-vous nous montrer votre code CSS pour l'éditeur s'il vous plait ?

Code:

/*-------fond editeur----*/
.sceditor-emoticons .smiley {
  width: auto !important;
  height: auto !important;
  max-width: 40px !important;
  max-height: 40px !important;
}
div.sceditor-emoticons {
 
  height:300px;
  overflow:auto;
}
.sceditor-container.ltr.sourceMode, .sceditor-container.ltr.wysiwygMode
        {
          background-color : #181818 !important;
          border: none !important;
        }
        div.sceditor-toolbar
        {
          background-color :#101010 !important;
          border: none !important;
        }
        .sceditor-container iframe, .sceditor-container textarea
        {
          background-color: transparent !important;
          color: #e0cccd !important;
          border: none !important; margin:2 !important;
        }
        div.sceditor-group
        {
          background-color: #000000 !important;
          color: #121212 !important;
          border: none !important;
        }
        a.sceditor-button
        {
          background-color: #181818 !important;
        }
        a.sceditor-button.hover
        {
          background-color: #DB1B24 !important;
          border: none !important;
        }

j'ai l'angle en mode réponse normal pas en rapide.
merci a vous de m'aidés

Pourriez vous s'il vous plait répéter quel était votre souci ? ^^"