[Topic Unique] Apparence du nouvel éditeur de messages

Page 32 sur 34 Précédent  1 ... 17 ... 31, 32, 33, 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

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.



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 Lacoste le Mar 18 Juin 2013 - 19:44

@Ea a écrit:sur phpbb3 on peut changer la couleur du contenu d'une balise code par :

Code:
dl.codebox code { color: red; }
pour la citation je ne vois pas de quoi vous parlez, mais sinon si ça n'a pas de rapport avec l'éditeur il y a la section gérer l'apparence du forum faite pour cela.

Merci, ce code fonctionne.

Encore un point:
Comment modifier, dans la fenêtre d'édition la couleur du mot "Code" qui est en noir, au-dessus de la fenêtre d'édition du code ?
Et, est-il normal que l'on ne voie pas le curseur de la souris dans ces fenêtes ?

Lacoste
*

Masculin
Messages : 48
Inscrit(e) le : 29/06/2011

http://voltigeurs.forum-canada.net/forum
Lacoste a été remercié(e) par l'auteur de ce sujet.

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

Message par Bad_girls le Mar 18 Juin 2013 - 19:50

SeLfde4Th7 a écrit:
@indo571 a écrit:Bonjour

Juste pour vous demander comment faire avec les mp..

Certains membres n'arrivent pas a répondre aux messages privés ,
voici un de ses messages
"
impossible de repondre aux mp que g recu... ca bug a mort et je suis oblige de fermer carrement le fofo a chaque fois et de le reouvrir...pour de toute facon ne toujours pas savoir repondre...!!!
g essaye plus d'une dizaine de fois hier en soiree ainsi que se matin et ...impossible...dsl pour les reponses..."


Est ce que je sais l'aider ?

Merci pour votre aide...

Désoler, je me vois dans l'incapacité de vous aidé.
J'ai déjà un peut de mal malgré quelque connaissance avec la gestion de l'apparence de l'éditeur.
Essayez d'ouvrir un nouveau sujet au bon endroit.

Bonsoir!

Essaie de regarder là, si tu trouves une solution, dis à tes membres qui ont des soucis de changer de navigateur Wink

http://forum.forumactif.com/t352587-topic-unique-3091-l-editeur-plante-sous-ie


Bad_girls
*****

Féminin
Messages : 628
Inscrit(e) le : 21/09/2010

http://leforumdesamis.monally.com/portal.htm
Bad_girls a été remercié(e) par l'auteur de ce sujet.

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

Message par mrictdi le Mar 18 Juin 2013 - 22:16

Bonsoir,

Il semble que le code ne fonctionne pas, j'ai beau copier ceci dans mon CSS, rien ne se passe..



.sceditor-button.sceditor-button-right{
 display: none;
}
.sceditor-button.sceditor-button-justify{
 display: none;
}
.sceditor-button.sceditor-button-bulletlist{
 display: none;
}
.sceditor-button.sceditor-button-orderedlist{
 display: none;
}
.sceditor-button.sceditor-button-horizontalrule{
 display: none;
}
.sceditor-button.sceditor-button-quote{
 display: none;
}
.sceditor-button.sceditor-button-code{
 display: none;
}
.sceditor-button.sceditor-button-faspoiler{
 display: none;
}
.sceditor-button.sceditor-button-fahide{
 display: none;
}
.sceditor-button.sceditor-button-font{
 display: none;
}
.sceditor-button.sceditor-button-removeformat{
 display: none;
}
.sceditor-button.sceditor-button-more{
 display: none;
}
.sceditor-button.sceditor-button-subscript{
 display: none;
}
.sceditor-button.sceditor-button-superscript{
 display: none;
}
.sceditor-button.sceditor-button-fascroll{
 display: none;
}
.sceditor-button.sceditor-button-faupdown{
 display: none;
}
.sceditor-button.sceditor-button-fawow{
 display: none;
}
.sceditor-button.sceditor-button-farand{
 display: none;
}
.sceditor-button.sceditor-button-date{
 display: none;
}
.sceditor-button.sceditor-button-time{
 display: none;
}

mrictdi
*

Messages : 33
Inscrit(e) le : 16/07/2010

