[Topic Unique] Apparence du nouvel éditeur de messages

Page 1 sur 34 1, 2, 3 ... 17 ... 34  Suivant

Voir le sujet précédent Voir le sujet suivant Aller en bas

Unique [Topic Unique] Apparence du nouvel éditeur de messages

Message par Anzu le Mer 12 Juin 2013 - 16:26

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.



Dernière édition par Anzu le Mar 18 Juin 2013 - 22:29, édité 2 fois

Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

http://forum.forumactif.com/forum
Anzu a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par lacie holmes le Mer 12 Juin 2013 - 16:35

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

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? Smile

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

lacie holmes
Nouveau membre

Messages : 16
Inscrit(e) le : 30/10/2012

http://dark-wood-circus.forumactif.org/
lacie holmes a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par MlleAlys le Mer 12 Juin 2013 - 16:38

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 : http://forum.forumactif.com/t352532-topic-unique-apparence-du-nouvel-editeur-de-messages#3002396


Dernière édition par MlleAlys le Jeu 20 Juin 2013 - 17:35, édité 4 fois

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par Grimmy' le Mer 12 Juin 2013 - 16:39

Bonjour,

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

Grimmy'
*

Féminin
Messages : 41
Inscrit(e) le : 24/11/2010

http://reinventeladestinee.forumactif.com/
Grimmy' a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par pascaline75 le Mer 12 Juin 2013 - 16:39

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

pascaline75
****

Féminin
Messages : 341
Inscrit(e) le : 10/09/2010

http://pascaline-passions.forums-actifs.com
pascaline75 a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par Zarby le Mer 12 Juin 2013 - 16:48

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 :/

Zarby
**

Messages : 65
Inscrit(e) le : 01/10/2010

http://time-of-maraudeurs.forumsactifs.com/
Zarby a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par lacie holmes le Mer 12 Juin 2013 - 16:52

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

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.

lacie holmes
Nouveau membre

Messages : 16
Inscrit(e) le : 30/10/2012

http://dark-wood-circus.forumactif.org/
lacie holmes a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par Aelin le Mer 12 Juin 2013 - 16:56

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.

Aelin
*****

Féminin
Messages : 641
Inscrit(e) le : 01/02/2011

http://ondes-de-lumiere.forumgratuit.org/
Aelin a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par Lixyr le Mer 12 Juin 2013 - 16:57

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.

@Lixyr a écrit: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; }

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par Zarby le Mer 12 Juin 2013 - 17:02

Merci Smile
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:


Dernière édition par Zarby le Mer 12 Juin 2013 - 17:12, édité 1 fois

Zarby
**

Messages : 65
Inscrit(e) le : 01/10/2010

http://time-of-maraudeurs.forumsactifs.com/
Zarby a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par Lixyr le Mer 12 Juin 2013 - 17:11

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.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par Zarby le Mer 12 Juin 2013 - 17:17

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 !

Zarby
**

Messages : 65
Inscrit(e) le : 01/10/2010

http://time-of-maraudeurs.forumsactifs.com/
Zarby a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par Lixyr le Mer 12 Juin 2013 - 17:20

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 ?





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par Zarby le Mer 12 Juin 2013 - 17:29

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


Dernière édition par Zarby le Mer 12 Juin 2013 - 17:39, édité 1 fois

Zarby
**

Messages : 65
Inscrit(e) le : 01/10/2010

http://time-of-maraudeurs.forumsactifs.com/
Zarby a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par -Méphisto- le Mer 12 Juin 2013 - 17:36

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

-Méphisto-
# Tropactif #

Messages : 1654
Inscrit(e) le : 31/08/2007

http://cafet.1fr1.net/
-Méphisto- a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par Polices le Mer 12 Juin 2013 - 17:36



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

Polices
*****

Masculin
Messages : 511
Inscrit(e) le : 04/07/2011

http://agat.forumofficiel.fr/
Polices a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par Lixyr le Mer 12 Juin 2013 - 17:37

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





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par Stormbringer74 le Mer 12 Juin 2013 - 17:40

@Grimmy' a écrit: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 ?

Stormbringer74
****

Masculin
Messages : 268
Inscrit(e) le : 18/10/2008

http://forum-deep-purple.forumactif.com/
Stormbringer74 a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par Ayael le Mer 12 Juin 2013 - 17:40

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

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par Zarby le Mer 12 Juin 2013 - 17:43

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 !

