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

[Self]

ok, merci !!!

par contre, quelle forme voulez vous ? Oo
parce que là, je les mets à la forme... ben des citations et des codes de mon forum ^^"

A la forme faite sur votre forum, j'arriverais à le modifé je pense .

Code:

$(function(){ $(function() {
          $('.sceditor-container iframe').contents().find('head').append('<style type="text/css">blockquote{background-color:black}</style>')
        })});

Code:

$(function(){ $(function() {
          $('.sceditor-container iframe').contents().find('head').append('<style type="text/css">spoiler{background-color:black}</style>')
        })});

Code:

$(function(){ $(function() {
          $('.sceditor-container iframe').contents().find('head').append('<style type="text/css">code{background-color:black}</style>')
        })});


La couleur des fenêtres sont bien modifiées dans l'éditeur mais restent blanches dans le forum. Pourquoi ?

Il sont déjà dans votre css :

PANNEL ADMIN --> AFFICHAGE --> COULEUR --> FEUILLE DE STYLE CSS

Un fois que vous êtes à cette endroit de votre pannel admin faite :

Et pour ce qui est des citation bien souvent c'est des images.
Chercher blockquote dans votre feuille de style css est supprimer le background url et modifié le background color.
Cherche également le blockquote cite par contre cette fois cite le background image correspond normalement à
Donc le supprimer pas, modifié seulement le background-color.

Et de même avec spoiler et spoiler dt ainsi qu'avec codebox dt

[MlleAlys]

La couleur des fenêtres sont bien modifiées dans l'éditeur mais restent blanches dans le forum. Pourquoi ?

L'éditeur en mode wysiwyg utilise une iframe, c'est à dire qu'en réalité le texte que tu écris dans l'éditeur est sur une autre page, et que l'éditeur est une simple "fenêtre" sur cette autre page.

La difficulté était que, via le css du forum, tu ne peux pas modifier la page qui est vue depuis l'iframe, puisque cette dernière ne fait pas vraiment partie du forum ^^"

Le code javascript donné au dessus permet d'aller ajouter des codes css sur cette fameuse page.
Mais du coup, ces derniers ne sont pas pris en compte sur le forum ! ^^

Il faut que tu modifies l'apparence des codes/citations/spoiler/etc via le css de ton forum en même temps que via le javascript

[Lacoste]

Il faut que tu modifies l'apparence des codes/citations/spoiler/etc via le css de ton forum en même temps que via le javascript Wink

Comment ?

[Self]

Il faut que tu modifies l'apparence des codes/citations/spoiler/etc via le css de ton forum en même temps que via le javascript Wink

Comment ?

J'ai édité mon post au dessus de celui de MlleAlys lisez le bien et si il faut plus d'explication n'hésité pas à demander ^^.

[marginal]

Bon j'ai mis le code dans la fenêtre puis validé. Mais maintenant, ca dérappe encore.

Dans la fenêtre d'édition réponse rapide, ca écrit noir sur noir.
Dans la fenêtre d'édition réponse, ca écrit blanc sur noir en mode WYSIWYG mais en noir sur noir en mode normale.

Quel bordel ! Quelqu'un peut m'aider ???? Ma boite courriel est pleine de mails de plaintes !

Merci

Courez dans votre pannel admin en suite aller dans:

Onglet affichage --> images et couleurs --> couleurs --> feuille de style CSS.

Vous aller voir un langage assez spécial de plusieur lignes dans un cadre sauter une ligne et coller le code temporaire que je vous ai donner , chercher le code couleur que vous souhaiter pour le mettre à la place du #000

[MlleAlys]

ok, merci !!!

par contre, quelle forme voulez vous ? Oo
parce que là, je les mets à la forme... ben des citations et des codes de mon forum ^^"

A la forme faite sur votre forum, j'arriverais à le modifé je pense .