http://www.ktmmania.net
mrictdi a été remercié(e) par l'auteur de ce sujet.

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

Message par Self le Mar 18 Juin 2013 - 22:28

@mrictdi a écrit:Bonsoir,

Il semble que le code ne fonctionne pas, j'ai beau copier ceci dans mon CSS, rien ne se passe..



trop long:
.sceditor-button.sceditor-button-right{
 display: none;
}
.sceditor-button.sceditor-button-justify{
 display: none;
}
.sceditor-button.sceditor-button-bulletlist{
 display: none;
}
.sceditor-button.sceditor-button-orderedlist{
 display: none;
}
.sceditor-button.sceditor-button-horizontalrule{
 display: none;
}
.sceditor-button.sceditor-button-quote{
 display: none;
}
.sceditor-button.sceditor-button-code{
 display: none;
}
.sceditor-button.sceditor-button-faspoiler{
 display: none;
}
.sceditor-button.sceditor-button-fahide{
 display: none;
}
.sceditor-button.sceditor-button-font{
 display: none;
}
.sceditor-button.sceditor-button-removeformat{
 display: none;
}
.sceditor-button.sceditor-button-more{
 display: none;
}
.sceditor-button.sceditor-button-subscript{
 display: none;
}
.sceditor-button.sceditor-button-superscript{
 display: none;
}
.sceditor-button.sceditor-button-fascroll{
 display: none;
}
.sceditor-button.sceditor-button-faupdown{
 display: none;
}
.sceditor-button.sceditor-button-fawow{
 display: none;
}
.sceditor-button.sceditor-button-farand{
 display: none;
}
.sceditor-button.sceditor-button-date{
 display: none;
}
.sceditor-button.sceditor-button-time{
 display: none;
}

Rajouter "!important" derrière chaque "none;" cela devrais fonctionner thumleft

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

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

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

Message par mrictdi le Mar 18 Juin 2013 - 22:35

Comme ceci? 
 display: none; !important
}

mrictdi
*

Messages : 33
Inscrit(e) le : 16/07/2010

http://www.ktmmania.net
mrictdi a été remercié(e) par l'auteur de ce sujet.

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

Message par Lacoste le Mar 18 Juin 2013 - 22:36

@mrictdi a écrit:Comme ceci? 
 display: none; !important
}

Non, comme ceci :
display: none !important;

Lacoste
*

Masculin
Messages : 48
Inscrit(e) le : 29/06/2011

http://voltigeurs.forum-canada.net/forum
Lacoste a été remercié(e) par l'auteur de ce sujet.

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

Message par Lacoste le Mar 18 Juin 2013 - 22:37

Personne n'a une idée pour mon problème que je repose :

Comment modifier, dans la fenêtre d'édition la couleur du mot "Code" qui est en noir, au-dessus de la fenêtre d'édition du code ?
Et, est-il normal que l'on ne voit pas le curseur de la souris dans ces fenêtes ?

Lacoste
*

Masculin
Messages : 48
Inscrit(e) le : 29/06/2011

http://voltigeurs.forum-canada.net/forum
Lacoste a été remercié(e) par l'auteur de ce sujet.

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

Message par Self le Mar 18 Juin 2013 - 22:53

@Lacoste a écrit:Personne n'a une idée pour mon problème que je repose :

Comment modifier, dans la fenêtre d'édition la couleur du mot "Code" qui est en noir, au-dessus de la fenêtre d'édition du code ?
Et, est-il normal que l'on ne voit pas le curseur de la souris dans ces fenêtes ?

Dans ce code la:
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>')
                })});