Zarby
**

Messages : 65
Inscrit(e) le : 01/10/2010

http://time-of-maraudeurs.forumsactifs.com/
Zarby a été remercié(e) par l'auteur de ce sujet.
  • 0

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par MlleAlys le Mer 12 Juin 2013 - 17:46

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 ! Wink)

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 Wink
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:

Il permet entre autres de modifier les couleurs de fond, la taille des smileys, mais l'apparence des boutons reste la même. Si vous souhaitez modifier d'autres choses et personnaliser plus l'apparence de votre éditeur mais que vous ne savez pas comment faire, postez à la suite de ce sujet Wink:
Code:




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


/*général et barre d'outils*/

.sceditor-container {
    text-align: center;  /*pour centrer zone de texte et boutons*/
}
.sceditor-container.ltr.wysiwygMode, .sceditor-container.ltr.sourceMode, div.sceditor-toolbar {
    border: none !important;
}
.sceditor-container.ltr.wysiwygMode, .sceditor-container.ltr.sourceMode, div.sceditor-toolbar, .sceditor-dropdown {
    background-color : COULEUR !important;  /****couleur de fond de l'éditeur*/
}
.sceditor-dropdown, .sceditor-dropdown label, .sceditor-dropdown .button, .sceditor-font-option, .sceditor-fontsize-option {
    color: COULEUR !important;  /*couleur de la police dans l'encadré quand on clique sur un bouton*/
}

/*fin général et barre d'outils*/


/*zone de texte*/

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


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