Voilà, je changerait encore des choses certainement, mais le gros est là (même s'il n'est certainement pas optimal xD) ^^
(en plus j'ai passé un temps fou à me demander pourquoi mon code faisait beuguer les hide et spoiler.... avant de me rendre compte que c'était normal ! xD

D'ailleurs, pourquoi l'éditeur, même en mode wysiwyg, fait il apparaitre les balises pour hide et spoiler et pas un cadre comme pour code et citation ? ^^"

Code:

$(function(){ $(function() {
          $('.sceditor-container iframe').contents().find('head').append('<style type="text/css">
body, p {
    color:#ededed;
    background:#3b584e;
}
blockquote, code {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    color:#ededed; 
    background-color: #4b6f63; 
    font-size: 12px; 
    line-height: 125%; 
    border-radius: 20px; 
    padding: 5px 5px 5px 15px; 
    border-width: 0 0 1px 1px; 
    border-style: solid; 
    border-color: rgb(255, 255, 255);
    padding-bottom: 10px;
}
blockquote cite {
    border-color: #3b584e;
    margin-bottom: 10px;
}
code:before {
    color: #ededed;
}
</style>')
        })});

(spoiler) ce qui me donne ça ^^ :

[Lacoste]

Il sont déjà dans votre css :

PANNEL ADMIN --> AFFICHAGE --> COULEUR --> FEUILLE DE STYLE CSS

Un fois que vous êtes à cette endroit de votre pannel admin faite :

Et pour ce qui est des citation bien souvent c'est des images.
Chercher blockquote dans votre feuille de style css est supprimer le background url et modifié le background color.
Cherche également le blockquote cite par contre cette fois cite le background image correspond normalement à
Donc le supprimer pas, modifié seulement le background-color.

Et de même avec spoiler et spoiler dt ainsi qu'avec codebox dt

C'est de ceci dont vous parlez ???
Cela me dépasse...désolé, trop compliqué pour moi

N'y a t il pas moyen de modifier cela dans la feuille de style avec un code !important afin de ne pas toucher à la feuille de style originale ?

[Self]

ok, merci !!!

par contre, quelle forme voulez vous ? Oo
parce que là, je les mets à la forme... ben des citations et des codes de mon forum ^^"

A la forme faite sur votre forum, j'arriverais à le modifé je pense .

Voilà, je changerait encore des choses certainement, mais le gros est là (même s'il n'est certainement pas optimal xD) ^^
(en plus j'ai passé un temps fou à me demander pourquoi mon code faisait beuguer les hide et spoiler.... avant de me rendre compte que c'était normal ! xD

D'ailleurs, pourquoi l'éditeur, même en mode wysiwyg, fait il apparaitre les balises pour hide et spoiler et pas un cadre comme pour code et citation ? ^^"

Code:

$(function(){ $(function() {
          $('.sceditor-container iframe').contents().find('head').append('<style type="text/css">
body, p {
    color:#ededed;
    background:#3b584e;
}
blockquote, code {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    color:#ededed; 
    background-color: #4b6f63; 
    font-size: 12px; 
    line-height: 125%; 
    border-radius: 20px; 
    padding: 5px 5px 5px 15px; 
    border-width: 0 0 1px 1px; 
    border-style: solid; 
    border-color: rgb(255, 255, 255);
    padding-bottom: 10px;
}
blockquote cite {
    border-color: #3b584e;
    margin-bottom: 10px;
}
code:before {
    color: #ededed;
}
</style>')
        })});

(spoiler) ce qui me donne ça ^^ :

Merci bien MlleAlys et je ne sais pas du tout pourquoi, certainement une erreur de FA.

Il sont déjà dans votre css :

PANNEL ADMIN --> AFFICHAGE --> COULEUR --> FEUILLE DE STYLE CSS

Un fois que vous êtes à cette endroit de votre pannel admin faite :

Et pour ce qui est des citation bien souvent c'est des images.
Chercher blockquote dans votre feuille de style css est supprimer le background url et modifié le background color.
Cherche également le blockquote cite par contre cette fois cite le background image correspond normalement à
Donc le supprimer pas, modifié seulement le background-color.

Et de même avec spoiler et spoiler dt ainsi qu'avec codebox dt

C'est de ceci dont vous parlez ???
Cela me dépasse...désolé, trop compliqué pour moi

N'y a t  il pas moyen de modifier cela dans la feuille de style avec un code !important afin de ne pas toucher à la feuille de style originale ?

Je ne sais pas du tout.
Mais si vous posséder le logiciel VOIP teamspeak 3 je peut vous aider pas à pas.

[MlleAlys]

N'y a t  il pas moyen de modifier cela dans la feuille de style avec un code !important afin de ne pas toucher à la feuille de style originale ?

Si vous pouvez modifier l'original en mettant le votre plus tard dans le code css (donc tout en bas ça fonctionne ! xD), sans même mettre de "!important" (le code css pris en compte lors de l'affichage est par défaut le dernier, sauf si il y a un !important, alors dans ce cas c'est !important qui est affiché)

Utilisez ces codes :

Code:

/*MISE EN FORME QUOTE*/
.quote {
   background-color: COULEUR;   /*fond*/
   border: 1px solid COULEUR;   /*bordure*/
   color: COULEUR;   /*couleur de la police*/
}

/*MISE EN FORME CODE*/
.code div.cont_code {
   background-color: COULEUR;   /*fond*/
   border: 1px solid COULEUR;   /*bordure*/
   color: COULEUR;   /*couleur de la police*/
}

/*MISE EN FORME SPOILER*/
.spoiler {
   background-color: COULEUR;   /*fond*/
   border: 1px solid COULEUR;   /*bordure*/
   color: COULEUR;   /*couleur de la police*/
}

je sais que certaines balises sont composées de plusieurs éléments, s'il y a un souci quelque part, je regarderai à nouveau parce que je ne me souviens plus exactement duquel est quoi xD

[MlleAlys]

Bon j'ai mis le code dans la fenêtre puis validé.  Mais maintenant, ca dérappe encore.

Dans la fenêtre d'édition réponse rapide, ca écrit noir sur noir.
Dans la fenêtre d'édition réponse, ca écrit blanc sur noir en mode WYSIWYG mais en noir sur noir en mode normale.  

Quel bordel !  Quelqu'un peut m'aider ????  Ma boite courriel est pleine de mails de plaintes !  

Merci

Pouvez vous nous donner le css concerné s'il vous plait, ainsi que si possible un lien vers un sujet ouvert aux invités ?
Et aussi, que voulez vous : police blanche sur fond noir ?

[Self]

N'y a t  il pas moyen de modifier cela dans la feuille de style avec un code !important afin de ne pas toucher à la feuille de style originale ?

Si vous pouvez modifier l'original en mettant le votre plus tard dans le code css (donc tout en bas ça fonctionne ! xD), sans même mettre de "!important" (le code css pris en compte lors de l'affichage est par défaut le dernier, sauf si il y a un !important, alors dans ce cas c'est !important qui est affiché)

Utilisez ces codes :

Code:

/*MISE EN FORME QUOTE*/
.quote {
   background-color: COULEUR;   /*fond*/
   border: 1px solid COULEUR;   /*bordure*/
   color: COULEUR;   /*couleur de la police*/
}

/*MISE EN FORME CODE*/
.code div.cont_code {
   background-color: COULEUR;   /*fond*/
   border: 1px solid COULEUR;   /*bordure*/
   color: COULEUR;   /*couleur de la police*/
}

/*MISE EN FORME SPOILER*/
.spoiler {
   background-color: COULEUR;   /*fond*/
   border: 1px solid COULEUR;   /*bordure*/
   color: COULEUR;   /*couleur de la police*/
}

je sais que certaines balises sont composées de plusieurs éléments, s'il y a un souci quelque part, je regarderai à nouveau parce que je ne me souviens plus exactement duquel est quoi xD

Certains sont fait avec des images, ne faudrait-il pas rajouter "background-image: none" dans votre code ?

[MlleAlys]

N'y a t  il pas moyen de modifier cela dans la feuille de style avec un code !important afin de ne pas toucher à la feuille de style originale ?

Si vous pouvez modifier l'original en mettant le votre plus tard dans le code css (donc tout en bas ça fonctionne ! xD), sans même mettre de "!important" (le code css pris en compte lors de l'affichage est par défaut le dernier, sauf si il y a un !important, alors dans ce cas c'est !important qui est affiché)

Utilisez ces codes :

Code:

/*MISE EN FORME QUOTE*/
.quote {
   background-color: COULEUR;   /*fond*/
   border: 1px solid COULEUR;   /*bordure*/
   color: COULEUR;   /*couleur de la police*/
}

/*MISE EN FORME CODE*/
.code div.cont_code {
   background-color: COULEUR;   /*fond*/
   border: 1px solid COULEUR;   /*bordure*/
   color: COULEUR;   /*couleur de la police*/
}

/*MISE EN FORME SPOILER*/
.spoiler {
   background-color: COULEUR;   /*fond*/
   border: 1px solid COULEUR;   /*bordure*/
   color: COULEUR;   /*couleur de la police*/
}

je sais que certaines balises sont composées de plusieurs éléments, s'il y a un souci quelque part, je regarderai à nouveau parce que je ne me souviens plus exactement duquel est quoi xD

Certains sont fait avec des images, ne faudrait-il pas rajouter "background-image: none" dans votre code ?

pour le quote c'est ça ? (il n'y a pas d'image chez moi...)
eh bien, s'il veut retirer l'image, alors oui ^^

Code:

/*MISE EN FORME CODE*/
.code div.cont_code {
   background-color: COULEUR;   /*fond*/
   background-image: none;  /*retire l'image*/
   border: 1px solid COULEUR;   /*bordure*/
   color: COULEUR;   /*couleur de la police*/
}

[Self]

N'y a t  il pas moyen de modifier cela dans la feuille de style avec un code !important afin de ne pas toucher à la feuille de style originale ?

Si vous pouvez modifier l'original en mettant le votre plus tard dans le code css (donc tout en bas ça fonctionne ! xD), sans même mettre de "!important" (le code css pris en compte lors de l'affichage est par défaut le dernier, sauf si il y a un !important, alors dans ce cas c'est !important qui est affiché)

Utilisez ces codes :

Code:

/*MISE EN FORME QUOTE*/
.quote {
   background-color: COULEUR;   /*fond*/
   border: 1px solid COULEUR;   /*bordure*/
   color: COULEUR;   /*couleur de la police*/
}

/*MISE EN FORME CODE*/
.code div.cont_code {
   background-color: COULEUR;   /*fond*/
   border: 1px solid COULEUR;   /*bordure*/
   color: COULEUR;   /*couleur de la police*/
}

/*MISE EN FORME SPOILER*/
.spoiler {
   background-color: COULEUR;   /*fond*/
   border: 1px solid COULEUR;   /*bordure*/
   color: COULEUR;   /*couleur de la police*/
}

je sais que certaines balises sont composées de plusieurs éléments, s'il y a un souci quelque part, je regarderai à nouveau parce que je ne me souviens plus exactement duquel est quoi xD

Certains sont fait avec des images, ne faudrait-il pas rajouter "background-image: none" dans votre code ?

pour le quote c'est ça ? (il n'y a pas d'image chez moi...)
eh bien, s'il veut retirer l'image, alors oui ^^

Code:

/*MISE EN FORME CODE*/
.code div.cont_code {
   background-color: COULEUR;   /*fond*/
   background-image: none;  /*retire l'image*/
   border: 1px solid COULEUR;   /*bordure*/
   color: COULEUR;   /*couleur de la police*/
}

Très bien c'étais une question, car chez moi il y à des images ^^. Merci

[Lacoste]

/*MISE EN FORME CODE*/
.code div.cont_code {
   background-color: COULEUR;   /*fond*/
   background-image: none;  /*retire l'image*/
   border: 1px solid COULEUR;   /*bordure*/
   color: COULEUR;   /*couleur de la police*/
}

Cette section ne fonctionne pas. Aucune couleur n'est prise en compte. Pour les deux autres ca fonctionne très bien. Etes-vous certaine qu'il s'agit bien de .code div.cint_code ? 
C'est le dernier point qui pose problème. Après mon éditeur sera correct

[MlleAlys]

/*MISE EN FORME CODE*/
.code div.cont_code {
   background-color: COULEUR;   /*fond*/
   background-image: none;  /*retire l'image*/
   border: 1px solid COULEUR;   /*bordure*/
   color: COULEUR;   /*couleur de la police*/
}

Cette section ne fonctionne pas. Aucune couleur n'est prise en compte. Pour les deux autres ca fonctionne très bien. Etes-vous certaine qu'il s'agit bien de .code div.cint_code ? 
C'est le dernier point qui pose problème. Après mon éditeur sera correct

auriez vous un lien vers un message avec un code sur votre forum s'il vous plait ? je vais vérifier ça ^^
(puisque oui, c'est bien .code div.cont_code que j'ai utilisé sur mon forum ^^)

[marginal]

MlleAlys, merci encore pour le coup de main !

Vous pouvez visualiser et écrire des messages ici :

http://passionvoile.forumcanada.net/f2-forum-commercial-liens-marinas-ateliers-magasins-ecoles

Ce que je souhaite, c'est que soit les fenêtres sont en blanc et le texte en noir partout soit l'Inverse. Présentement les réponses rapides fonctionnent mais dépendant du mode le texte de la fenêtre réponse est soit blanc soit noir.

Merci d'aider !

Bon j'ai mis le code dans la fenêtre puis validé.  Mais maintenant, ca dérappe encore.

Dans la fenêtre d'édition réponse rapide, ca écrit noir sur noir.
Dans la fenêtre d'édition réponse, ca écrit blanc sur noir en mode WYSIWYG mais en noir sur noir en mode normale.  

Quel bordel !  Quelqu'un peut m'aider ????  Ma boite courriel est pleine de mails de plaintes !  

Merci

Pouvez vous nous donner le css concerné s'il vous plait, ainsi que si possible un lien vers un sujet ouvert aux invités ?
Et aussi, que voulez vous : police blanche sur fond noir ?

[MlleAlys]

MlleAlys, merci encore pour le coup de main !  

Vous pouvez visualiser et écrire des messages ici :  

http://passionvoile.forumcanada.net/f2-forum-commercial-liens-marinas-ateliers-magasins-ecoles

Ce que je souhaite, c'est que soit les fenêtres sont en blanc et le texte en noir  partout soit l'Inverse.  Présentement les réponses rapides fonctionnent mais dépendant du mode le texte de la fenêtre réponse est soit blanc soit noir.  

Merci d'aider !  

(spoiler) MlleAlys a écrit :

Pourriez vous également donner le css que vous avez utilisé pour modifier l'éditeur s'il vous plait ? ^^

(et le texte n'était il pas noir sur blanc partout par défaut ? ^^" en ritirant tout, vous devriez retrouver ça...)

[marginal]

Actuellement, il n'y a aucun code dans la page CSS. la page est blanche !!!

[Self]

(et le texte n'était il pas noir sur blanc partout par défaut ? ^^" en ritirant tout, vous devriez retrouver ça...)

Il me semble aussi.

[MlleAlys]

Actuellement, il n'y a aucun code dans la page CSS.  la page est blanche !!!

ok ! =D

voulez vous plutpot que je vous mette un code pour un bleu sombre plutôt que noir ? ou préférez vous rester sur un fond blanc ? ^^

[mrictdi]

Bonsoir,

Tout d'abord merci pour les premiers éléments qui m'ont permis de commencer à paramétrer le tout. 

Par contre je rencontre un soucis lorsque j'édite un message ou utilise la fonction citer ou là, le texte que je souhaite écrire est noir sur fond noir alors que pourtant, quand je fais une réponse j'ai la bonne couleur souhaitée....est ce que quelqu'un peut m'aider? 

Voici le CSS 




$(function(){ $(function() {
          $('.sceditor-container iframe').contents().find('head').append('
body, p {
    color:#ededed;
    background:#4D4444;
}
blockquote, code {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    color:#ededed; 
    background-color: #4D4444; 
    font-size: 12px; 
    line-height: 125%; 
    border-radius: 20px; 
    padding: 5px 5px 5px 15px; 
    border-width: 0 0 1px 1px; 
    border-style: solid; 
    border-color: rgb(255, 255, 255);
    padding-bottom: 10px;
}
blockquote cite {
    border-color: ##4D4444;
    margin-bottom: 10px;
}
code:before {
    color: #ededed;
}
')
        })});


 
 
 
 
 
/***********************************************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 : black !important;  /****couleur de fond global de l'éditeur*/
}
/*fin général*/
 
 
/*toolbar*/
div.sceditor-toolbar {
    background-color :black !important;  /************couleur de fond de la toolbar*/
    border: none !important;
}
div.sceditor-group {
    background-color: white !important;  /*couleur de fond des groupes de boutons*/
    border: none !important;
}
a.sceditor-button {
    background-color: #878787 !important;  /************couleur de fond des boutons*/
    margin: 1px; /*************************espace entre les boutons dans un groupe*/
}
a.sceditor-button.hover, .sceditor-button.active {
    background-color: white !important;  /***couleur de fond des bouton surlignés*/
}
/*fin toolbar*/
 
/*zone de texte*/
.sceditor-container iframe, .sceditor-container textarea {
    background-color: black !important;   /****couleur de fond de la zone de texte*/
    border: 1px solid black !important; /*couleur de la bordure de la zone de texte*/
    width: 95% !important; /***************************largeur de la zone de texte*/
    color: #FFAA00 !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: black !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: black !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*/
 

et voici le Javascript

$(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 />';
            };
         
       });




$(document).ready(function() {
        $('div.sceditor-container.ltr.wysiwygMode iframe').ready(function() {
            $('div.sceditor-container.ltr.wysiwygMode iframe').contents().find('p').css('color','#FFAA00');
        });
    });


$(function(){ $(function() {
  $(".sceditor-button-emoticon").click(function() {
    $(".smiley").unbind("hover")
  })
})});


$(function() {
  $('#text_editor_textarea').length && $.getScript("http://aska.123.st/17313.js")
});

[marginal]

J'ai mis l'écriture du forum en blanc via le choix de couleur SIMPLE qu'offre la page couleur... pas en code css. parce que le forum et la boite d'édition était foncé.  Mais maintenant qu'elle est blanche on n'y voit plus rien.  

un ou l'autre m'est égal... tant que c'est visible !!!

Suis je seul a penser ca mais...  J'ai l'impression que les administrateurs de FORUMACTIF attendent que leurs membres trouvent les solutions et règlent les problèmes eux même...

[Self]

Bonsoir,

Tout d'abord merci pour les premiers éléments qui m'ont permis de commencer à paramétrer le tout. 

Par contre je rencontre un soucis lorsque j'édite un message ou utilise la fonction citer ou là, le texte que je souhaite écrire est noir sur fond noir alors que pourtant, quand je fais une réponse j'ai la bonne couleur souhaitée....est ce que quelqu'un peut m'aider? 

Voici le CSS 

quote trop long:

Code:



$(function(){ $(function() {
          $('.sceditor-container iframe').contents().find('head').append('
body, p {
    color:#ededed;
    background:#4D4444;
}
blockquote, code {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    color:#ededed;
   background-color: #4D4444;
   font-size: 12px;
   line-height: 125%;
   border-radius: 20px;
   padding: 5px 5px 5px 15px;
   border-width: 0 0 1px 1px;
   border-style: solid;
   border-color: rgb(255, 255, 255);
    padding-bottom: 10px;
}
blockquote cite {
    border-color: ##4D4444;
    margin-bottom: 10px;
}
code:before {
    color: #ededed;
}
')
        })});

Ceci est un code javascript il faut le placé dans PANNEL ADMIN --> MODULES --> GESTION DES CODES JAVASCRIPT --> CREER UN NOUVEAU JAVASCRIPT.

Attention cochez bien sur tout les pages et pour le titre c'est vous qui voyez.

[mrictdi]

Merci pour cette aide, je viens d'essayer mais cela ne règle malheureusement pas mon soucis, en éditer un message ou le citant, je n'ai toujours qu'un texte noir sur fond noir, ce qui n'est pas le cas quand j'utilise la fonction réponse...

[Self]

Merci pour cette aide, je viens d'essayer mais cela ne règle malheureusement pas mon soucis, en éditer un message ou le citant, je n'ai toujours qu'un texte noir sur fond noir, ce qui n'est pas le cas quand j'utilise la fonction réponse...

Je viens de me rendre compte le code que vous avez n'est pas complet .
Prenez celui-ci et édité les partie couleur, cadre, arrondis et tout ce qui va avec ^^.

Code:

        $(function(){ $(function() {
                  $('.sceditor-container iframe').contents().find('head').append('<style type="text/css">
        body, p {
            color:#ededed;
            background:#3b584e;
        }
        blockquote, code {
            width: 90%;
            margin-left: auto;
            margin-right: auto;
            color:#ededed;
            background-color: #4b6f63;
            font-size: 12px;
            line-height: 125%;
            border-radius: 20px;
            padding: 5px 5px 5px 15px;
            border-width: 0 0 1px 1px;
            border-style: solid;
            border-color: rgb(255, 255, 255);
            padding-bottom: 10px;
        }
        blockquote cite {
            border-color: #3b584e;
            margin-bottom: 10px;
        }
        code:before {
            color: #ededed;
        }
        </style>')
                })});

[mrictdi]

Yepa j'ai l'impression que c'est la bonne là !!!! Un sacré grand merci !!!

Si tu es sur la région parisienne, je t'offre un coup à boire quand tu le souhaites, ça sera avec un grand plaisir !

[MlleAlys]

MlleAlys, merci encore pour le coup de main !  

Vous pouvez visualiser et écrire des messages ici :  

http://passionvoile.forumcanada.net/f2-forum-commercial-liens-marinas-ateliers-magasins-ecoles

Ce que je souhaite, c'est que soit les fenêtres sont en blanc et le texte en noir  partout soit l'Inverse.  Présentement les réponses rapides fonctionnent mais dépendant du mode le texte de la fenêtre réponse est soit blanc soit noir.  

Merci d'aider !  

Essayez de coller ceci dans votre page css :

Code:

/***********************************************APPARENCE NOUVEL EDITEUR*/
 
 
/*général*/
.sceditor-container {
    width: 100% !important;  /********************************largeur de l'édieur*/
    text-align: center;  /*centrage de l'éditeur et des boutons*/
    border: none !important;  /*bordure autour de l'éditeur (aucune)*/
    background: none !important;  /*fond global de l'éditeur (aucun)*/
}
.sceditor-container.ltr.wysiwygMode, .sceditor-container.ltr.sourceMode, {
    background-color : #203B6B !important;  /****couleur de fond global de l'éditeur*/
    color: white;
    border:none !important;
}
/*fin général*/
 


 
/*toolbar*/
div.sceditor-toolbar {
    background: none !important;  /************couleur de fond de la toolbar*/
    border: none !important;  /*bordure de la barre d'outils*/
}
a.sceditor-button.hover, .sceditor-button.active, a.sceditor-button:hover {
    background-color: white !important;  /*couleur de fond des bouton surlignés*/
}
.sceditor-dropdown, .sceditor-dropdown label, .sceditor-dropdown .button {
    color: white !important;  /**couleur de la police dans l'encadré lorsqu'on clique sur un bouton*/
}
.sceditor-dropdown {
    background-color : #203B6B !important;  /*couleur de fond des encadrés lorsqu'on clique sur un bouton*/
    color: white; /*couleur de la police dans les encadrés*/
    border: 1px solid white !important; /*bordure des encadrés*/
}
.sceditor-dropdown textarea, .sceditor-dropdown input {
    background-color: #15436B !important;  /******couleur de fond des zones de saisie*/
    color: white !important;   /*couleur d'écriture dans les zones de sasie*/
}
.sceditor-fontsize-option, .sceditor-font-option {
    color: white !important;  /*couleur des tailles de texte et des polices*/
}
.sceditor-fontsize-option:hover, .sceditor-font-option:hover {
    background: #15436B !important;  /*couleur de fond au survol des tailles de texte et des polices*/
}
.
/*fin toolbar*/


 
/*zone de texte*/
.sceditor-container iframe, .sceditor-container textarea {
    background-color: #15436B !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*/


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





/******************MISE EN FORME BALISE CODE ET CITATION*/
dl.codebox, codebox dd, .content blockquote {
    color: white;
    background-color: #12213B;
}
/*FIN BALISES CODE ET CITATION*/

Puis ce code ci dans les javascripts (ce code est pour la mise en forme en mode wysiwyg ):
- allez dans modules > gestion des codes javascripts
- vérifier que la gestion des codes 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"
- collez ce code dans la zone de saisie :

Code:

$(function(){ $(function() {
          $('.sceditor-container iframe').contents().find('head').append('<style type="text/css">
body, p {
    color:white;  /*couleur de la police*/
    background:#15436B;  /*couleur de fond de la zone de saisie*/
}
blockquote, code {
    color:white; /*couleur de la police dans les citations et les codes*/
    background-color: #12213B;  /*couleur de fond des citations et codes*/
    font-size: 12px; /*taille de la police dans les citations et codes*/
    border: 1px solid white; /*bordure des citations et codes*/
    padding-bottom: 10px;
}
blockquote cite {
    color: white;  /*couleur de l'auteur dans la citation*/
    border-color: #15436B;  /*couleur de la bordure sous l auteur*/
    margin-bottom: 10px;
}
code:before {
    color: white;  /*couleur du mot code*/
}
</style>')
        })});

- validez !


Il est possible que j'ai oublié certaines choses, y a t il encore des soucis quelque part ? ^^

[Self]

Yepa j'ai l'impression que c'est la bonne là !!!! Un sacré grand merci !!!

Si tu es sur la région parisienne, je t'offre un coup à boire quand tu le souhaites, ça sera avec un grand plaisir !

Content d'avoir pu t'aider.
Je ne suis pas de la region parisienne mais merci, c'est sympa de proposé.
Bonne soirée.

[marginal]

Voici le message que j'obtiens, que dois-je faire ?

Erreur détectée
Nous avons compté un nombre différent de "{" et de "}". 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.

MlleAlys, merci encore pour le coup de main !  

Vous pouvez visualiser et écrire des messages ici :  

http://passionvoile.forumcanada.net/f2-forum-commercial-liens-marinas-ateliers-magasins-ecoles

Ce que je souhaite, c'est que soit les fenêtres sont en blanc et le texte en noir  partout soit l'Inverse.  Présentement les réponses rapides fonctionnent mais dépendant du mode le texte de la fenêtre réponse est soit blanc soit noir.  

Merci d'aider !  

Essayez de coller ceci dans votre page css :

Code:

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

/*général*/
.sceditor-container {
    width: 100% !important;  /********************************largeur de l'édieur*/
    text-align: center;  /*centrage de l'éditeur et des boutons*/
    border: none !important;  /*bordure autour de l'éditeur (aucune)*/
    background: none !important;  /*fond global de l'éditeur (aucun)*/
}
.sceditor-container.ltr.wysiwygMode, .sceditor-container.ltr.sourceMode, {
    background-color : #203B6B !important;  /****couleur de fond global de l'éditeur*/
    color: white;
    border:none !important;
}
/*fin général*/
 



/*toolbar*/
div.sceditor-toolbar {
    background: none !important;  /************couleur de fond de la toolbar*/
    border: none !important;  /*bordure de la barre d'outils*/
}
a.sceditor-button.hover, .sceditor-button.active, a.sceditor-button:hover {
    background-color: white !important;  /*couleur de fond des bouton surlignés*/
}
.sceditor-dropdown, .sceditor-dropdown label, .sceditor-dropdown .button {
    color: white !important;  /**couleur de la police dans l'encadré lorsqu'on clique sur un bouton*/
}
.sceditor-dropdown {
    background-color : #203B6B !important;  /*couleur de fond des encadrés lorsqu'on clique sur un bouton*/
    color: white; /*couleur de la police dans les encadrés*/
    border: 1px solid white !important; /*bordure des encadrés*/
}
.sceditor-dropdown textarea, .sceditor-dropdown input {
    background-color: #15436B !important;  /******couleur de fond des zones de saisie*/
    color: white !important;   /*couleur d'écriture dans les zones de sasie*/
}
.sceditor-fontsize-option, .sceditor-font-option {
    color: white !important;  /*couleur des tailles de texte et des polices*/
}
.sceditor-fontsize-option:hover, .sceditor-font-option:hover {
    background: #15436B !important;  /*couleur de fond au survol des tailles de texte et des polices*/
}
.
/*fin toolbar*/


 
/*zone de texte*/
.sceditor-container iframe, .sceditor-container textarea {
    background-color: #15436B !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*/


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





/******************MISE EN FORME BALISE CODE ET CITATION*/
dl.codebox, codebox dd, .content blockquote {
    color: white;
    background-color: #12213B;
}
/*FIN BALISES CODE ET CITATION*/

Puis ce code ci dans les javascripts (ce code est pour la mise en forme en mode wysiwyg ):
- allez dans modules > gestion des codes javascripts
- vérifier que la gestion des codes 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"
- collez ce code dans la zone de saisie :

Code:

$(function(){ $(function() {
          $('.sceditor-container iframe').contents().find('head').append('<style type="text/css">
body, p {
    color:white;  /*couleur de la police*/
    background:#15436B;  /*couleur de fond de la zone de saisie*/
}
blockquote, code {
    color:white; /*couleur de la police dans les citations et les codes*/
    background-color: #12213B;  /*couleur de fond des citations et codes*/
    font-size: 12px; /*taille de la police dans les citations et codes*/
    border: 1px solid white; /*bordure des citations et codes*/
    padding-bottom: 10px;
}
blockquote cite {
    color: white;  /*couleur de l'auteur dans la citation*/
    border-color: #15436B;  /*couleur de la bordure sous l auteur*/
    margin-bottom: 10px;
}
code:before {
    color: white;  /*couleur du mot code*/
}
</style>')
        })});

- validez !


Il est possible que j'ai oublié certaines choses, y a t il encore des soucis quelque part ? ^^

[MlleAlys]

Voici le message que j'obtiens, que dois-je faire ?

Erreur détectée
Nous avons compté un nombre différent de "{" et de "}". 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.

(spoiler) MlleAlys a écrit :

je compte le même nombre de { et } , mais par contre, jsute avant /*fin toolbar*/, il y a un petit point en trop qui traine, enlève le, revalide, et voit s'il te détecte encore une erreur ^^"