après
Code:
blockquote cite{
Mettre
Code:
color:#COULEUR

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

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

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

Message par mrictdi le Mar 18 Juin 2013 - 23:04

Désolé de passer pour un vil boulet mais en copiant le code ci dessous, cela n'a aucune incidence sur la barre....

.sceditor-button.sceditor-button-code {
display: none !important;
}

mrictdi
*

Messages : 33
Inscrit(e) le : 16/07/2010

http://www.ktmmania.net
mrictdi a été remercié(e) par l'auteur de ce sujet.

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

Message par Self le Mar 18 Juin 2013 - 23:10

@mrictdi a écrit:Désolé de passer pour un vil boulet mais en copiant le code ci dessous, cela n'a aucune incidence sur la barre....

.sceditor-button.sceditor-button-code {
display: none !important;
}

Je ne vois pourtant aucune erreur, pourriez vous coller le CSS complet de votre personalisation de l'éditeur ?

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

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

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

Message par mrictdi le Mar 18 Juin 2013 - 23:12

Code:
.navbar ul{padding-bottom : 4px;}


#wrap {
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
padding: 8px;
}


div, table {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border: none;
}


#gauche {
background:#E4EFFF url(images/fond-arrondi.png) no-repeat bottom left;
margin:auto;
max-width:2007px;
}

#droite {
background:#E4EFFF url(images/fond-arrondi.png) no-repeat bottom right;
margin-left:10px;
padding-bottom:20px;
}

#haut {
background:#E4EFFF url(images/fond-arrondi.png) no-repeat top right;
margin-left:-10px;
padding:0;
}

#haut div {
background:#E4EFFF url(images/fond-arrondi.png) no-repeat top left;
height:7px;
width:7px;
}


div#conteneur_test {
background:#f00 url(corner_hg.jpg) no-repeat left top;
width:60%;
}

div#conteneur_test h3 {
background:url(corner_hd.jpg) no-repeat right top;
margin-top:0;
padding-top:20px;
margin-left:20px;
}

div#conteneur_test ul {
margin-left:0;
padding-left:40px;
background:#afa url(corner_bg.jpg) no-repeat left bottom;
margin-bottom:0px;
}

div#conteneur_test ul li.last_element{
background:url(corner_bd.jpg) no-repeat right bottom;
margin-bottom:0;
padding-bottom:20px;
}