A vous à présent de remplacer "COULEUR" par le code de celle que vous souhaitez (les commentaires entre /* ... */ dans le code vous aideront, j'espère, à vous y retrouver Wink)
(spoiler) Pour modifier l'apparence des outils (voir plus bas comment modifier un bouton en particulier):

Collez ce code dans votre css et remplacez "COULEUR" par le code de la couleur de votre choix :
Code:

.sceditor-toolbar {
    background-color: COULEUR !important;  /*couleur de fond de la barre d'outils*/
}
.sceditor-group {
    background-color: COULEUR !important;  /*couleur de fond des groupes de boutons*/
    border: none;
}
a.sceditor-button {
    background-color: COULEUR !important;  /*couleur de fond des boutons*/
    margin: 1px !important;  /*écartement des boutons*/
}
a.sceditor-button.hover, .sceditor-button.active {
    background-color: COULEUR !important;   /*couleur des boutons activés*/
}
a.sceditor-button:hover {
    background-color: COULEUR !important;   /*couleur des boutons au survol*/
}
(spoiler) Pour modifier la largeur de l'éditeur (PROBLÈME RÉSOLU, SI VOUS AVEZ UTILISÉ CE CODE VOUS POUVEZ LE RETIRER):

Collez ce code dans votre css, et modifiez les valeurs à votre préférence :
Code:
.sceditor-container {
    width: 100% !important;  /********************************largeur de l'édieur*/
}
.sceditor-container iframe {
    width: 95% !important; /***************************largeur de la zone de texte*/
}

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

Merci Ea pour le code !
- Allez dans modules > gestion des codes javascripts
- Vérifiez que l'option "Activer la gestion des codes Javascript " est cochée sur OUI
- Créez un nouveau code. Donnez lui un nom ("désactivation wysiwyg" par exemple)
- Cochez "sur toutes les pages" pour le placement,
- Puis dans la zone de saisie collez ce code :
Code:
$(function() {
          $(function() {
            var a = $("#text_editor_textarea");
            a.length && ($("a.sceditor-button-source").remove(), !a.sceditor("instance").inSourceMode() && a.sceditor("instance").toggleSourceMode())
          })
        });
-Validez !
(spoiler) activer le mode source par défaut :

Merci Ea pour le code !
- Allez dans modules > gestion des codes javascripts
- Vérifiez que l'option "Activer la gestion des codes Javascript " est cochée sur OUI
- Créez un nouveau code. Donnez lui un nom ("mode source par défaut" par exemple xP)
- Cochez "sur toutes les pages" pour le placement,
- Puis dans la zone de saisie collez ce code :
Code:
my_getcookie('WYSIWYG_STATE')===null && my_setcookie('WYSIWYG_STATE',0,1,0);
-Validez !
(spoiler) Pour modifier la mise en forme du mode wysiwyg:

Il vous faudra passer par un code javascript :
- Allez dans modules > gestion des codes javascripts
- Vérifiez que l'option "Activer la gestion des codes Javascript " est cochée sur OUI
- Créez un nouveau code. Donnez lui un nom ("mise en forme wysiwyg" par exemple)
- Cochez "sur toutes les pages" pour le placement,
- Puis dans la zone de saisie collez ce code et modifiez "COULEUR" par le code de celle que vous désirez :
Code:
$(function(){ $(function() {
          $('.sceditor-container iframe').contents().find('head').append('<style type="text/css">
body, p {
    background: COULEUR;  /*couleur de fond de la zone de saisie*/
    color: COULEUR;  /*couleur de la police dans la zone de saisie*/
}
blockquote, blockquote cite, code {
    background-color: COULEUR;  /*couleur de fond des citations et codes*/
    color: COULEUR; /*couleur de la police dans les citations et les codes*/
    border: 1px solid COULEUR; /*bordure des citations et codes*/
}
code:before {
    color: COULEUR;  /*couleur du mot -code-*/
}
/****vous pouvez bien sûr continuer à mettre votre propre css  *****/
</style>')
        })});
- Validez !
(spoiler) Pour avoir les smileys à la bonne taille (PROBLÈME RÉSOLU, SI VOUS AVEZ INSTALLÉ CE CODE VOUS POUVEZ LE RETIRER) :

Ajouter ce code dans le css :
Code:
.sceditor-emoticons .smiley {
  width: auto !important;
  height: auto !important;
  max-width: 40px !important;  /*largeur max d'un smiley*/
  max-height: 40px !important;   /*hauteur max d'un smiley*/
}
40px correspond ici à la taille maximale que peut prendre un smiley, valeur qui peut être modifiée.
(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) :

Ajoutez ce code dans votre css :
Code:
.sceditor-dropdown.sceditor-emoticons {
  max-height: 200px;   /*hauteur max de l'encadré*/
  max-width: 300px;   /*largeur max de l'encadré*/
  overflow: auto;
}
La valeur de 200px correspondant à la hauteur de la fenêtre peut bien sûr être modifiée, tout comme celle de la largeur ici à 300px Wink
(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) :

Il faut ajouter un code javascript (merci Ea pour le code !) :
- Allez dans Modules > Gestion des codes javascript
- Vérifiez que l'option "Activer la gestion des codes Javascript " est cochée sur OUI
- Créez un nouveau code. Donnez lui un nom ("smileys" par exemple)
- Cochez "sur toutes les pages" pour le placement,
- Puis dans la zone de saisie collez ce code :
Code:
$(function(){ $(function() {
  $(".sceditor-button-emoticon").click(function() {
    $(".smiley").unbind("hover")
  })
})});
- Validez !
(spoiler) Pour mettre une couleur de fond à la place de l'image dans la boite des smileys :

Collez ce code dans votre css, et remplacez "COULEUR" par le code de celle de votre choix :
Code:
html#sceditor_smilies body {
    background-image: none;
    background-color: COULEUR;
}
(spoiler) Pour pouvoir écrire en dessous du cadre de citation (PROBLÈME RÉSOLU, SI VOUS AVEZ INSTALLÉ CE CODE VOUS POUVEZ LE RETIRER) :

Vous pouvez installer ce code javascript qui ajoute un retour à la ligne avant et après le cadre de citation (merci Ea pour le code !) :
- 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
- nommez le ("écrire après citer" par exemple x))
- cochez "sur toutes les pages"
- collez ce code dans la zone de saisie :
Code:
$(function () {
    if(!$.sceditor) return;
    $.sceditor.plugins.bbcode.bbcodes.quote.html = function (token, attrs, content) {
        if (typeof attrs.defaultattr !== "undefined")
            content = '<cite>' + attrs.defaultattr + '</cite>' + content;
 
       return '<br /><blockquote>' + content + '</blockquote><br />';
    };
 
});
- Validez !
Cependant, ce code empêche apparemment également aux modérateurs d'éditer directement le profil des membres sur celui-ci.
(spoiler) Pour modifier un bouton, voici d'abord les class de chaque bouton (voir plus bas comment les utiliser):