/* arrondi autour dernier sujet */
.arrondi {border: 4px solid #6B5E4A;-moz-border-radius-topleft: 10px;-moz-border-radius-bottomright: 10px; }


.row3 a {text-shadow: #000000 1px 1px 1px;}

.name div span {text-shadow: #000000 1px 1px 1px;}


.

#search-box{height:1px;visibility:hidden;}

     
     
         
/***********************************************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 : #2E2E2D !important;  /****couleur de fond global de l'éditeur*/
}
/*fin général*/
 
 
/*toolbar*/
div.sceditor-toolbar {
    background-color :#2E2E2D !important;  /************couleur de fond de la toolbar*/
    border: none !important;
}
div.sceditor-group {
    background-color: black !important;  /*couleur de fond des groupes de boutons*/
    border: none !important;
}
a.sceditor-button {
    background-color: white !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: #2E2E2D !important;  /****couleur de fond de la zone de texte*/
    border: 1px solid #2E2E2D !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;
    margin: 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*/
 


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


.sceditor-button.sceditor-button-right {
display: none !important;
}
.sceditor-button.sceditor-button-justify {
display: none !important;
}
.sceditor-button.sceditor-button-bulletlist {
display: none !important;
}
.sceditor-button.sceditor-button-orderedlist {
display: none !important;
}
.sceditor-button.sceditor-button-horizontalrule {
display: none !important;
}
.sceditor-button.sceditor-button-quote {
display: none !important;
}
.sceditor-button.sceditor-button-code {
display: none !important;
}
.sceditor-button.sceditor-button-faspoiler {
display: none !important;
}
.sceditor-button.sceditor-button-fahide {
display: none !important;
}
.sceditor-button.sceditor-button-font {
display: none !important;
}
.sceditor-button.sceditor-button-removeformat {
display: none !important;
}
.sceditor-button.sceditor-button-more {
display: none !important;
}
.sceditor-button.sceditor-button-subscript {
display: none !important;
}
.sceditor-button.sceditor-button-superscript {
display: none !important;
}
.sceditor-button.sceditor-button-fascroll {
display: none !important;
}
.sceditor-button.sceditor-button-faupdown {
display: none !important;
}
.sceditor-button.sceditor-button-fawow {
display: none !important;
}
.sceditor-button.sceditor-button-farand {
display: none !important;
}
.sceditor-button.sceditor-button-date {
display: none !important;
}
.sceditor-button.sceditor-button-time {
display: none !important;
}

Le voici

mrictdi
*

Messages : 33
Inscrit(e) le : 16/07/2010

http://www.ktmmania.net
mrictdi a été remercié(e) par l'auteur de ce sujet.

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

Message par Self le Mar 18 Juin 2013 - 23:19

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

C'est ceci qui fait tout beuguer.
Vous devais mettre ce code dans PA --> MODULES ---> GESTION DES JAVASCRIPT --> CREER UN NOUVEAU JAVASCRIPT
Et cocher la case sur toute les pages.

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

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

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

Message par mrictdi le Mar 18 Juin 2013 - 23:23

J'ai déjà testé de l'enlever, le problème c'est que si j'enlève ce texte de mon CSS pour le mettre dans mon javascript, j'obtiens plus ce résultat en lecture lors des citations, mais quelque chose de carré pas très joli...


mrictdi
*

Messages : 33
Inscrit(e) le : 16/07/2010

http://www.ktmmania.net
mrictdi a été remercié(e) par l'auteur de ce sujet.

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

Message par mrictdi le Mar 18 Juin 2013 - 23:28

En mettant ce pavé après les codes pour enlever les boutons, je viens de m'apercevoir que cela fonctionnait chouette !!! merci pour ton aide

mrictdi
*

Messages : 33
Inscrit(e) le : 16/07/2010

http://www.ktmmania.net
mrictdi a été remercié(e) par l'auteur de ce sujet.

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

Message par Self le Mar 18 Juin 2013 - 23:34

@mrictdi a écrit:En mettant ce pavé après les codes pour enlever les boutons, je viens de m'apercevoir que cela fonctionnait chouette !!! merci pour ton aide

Tu est en train de me dire que tu as mit un code JavaScript dans ta feuille de style CSS et que ce code ne fonctionne que quand il est la dedans est pas dans la gestion de codes JavaScript ?
Peut être n'as tu pas activer la gestion des code Javascript ?

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

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

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

Message par mrictdi le Mar 18 Juin 2013 - 23:36

Non les javascript sont activés chez moi.
En mettant ce code dans ma feuille CSS, ça induit des citations comme dans la copie d'écran qui sont arrondies et chouettes niveau présentation, si j'enlève le code, ça devient carré...

mrictdi
*

Messages : 33
Inscrit(e) le : 16/07/2010

http://www.ktmmania.net
mrictdi a été remercié(e) par l'auteur de ce sujet.

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

Message par Self le Mar 18 Juin 2013 - 23:44

@mrictdi a écrit:Non les javascript sont activés chez moi.
En mettant ce code dans ma feuille CSS, ça induit des citations comme dans la copie d'écran qui sont arrondies et chouettes niveau présentation, si j'enlève le code, ça devient carré...

Ta feuille de style CSS prend en compte seulement cette partie du code :

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

le code complet :
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;
        }
        ')
                })});

est pour le style dans l'éditeur de message en mode wysiwyg.

Donc la partie suivante:
Code:

$(function(){ $(function() {
                  $('.sceditor-container iframe').contents().find('head').append('
......
      ')
                })});

ne te sert à rien.

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

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

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

Message par mrictdi le Mar 18 Juin 2013 - 23:48

Ok très clair, je corrige sur le champs merci beaucoup

mrictdi
*

Messages : 33
Inscrit(e) le : 16/07/2010

http://www.ktmmania.net
mrictdi a été remercié(e) par l'auteur de ce sujet.

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

Message par MlleAlys le Mar 18 Juin 2013 - 23:52

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

Ce code est un code javascript qui permet de mettre en forme entre autre les citations et les codes  dans lafenêtre de l'éditeur en mode wysiwyg en y intégrant du css.

en effet...:
En effet la zone de saise en wysiwyg de l'éditeur n'est pas vraiment sur la page du forum, mais visible via une "iframe", c'est à dire une sorte de fenêtre qui permet de voir au travers une autre page... Or, le css qui se trouve dans votre panneau d'administration ne s'applique qu'aux pages du forum, et pas à celles qui sont seulement visibles via les iframes ! Pour ajouter une mise en forme au mode wysiwyg, il faut donc réussir à ajouter une mise en forme css sur la page d'origine... Et c'est possible via le javascript ! \o/  
D'où un code javascript qui comporte un code css, pour aller mettre ce dernier sur la page réelle de l'éditeur avant que cela soit visible sur notre forum Wink


Bref, le code plus haut est équivalent à celui là, simplifié (puisque celui au dessus est celui que j'ai utilisé pour les mettre en forme exactement de la même façon que les codes et citations sur mon forum, sur lesquelles j'avais déjà fait pas mal de modifications ^^") :
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-*/
}

</style>')
       })});

Pour l'installer :
- allez dans modules > gestion des codes javascript
- vérifiez 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)
- collez le code dans la zone de saisie, remplacez "COULEUR" par les codes des couleurs de votre choix.
- validez.


Pour modifier l'apparence des codes et citations dans les messages de votre forum, et non dans l'éditeur, pas besoin d'un javascript, le code css doit être coller dans votre feuille de style css sur votre panneau d'administration (Affichage > couleurs > onglet feuille de style css) pour être installé directement sur toutes les pages du forum !
Ce code css, puisqu'il a le même but, ressemblera peut être beaucoup à celui qui est dans le code javascript au dessus, mais ce n'est pas le même ! Wink(les éléments définissant les codes et citations n'ont pas forcément le même nom que dans l'éditeur ^^)


En espérant que cette "petite" explication en éclaire certains ^^"


Dernière édition par MlleAlys le Mer 19 Juin 2013 - 0:08, édité 2 fois

MlleAlys
+ Hyperactif +

Messages : 4407
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 mrictdi le Mar 18 Juin 2013 - 23:56

Ok dernière question normalement ensuite je pense être tout bon par rapport à ma capacité versus ce que je souhaitais faire. 

Je souhaite réduire la taille de la zone de texte, le problème c'est qu'en la réduisant, je souhaiterais la centrer sur la page mais ne connais pas la bonne formule...

J'ai compris que la taille se passait dans ce code
Code:
.sceditor-container {
    width: 90% !important;  /********************************largeur de l'édieur*/
    text-align: center;
    border: none !important;

Par contre pour centrer la zone de texte je sêche...

mrictdi
*

Messages : 33
Inscrit(e) le : 16/07/2010

http://www.ktmmania.net
mrictdi 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 19 Juin 2013 - 0:04

@mrictdi a écrit:Ok dernière question normalement ensuite je pense être tout bon par rapport à ma capacité versus ce que je souhaitais faire. 

Je souhaite réduire la taille de la zone de texte, le problème c'est qu'en la réduisant, je souhaiterais la centrer sur la page mais ne connais pas la bonne formule...

J'ai compris que la taille se passait dans ce code
Code:
.sceditor-container {
    width: 90% !important;  /********************************largeur de l'édieur*/
    text-align: center;
    border: none !important;

Par contre pour centrer la zone de texte je sêche...

LE truc pour centrer un élément, c'est de mettre ses marges en "automatique", comme ça il affiche la même à gauche et à droite, donc l'élément est centré ! \o/
Code:
.sceditor-container {
    width: 90% !important;  /********************************largeur de l'édieur*/
    text-align: center;
    margin: auto;
    border: none !important;

MlleAlys
+ Hyperactif +

Messages : 4407
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 mrictdi le Mer 19 Juin 2013 - 0:12

Merci pour ton retour, et en rabe je commence à devenir bon j'ai rajouté !important; après auto et ça fonctionne nickel. Merci beaucoup

mrictdi
*

Messages : 33
Inscrit(e) le : 16/07/2010

http://www.ktmmania.net
mrictdi 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 19 Juin 2013 - 0:14

ah oui, le !important était sans doute nécessaire, désolée ^^"

MlleAlys
+ Hyperactif +

Messages : 4407
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 mrictdi le Mer 19 Juin 2013 - 0:27

Je n'ai pas vu / lu comment enelver l'inscription que j'ai en bas à droite


Le HTML est Activé
Le BBCode est Activé
Les Smileys sont Activés





Auriez vous une idée? car cela mange pas mal de place et au final induit en erreur lors de l'on essaye d'écrire en cas de citation d'un article précédent...

mrictdi
*

Messages : 33
Inscrit(e) le : 16/07/2010

http://www.ktmmania.net
mrictdi a été remercié(e) par l'auteur de ce sujet.

Unique Hauteur du nouvel éditeur

Message par PaulTemps le Mer 19 Juin 2013 - 0:35

Salut,

Voici un problème que j'ai avec certains utilisateurs de mon forum sur phpbb3.

Sous Internet Explorer, la boite de l'éditeur est trop petite sur la hauteur et quand ils utilisent la petit flêche dans le coin en bas à droite, il peuvent agrandir de gauche à droite mais pas de haut en bas.



Est-ce que d'autres utilisateurs ont rancontré ce même problème?

Merci

PaulTemps
Nouveau membre

Messages : 5
Inscrit(e) le : 17/05/2013

PaulTemps 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 19 Juin 2013 - 0:36

@mrictdi a écrit:Je n'ai pas vu / lu comment enelver l'inscription que j'ai en bas à droite


Le HTML est Activé
Le BBCode est Activé
Les Smileys sont Activés





Auriez vous une idée? car cela mange pas mal de place et au final induit en erreur lors de l'on essaye d'écrire en cas de citation d'un article précédent...

aurais tu un lien stp ? ^^

MlleAlys
+ Hyperactif +

Messages : 4407
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 mrictdi le Mer 19 Juin 2013 - 0:37

http://www.ktmmania.net/forum

Le problème c'est que si pas inscrit sur le forum, tu ne pourras tester....

mrictdi
*

Messages : 33
Inscrit(e) le : 16/07/2010

http://www.ktmmania.net
mrictdi a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par marginal le Mer 19 Juin 2013 - 0:45

J'aimrerais prendre quelque lignes pour souligner l'IMMENSE apport de deux membres qui ont été présent et plus que généreux de leur temps et conseils...  

Merci beaucoup a SeLfde4Th7 et a MlleAlys.

J'en revient juste pas... vous êtes plus présent et aidant que Forumactif !!!

MERCI !

marginal
*

Messages : 47
Inscrit(e) le : 19/03/2011

http://passionvoile.forumcanada.net/forum
marginal a été remercié(e) par l'auteur de ce sujet.

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

Message par Self le Mer 19 Juin 2013 - 0:55

@marginal a écrit:J'aimrerais prendre quelque lignes pour souligner l'IMMENSE apport de deux membres qui ont été présent et plus que généreux de leur temps et conseils...  

Merci beaucoup a SeLfde4Th7 et a MlleAlys.  

J'en revient juste pas... vous êtes plus présent et aidant que Forumactif !!!  

MERCI !

Au plaisir thumleft .
C'est un forum d'entraide, à un moment ou un autre, on en à fait de même pour moi, alors pour le peut de connaissance que j'ai si je peut aider autant le faire =).

J'en viens à un problème, je ne voulais déranger personnes mais j'ai essayer plusieur chose avant de poster et je n'y arrive pas je voudrais comme sur le screen que je vais fournir que "Réponse rapide" ce place à l'endroit du cadre rouge vide.
Et que ce qu'il y a dans le cadre jaune ne soit plus la, mais je ne trouve même pas leur ID.


Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

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

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

Message par marginal le Mer 19 Juin 2013 - 0:59

De retour...

voici ce que ca donne quand je copie colle les codes que vous me donnez. 2 colonnes de chiffres. je suis incapable de juste sélectionner le texte... les chiffres viennent avec doublant du coup les chiffres danslafenêtre de codes css...



@marginal a écrit: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 a écrit:
@marginal a écrit: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 Wink):
- 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 ? ^^

marginal
*

Messages : 47
Inscrit(e) le : 19/03/2011

http://passionvoile.forumcanada.net/forum
marginal a été remercié(e) par l'auteur de ce sujet.

Page 32 sur 34 Précédent  1 ... 17 ... 31, 32, 33, 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