gras :
.sceditor-button.sceditor-button-bold

italique :
.sceditor-button.sceditor-button-italic

souligner :
.sceditor-button.sceditor-button-underline

barré :
.sceditor-button.sceditor-button-strike

aligner à gauche :
.sceditor-button.sceditor-button-left.active

centrer :
.sceditor-button.sceditor-button-center

aligner à droite :
.sceditor-button.sceditor-button-right

justifier :
.sceditor-button.sceditor-button-justify

liste :
.sceditor-button.sceditor-button-bulletlist

liste ordonnée :
.sceditor-button.sceditor-button-orderedlist

barre horizontale :
.sceditor-button.sceditor-button-horizontalrule

citer :
.sceditor-button.sceditor-button-quote

code :
.sceditor-button.sceditor-button-code

spoiler :
.sceditor-button.sceditor-button-faspoiler

caché :
.sceditor-button.sceditor-button-fahide

tableau :
.sceditor-button.sceditor-button-table

héberger image :
.sceditor-button.sceditor-button-servimg

insérer une image :
.sceditor-button.sceditor-button-image

insérer un lien :
.sceditor-button.sceditor-button-link

taille police :
.sceditor-button.sceditor-button-size

couleur police :
.sceditor-button.sceditor-button-color

police :
.sceditor-button.sceditor-button-font

supprimer formatage :
.sceditor-button.sceditor-button-removeformat

youtube :
.sceditor-button.sceditor-button-youtube

dailymotion :
.sceditor-button.sceditor-button-dailymotion

flash :
.sceditor-button.sceditor-button-flash

bouton "..." :
.sceditor-button.sceditor-button-more

indice :
.sceditor-button.sceditor-button-subscript

exposant :
.sceditor-button.sceditor-button-superscript

défilement horizontal :
.sceditor-button.sceditor-button-fascroll

défilement vertical :
.sceditor-button.sceditor-button-faupdown

wow :
.sceditor-button.sceditor-button-fawow

aléatoire :
.sceditor-button.sceditor-button-farand

smiley :
.sceditor-button.sceditor-button-emoticon

date :
.sceditor-button.sceditor-button-date

heure :
.sceditor-button.sceditor-button-time

insérer texte :
.sceditor-button.sceditor-button-pastetext

changer mode :
.sceditor-button.sceditor-button-source
(spoiler) Pour cacher un bouton:

Prenez sa class donnée dans la liste dans le spoiler au dessus et attribuez lui l'affichage " display: none; " dans votre css.
Par exemple si je veux masquer les bouton date et heure, j'ajoute (par un simple copier/coller) ce code dans mon css :
Code:

/*Bouton date*/
a.sceditor-button-date{
 display: none;
}
/*Bouton heure*/
a.sceditor-button-time{
 display: none;
}
(spoiler) Pour changer le fond d'un bouton en particulier:

Reprenez la class du bouton dans la liste donnée dons le spoiler plus haut. Puis même principe que pour cacher un bouton, sauf que vous attribuez une propriété background à l'élément :
Par exemple, pour mettre le bouton de changement de mode en rouge, j'ajoute ce code dans mon css :
Code:
.sceditor-button.sceditor-button-source {
 background-color: red;
}
(spoiler) Pour changer l'image d'un bouton:

Il faut en fait modifier l'image de fond de la div située dans le bouton :
Reprenez la class du bouton qui vous intéresse dans la liste donnée dans le spoiler plus haut, ajoutez div derrière et ajoutez un " background-image: url(...); " (où " ... " doit être remplacée par l'url de l'image de votre nouveau bouton, image en 16*16px) dans les propriétés de cet élément.
Par exemple si je veux modifier l'image du bouton "alignement à droite", j'ajoute ce code à mon css :
Code:
.sceditor-button.sceditor-button-right div {
 background-image: url(...);
}
(On reconnait " .sceditor-button.sceditor-button-right " qui correspond à la class du bouton aligner à droite, et juste après j'ai ajouté " div " (séparé par un espace))
(spoiler) Pour empêcher la fenêtre servimg de se refermer:

- 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 ("fermeture servimg éditeur" par exemple xD)
- cochez "sur toutes les pages"
- collez ce code dans la zone de saisie :
Code:
var servimg_button_clicked= false;
        
       $(function(){$(function(){
          if(!$("#text_editor_textarea").length) return;
        
         $('.sceditor-button-servimg').click(function(){ servimg_button_clicked= true; });
          $._data($('.sceditor-button-servimg')[0],"events")["click"].reverse();
          $('.sceditor-button-servimg').click(function(){ servimg_button_clicked= false; });
        
         var i= $("#text_editor_textarea").sceditor("instance");
          var c= i.closeDropDown;
          var r= i.createDropDown;
        
         i.closeDropDown= function(focus){
            if(servimg_button_clicked || !$('.sceditor-dropdown.sceditor-servimg').length) c(focus)
          };
          i.createDropDown= function(menuItem, dropDownName, content, ieUnselectable) {
            if(servimg_button_clicked || !$('.sceditor-dropdown.sceditor-servimg').length)
              r(menuItem, dropDownName, content, ieUnselectable)
          }
        
       })});
- Validez !
(spoiler) Pour avoir un sélecteur de couleur plus simple:

Merci Ea pour le code !


Collez ce code dans votre feuille de style css :
Code:


/*sélecteur de couleurs*/

.editor_color_panel{
   background-color:#fff;
   width:189px;height:135px;
}
.editor_color_panel .color_general{
   height:16px;
   margin:11px 7px 9px 11px;
}
.editor_color_panel .color_list{
   height:70px;
   margin:0 7px 0 11px;
}
.editor_color_panel .color_standard{
   height:16px;
   margin:13px 7px 8px 11px;
}
.editor_color_panel strong{
   font-size:0;
   display:block;
   width:14px;
   height:14px;
   margin-right:3px;
   float:left;
   cursor:pointer;
}
/*fin sélecteur de couleurs*/

Puis ajoutez ce code javascript :
- 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 ("sélecteur de couleurs" par exemple)
- cochez "sur toutes les pages"
- collez ce code dans la zone de saisie :
Code:
$(function () {
    $(function () {
 
       $.sceditor.command.get('color')._dropDown = function (editor, caller, callback) {
            var content = $("<div />"),
                cmd = $.sceditor.command.get('color');
 
           if (!cmd._htmlCache) {
 
               var pre = '<strong style="background-color:#',
                    suf = ';" unselectable="on"><span></span></strong>';
 
               var htmlGen = [pre, 'ffffff,000000,eeece1,1f497d,4f81bd,c0504d,9bbb59,8064a2,4bacc6,f79646'.split(',').join(suf + pre), suf].join('');
 
               var htmlList = [pre, 'f2f2f2,7f7f7f,ddd9c3,c6d9f0,dbe5f1,f2dcdb,ebf1dd,e5e0ec,dbeef3,fdeada,d8d8d8,595959,c4bd97,8db3e2,b8cce4,e5b9b7,d7e3bc,ccc1d9,b7dde8,fbd5b5,bfbfbf,3f3f3f,938953,548dd4,95b3d7,d99694,c3d69b,b2a2c7,92cddc,fac08f,a5a5a5,262626,494429,17365d,366092,953734,76923c,5f497a,31859b,e36c09,7f7f7f,0c0c0c,1d1b10,0f243e,244061,632423,4f6128,3f3151,205867,974806'.split(',').join(suf + pre), suf].join('');
 
               var htmlStandard = [pre, 'c00000,ff0000,ffc000,ffff00,92d050,00b050,00b0f0,0070c0,002060,7030a0'.split(',').join(suf + pre), suf].join('');
 
               var htmlGeneralPanel = ['<div class="editor_color_panel" style="z-index:12;" unselectable="on"><div class="color_general" unselectable="on">', htmlGen, '</div><div class="color_list" unselectable="on">', htmlList, '</div><div class="color_standard" unselectable="on">', htmlStandard, '</div></div>'].join('');
 
               cmd._htmlCache = htmlGeneralPanel;
            }
 
           content.append(cmd._htmlCache)
                .find('strong')
                .click(function (e) {
                    callback($(this).attr('style').substr(17, 7));
                    editor.closeDropDown(true);
                    e.preventDefault();
                });
 
           editor.createDropDown(caller, "color-picker", content);
        };
 
   })
});
- Validez !

Vous pouvez modifier les couleurs du sélecteur en remplaçant les codes hexadécimaux du code javascript par ceux de vos couleurs Wink
(spoiler) Pour ajouter ou modifier une police de l'éditeur:

merci Ea pour le code !

- 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 !


En espérant que ça en aide certains Wink

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


Dernière édition par MlleAlys le Ven 21 Juin 2013 - 14:26, édité 62 fois

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par AlanBike le Mer 12 Juin 2013 - 17:54

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.

AlanBike
+ Hyperactif +

Masculin
Messages : 10856
Inscrit(e) le : 29/09/2009

http://artus.forumactif.com/
AlanBike a été remercié(e) par l'auteur de ce sujet.
  • 0

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par Lucrezia2 le Mer 12 Juin 2013 - 18:01

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

Lucrezia2
Nouveau membre

Messages : 8
Inscrit(e) le : 25/05/2013

http://veniseladecadente.forums-rpg.com/
Lucrezia2 a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par lilimorgane le Mer 12 Juin 2013 - 18:04

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 Laughing

lilimorgane
****

Féminin
Messages : 424
Inscrit(e) le : 17/09/2007

http://chevalbaroque.forumactif.fr/index.htm
lilimorgane a été remercié(e) par l'auteur de ce sujet.
  • 0

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par MlleAlys le Mer 12 Juin 2013 - 18:09

pour cacher un bouton ou modifier son fond, voici d'abord les class de chacun (ou presque ^^") :
Spoiler:
liste :
.sceditor-button.sceditor-button-bulletlist

liste ordonnée :
.sceditor-button.sceditor-button-orderedlist

barre horizontale :
.sceditor-button.sceditor-button-horizontalrule

citer :
.sceditor-button.sceditor-button-quote

code :
.sceditor-button.sceditor-button-code

spoiler :
.sceditor-button.sceditor-button-faspoiler

caché :
.sceditor-button.sceditor-button-fahide

tableau :
.sceditor-button.sceditor-button-table

héberger image :
.sceditor-button.sceditor-button-servimg

youtube :
.sceditor-button.sceditor-button-youtube

dailymotion :
.sceditor-button.sceditor-button-dailymotion

flash :
.sceditor-button.sceditor-button-flash

bouton "..." :
.sceditor-button.sceditor-button-more

indice :
.sceditor-button.sceditor-button-subscript

exposant :
.sceditor-button.sceditor-button-superscript

défilement horizontal :
.sceditor-button.sceditor-button-fascroll

défilement vertical :
.sceditor-button.sceditor-button-faupdown

wow :
.sceditor-button.sceditor-button-fawow

aléatoire :
.sceditor-button.sceditor-button-farand

smiley :
.sceditor-button.sceditor-button-emoticon

date :
.sceditor-button.sceditor-button-date

heure :
.sceditor-button.sceditor-button-time

insérer texte :
.sceditor-button.sceditor-button-pastetext

changer mode :
.sceditor-button.sceditor-button-source


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


Dernière édition par MlleAlys le Mer 12 Juin 2013 - 21:29, édité 4 fois

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par AlanBike le Mer 12 Juin 2013 - 18:10

@lilimorgane a écrit: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 Laughing
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

AlanBike
+ Hyperactif +

Masculin
Messages : 10856
Inscrit(e) le : 29/09/2009

http://artus.forumactif.com/
AlanBike a été remercié(e) par l'auteur de ce sujet.
  • 0

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par le.cricket le Mer 12 Juin 2013 - 18:26

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


Dernière édition par le.cricket le Mer 12 Juin 2013 - 18:45, édité 2 fois

le.cricket
****

Masculin
Messages : 230
Inscrit(e) le : 09/10/2009

http://bidfoly.forumactif.com/
le.cricket a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par Tech le Mer 12 Juin 2013 - 18:30

Bonjour,

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

Merci de patienter.

Cordialement.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 20880
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par MlleAlys le Mer 12 Juin 2013 - 18:33

Bon si je reviens à mon propre problème :
@MlleAlys a écrit: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 ? ^^"

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Unique Re: [Topic Unique] Apparence du nouvel éditeur de messages

Message par adele le Mer 12 Juin 2013 - 18:36

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

adele
*****

Féminin
Messages : 914
Inscrit(e) le : 15/03/2007

http://assistantmaternel.forumpro.fr/index.htm
adele a été remercié(e) par l'auteur de ce sujet.

Page 1 sur 34 1, 2, 3 ... 17 ... 34  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum