AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Personnalisation du nouvel éditeur FA

    Partagez
    En ligne
    Okhmhaka
    FémininAge : 31Messages : 31712

    le Ven 14 Juin 2013 - 14:45


    Modifier/personnaliser l'Editeur de message


    Note : l'éditeur étant actuellement en version bêta et susceptible de surbir des modifications, ce tutoriel pourra être modifié ou adapté en fonction.

    Depuis le 13/06/2013 ForumActif s'est équipé d'un nouvel éditeur de message, plus moderne, aux formes plus arrondies que le précédent, mais qui dans un premier abord peut paraitre moins esthétique, surtout pour les forum aux teintes sombres.


    Pourtant, comme tout le reste, il est possible de le personnaliser en changeant ses couleurs pour l'accorder avec le reste de votre forum. Il serait en effet dommage qu'il reste blanc sur un fond sombre, forçant vos yeux à passer d'un environnement clair à un environnement foncé lors de l'écriture puis de la lecture des messages.
    Voici comment le modifier simplement, en utilisant seulement le CSS.

    Commençons par modifier l'ensemble du bloc, nous passerons à ce qu'il contient ensuite. Ce bloc porte le nom de : "sceditor-container" et c'est une "class", ce nom devra donc être précédé d'un "point" dans le css.


    (Le bloc complet est ce qui apparait avec un fond rouge et des bordures roses pâles sur mon screen)

    Code:
    .sceditor-container
    {
    ...vos propriétés
    }

    Là, si vous tentez d'y appliquer un fond, une couleur par exemple, vous pourrez constater qu'il ne se passe rien. Pourtant, vous êtes bien sur la bonne zone. Votre propriété css ne fonctionnera que si vous y ajoutez l'élément "!important" en fin de ligne. Cet élément sert à faire passer une propriété "en force" en la plaçant comme prioritaire face à celle par défaut. Normalement sur ForumActif la feuille CSS est prioritaire sur le css de base, mais il y a des exceptions, comme par exemple le surlignement des liens, vous avez peut-être pu le constater.
    Toutes les propriétés que vous attribuerez à cet éditeur devront être mises en "important".

    L'éditeur ne prenant pas toute la largeur du bloc où il se trouve, on peut commencer par l'agrandir et le centrer :

    Code:
    .sceditor-container
    {
    width: 98% !important;
    margin: auto !important;
    }

    Comme vous le voyez, il faut à chaque ligne l'indication "!important" qui force la propriété à passer par dessus celle déjà présente dans le template.

    Si vous voulez ajouter des marges en haut et en has de votre bloc, faites comme ceci :

    Code:
    .sceditor-container
    {
    width: 98% !important;
    margin: 10px auto !important;
    }

    Le "10 px" s'appliquera en haut et en bas, changez-le selon votre goût, et si vous préférez détailler faites :

    Code:
    .sceditor-container
    {
    width: 98% !important;
    margin: 10px auto 10px auto !important;
    }

    La règle ici c'est que chaque valeur s'applique à un côté, et toujours dans l'ordre suivant : HAUT – DROITE – BAS – GAUCHE. En clair vous partez du haut et vous tournez dans le sens des aiguilles d'une montre, et vous savez à quoi se rapporte chaque valeur de votre "margin".

    Pour appliquer un fond et une bordure c'est le même principe, toujours avec le "!important".

    Code:
    .sceditor-container
    {
    width: 98% !important;
    margin: 10px auto !important;
    background: #333333 !important;
    border: 1px solid #000000 !important;
    }


    Remarque : vous pouvez appliquez une couleur de fond autant qu'une image de fond, la faire se répéter ou non, toutes les propriétés fonctionnent dès lors que vous n'oubliez le "!important" en fin de ligne.

    Attention : par défaut ce bloc possède une bordure claire (gris très clair), si vous ne voulez pas la garder mais que vous ne voulez pas non plus une autre bordure mettez en propriété de bordure :

    Code:
    border: none !important;


    Passons à la zone d'en-tête du cadre où se trouvent les boutons. Cette zone s'appelle : "sceditor-toolbar", et c'est également une "class".
    De la même manière que pour l'ensemble du bloc, vous pouvez alors choisir votre couleur de fond et de bordure, mais toujours en ajoutant le "!important".

    Voici mon exemple :

    Code:
    .sceditor-toolbar
    {
      background: #141414 !important;
      border-bottom: 1px solid #000000 !important;
    }


    J'ai fait simple, libre à vous d'y inclure un motif de fond, des bordures différentes, etc...


    Il s'agit ensuite de mettre en forme les blocs gris qui contiennent les groupes de boutons, rassemblés par type. Ces blocs s'appellent : "sceditor-group" et ce sont également des "class".

    Un exemple :

    Code:
    .sceditor-group
    {
      background: #444444 !important;
      border: 1px outset #333333 !important;
      border-radius: 5px !important;
    }


    Une remarque, vous vous en doutez, c'est que les dessins des boutons ne sont pas faits pour être sur le foncé. Il faudra donc éclaircir un peu notre fond pour chaque bouton. Je vais donc laisser mon gris tel quel, mais passer à la suite avec la mise en forme des boutons.


    Les boutons peuvent avoir deux mises en forme : l'une normale, l'autre au survol du bouton. Pour cela nous allons utiliser :
    a.sceditor-button = bouton normal
    a.sceditor-button:hover = bouton au survol

    Voici mon exemple :

    Code:
    a.sceditor-button
    {
      background: #777777 !important;
      border-radius: 20px !important;
    }
    a.sceditor-button:hover
    {
      background: #999999 !important;
    }

    Sur ce screen le bouton "italique" est survolé, il apparait un peu plus clair que les autres.

    (Oui des boutons ronds, why not ? Very Happy)

    Libre à vous de mettre un fond plus clair pour que les dessins se voient mieux, de mettre un survol avec transition, une lueur (box-shadow) ou de remettre les boutons carrés au survol... Pour ça je laisse votre imagination jouer x).

    Par contre, vous aurez peut-être constaté que lorsque le monde wysiwyg est activé, certains boutons apparaissent comme "sélectionnés", et donc actif. Par exemple l'alignement (gauche, droite, centré, justifié) est juste cliquable en version normale et vous donne les bonnes balises, mais en version wysiwyg le bouton doit resté d'une couleur différente pour montrer qu'il est actif. Du coup, il vous faut ajouter une propriété pour ce bouton actif :

    Code:
    a.sceditor-button.active
    {
      background: #c2c2c2 !important;
    }

    (J'avais déjà mis la couleur de la zone texte, dans votre éditeur il doit être toujours blanc, ce qui est normal.)

    Mon alignement gauche est actif, il est plus clair que les autres, et si je change l'alignement c'est le bouton choisi qui sera plus clair.


    Passons maintenant au cadre de texte. Il faut tout d'abord savoir qu'il y a deux cadres textes selon le mode d'édition dans lequel vous vous trouvez. En effet, vous pouvez passer du mode wysiwyg ("what you see is what you get") au mode de saisie classique en cliquant sur l'icone de la feuille (le dernier de la liste). C'est donc les deux blocs qu'il faut changer, sans quoi vous risquez d'avoir des couleurs de fond différentes selon le mode lorsque vos utilisateurs les changeront.
    Il est conseillé de rester simple dans la mise en forme de ce bloc : une couleur de fond, une bordure, un padding pour éviter d'avoir le texte collé aux bordures et voilà x).

    Code:
    .sceditor-container textarea, .sceditor-container iframe
    {
      padding: 5px !important;
      background: #555555 !important;
      border: 1px solid #666666 !important;
    }


    Pour information le "textarea" s'applique pour le mode classique et l'iframe contient le monde "wysiwyg".

    Attention : dans ce bloc vous ne pouvez pas tout changer. Si vous avez une police particulière sur votre forum ainsi qu'une couleur de texte précise, il vous faut faire très attention au mode "wysiwyg" car ses propriétés ne sont pas toutes modifiables. Si vous voulez un texte de couleur blanche sur votre cadre de saisie, il redeviendra forcément noir si l'utilisateur change de mode et passe en "wysiwyg". Prenez-en compte, il faut que votre texte soit lisible dans les deux cas. Les forum clairs n'auront pas trop de souci, mais les forum sombres pourraient vouloir un fond sombre et un texte clair, or ce n'est pas possible. Je vous conseille donc d'utiliser des tons moyens, un gris moyen, un marron pas trop foncé etc... comme je l'ai fait dans mon exemple.

    Récapitulatif du CSS :

    Code:
    .sceditor-container => bloc complet de l'éditeur
    .sceditor-toolbar => zone d'en-tête de l'éditeur (avec les groupes de boutons)
    .sceditor-group => groupes de boutons, rassemblés par type
    a.sceditor-button => bouton normal
    a.sceditor-button:hover => bouton survolé
    a.sceditor-button.active => bouton "actif" (mode wysiwyg)
    .sceditor-container textarea, .sceditor-container iframe => contenus des blocs textes, attention à vérifier la lisibilité des deux modes et adapter votre couleur de fond en fonction.

    Voilà, notre personnalisation simple est achevée, et votre éditeur s'intègre sûrement un peu mieux dans le paysage désormais (je l'espère du moins ! XD). A vous de customiser tout cela comme bon vous semble, restez cependant efficaces et simples car c'est un cadre de saisie, vos utilisateurs doivent pouvoir y écrire longtemps sans se fatiguer les yeux, surtout pour un forum RPG par exemple.


    Ajout 21/06/2013 : personnalisation de la boite des smiley


    Les smiley ont été pendant quelques jours dans les boutons en haut de l'éditeur, là où sont le "gras", "lien", "image" etc... Puis il est revenu à gauche du bloc d'édition, mais avec en temps que fond celui de votre "body". En effet, il contient une iframe qui contient elle-même un "body" prenant alors les caractéristiques du vôtre, et ce même s'il a plusieurs images de fond (header, corps, footer) ce qui peut être ennuyeux niveau esthétique.

    Voici comment lui donner une couleur de fond en accord avec votre éditeur :

    Couleur / bordures de tout le bloc :
    Pour donner une bordure ou une ombre portée à tout votre bloc, mais aussi pour arrondir ses angles, par exemple, mettez vos propriétés dans  :

    Code:
    #smileyContainer
    {
    border: 3px solid #000000;
    }
    J'ai mis ici une bordure noire, adaptez bien sûr comme bon vous semble !

    Mise en forme de la barre "voir plus de Smileys" :
    Mettez vos propriétés css dans :

    Code:
    #smilies_header
    {
    ...
    }

    Mettre une couleur de fond :
    Pour avoir une couleur de fond unie, ou tout simplement une autre image de fond spécialement pour votre bloc de smiley, mettez-le dans :

    Code:
    #sceditor_smilies body
    {
    background: #dcd4bf !important;
    }
    Vous pouvez donc y mettre une image également, comme un motif par exemple.

    Limiter la hauteur :
    Pour terminer, si vous souhaitez limiter la hauteur de votre bloc de smiley (la totalité du bloc), c'est sur l'iframe qu'il faut agir, en mettant ceci :

    Code:
    #smileyContainer iframe
    {
      height: 280px !important;
      overflow: auto !important;
    }
    Dans mon cas, la hauteur est de 280px, à modifier selon la hauteur que vous souhaitez.


    Une petite remarque en ce qui concerne cet éditeur qui a pu en déstabiliser plus d'un au premier abord : il comporte tout de même pas mal d'avantages.
    - au final il reste plus personnalisable que le précédent (qui posait lui aussi son lot de problème avec le mode wysiwyg) même s'il faudrait pouvoir modifier facilement ses couleurs. Mais n'oubliez pas qu'il n'est qu'en version bêta, il sera peut-être possible de voir la modification de ses couleurs se faire directement via le PA dans l'onglet "Couleurs"...
    - il ne comporte pas l'énorme défaut du précédent qui faisait remonter le bloc de texte tout en haut à la moindre mise en forme faite en mode "classique", et ça pour nos mises en forme c'est quand même très reposant, il faut l'avoue !
    - il ne va pas non plus afficher un lien ou une image tout à la fin de la saisie alors que notre cursus est placé au milieu d'un paragraphe. Là, il l'affiche à l'endroit du cursus, c'est également plaisant.
    - le choix des couleurs est également plus grand, et on peut apprécier cela dans nos choix de tons pour nos dialogues RP x).


    Dernière édition par Sparrow-style le Ven 21 Juin 2013 - 18:14, édité 1 fois



    Girlicious
    FémininAge : 31Messages : 60

    le Dim 16 Juin 2013 - 15:55

    Génial ! Exactement ce dont j'ai besoin, merci beaucoup :)
    saska
    FémininAge : 28Messages : 14

    le Dim 16 Juin 2013 - 17:31

    Merci beaucoup pour ces précisions ^^
    En ligne
    Okhmhaka
    FémininAge : 31Messages : 31712

    le Dim 16 Juin 2013 - 18:13

    Ah x) content d'avoir des réponses Razz

    Avec plaisir !



    Zadig
    FémininAge : 24Messages : 22

    le Jeu 20 Juin 2013 - 14:46

    Hoy hoy, merci beaucoup pour ce tuto ! J'admets que l'éditeur est déstabilisant mais qu'il est beaucoup plus propre que l'ancien. FA aurait juste été bien inspiré de fournir les codes CSS avant =)

    Pour ceux que ça intéresserait, je ne sais pas trop où poster ça étant donné que c'est du Javascript et que c'est une solution somme toute probablement temporaire (et inutile, finalement c'est pas mal le mode Wysiwyg), mais pour modifier la couleur et forcer l'éditeur en mode source dès le départ:

    Spoiler:
    Code:
    $(document).ready(function() {  
    $('div.sceditor-container.ltr.wysiwygMode iframe').ready(function() {
      /* On force le mode Source*/
    $('textarea').sceditor('instance').sourceMode(true);
      /* On change la couleur de la police dans l'éditeur WYSIWYG*/
    $('textarea').sceditor('instance').css('body { color: #ffffff; }');
    });

    });
    Miki1
    FémininAge : 25Messages : 303

    le Ven 21 Juin 2013 - 12:12

    Coucou,
    J'ai un léger souci avec le fond de la zone smileys...
    C'est l'image de mon forum entier qui s'y retrouve au lieu d'avoir un fond d'une couleur neutre.
    En gros je vois ma bannière, et quand je descend le fond beige puis le pied de page Oo

    Y a t il quelque chose a régler via le CSS pour ça ?



    En ligne
    Okhmhaka
    FémininAge : 31Messages : 31712

    le Ven 21 Juin 2013 - 13:20

    Zadig : oh c'est super ton code ! Est-ce que tu pourrais le poster dans un topic à part ici même ? Que les gens le voient^^

    Miki : Oui, j'ai remarqué aussi ça dans mon forum test, mais je pense qu'avant d'essayer de le changer il faut attendre la fin des mises à jour FA pour ce module car les smileys étaient accessibles par la barre de menu de l'éditeur, ils ont peut-être bougé en voyant qu'il y avait des bugs sur certains forum, donc c'est potentiellement susceptible de changer encore^^
    Par exemple ici, sur N-U, il n'y a pas de scroll sur les smiley du coup, chose que j'avais arrangé au début, puis enlevé en voyant qu'il n'y avait plus le bloc de smiley, et là c'est revenu XD. Donc je conseille plutôt d'attendre un peu, que tout se stabilise.



    Miki1
    FémininAge : 25Messages : 303

    le Ven 21 Juin 2013 - 13:30

    Ok !
    Merci pour l'info Very Happy
    J'avais lu aussi qu'ils modifiaient plein de choses.
    C'est comme quand on poste une fiche de pub sans erreur (je te fais confiance niveau codage mdr) et que quand on publie y a des bouts de codes partout :s
    Je suppose qu'ils arrangeront ça aussi ^^
    En attendant, faut patienter ^^
    Je surveillerai ce sujet si jamais tu viens nous en dire plus :)
    Bonne journée !



    Zadig
    FémininAge : 24Messages : 22

    le Ven 21 Juin 2013 - 15:49

    Sparrow-style a écrit:Zadig : oh c'est super ton code ! Est-ce que tu pourrais le poster dans un topic à part ici même ? Que les gens le voient^^

    Je peux le poster dans un sujet oui, mais comme FA est en cours de gestion du problème, j'attendais un peu =)
    Cela dit, je m'en occupe o/

    PS; Nouvelle box pour les smileys, si quelqu'un sait comment changer la couleur du fond ou quelque chose comme ça, ça m'intéresse =)
    En ligne
    Okhmhaka
    FémininAge : 31Messages : 31712

    le Ven 21 Juin 2013 - 17:36

    Je vais me pencher sur les smiley, du coup.



    En ligne
    Okhmhaka
    FémininAge : 31Messages : 31712

    le Ven 21 Juin 2013 - 18:05

    Bon, j'ai trouvé comment personnaliser le bloc des smiley, je vais donc éditer mon premier message pour l'ajouter.



    Mitsu'ki
    FémininAge : 27Messages : 31

    le Sam 22 Juin 2013 - 17:05

    Merci beaucoup pour ce tuto, depuis le temps que mon staff me demandait de remédier à cet interface !



    ShuwaPon
    FémininAge : 21Messages : 80

    le Dim 30 Juin 2013 - 16:16

    Merci beaucoup du partage !
    Skyleen
    FémininAge : 24Messages : 476

    le Mar 30 Juil 2013 - 19:47

    Superbe merci *o*



    2013 ▬
    Commandes en cours : 0    ▬ Commandes finis : 2
    o~°Passion HELL
    FémininAge : 28Messages : 177

    le Mar 30 Juil 2013 - 21:12

    Milles mercis vraiment !



    ....
    Eyes_SHM
    FémininAge : 24Messages : 11

    le Ven 9 Aoû 2013 - 15:46

    Super, merci ! Qu'est-ce que je ferais sans vous ? >,<
    Depp
    FémininAge : 25Messages : 297

    le Lun 12 Aoû 2013 - 16:20

    Sparrow tu sauve la vie à beaucoup de monde !!! Je crois que nous t'aimons tous !! Very Happy



    xGalope
    FémininAge : 20Messages : 57

    le Jeu 15 Aoû 2013 - 13:02

    Merci beaucoup !
    Super pratique et très bien expliqué !



    Noir
    FémininAge : 24Messages : 16

    le Mer 28 Aoû 2013 - 23:59

    Aaah, mon sauveur! En codant mon forum test, j'ai un peu paniqué en voyant le nouvel éditeur... merci!



    Draly
    FémininAge : 24Messages : 80

    le Ven 29 Nov 2013 - 14:18

    Thank you very much.:p J'avais déjà installé ce code et l'avais effacé par erreur, ce tuto aide beaucoup.^^
    Enidech
    MasculinAge : 25Messages : 39

    le Sam 18 Jan 2014 - 13:48

    Bonjour Sparrow !  cheers 


    Avant toute chose, un grand merci pour ce tutoriel!  Very Happy 

    J'ai cependant d'autres questions pour une personnalisation plus poussée :


    Avec cette image, es-tu capable de me dire comment changer la couleur de la bordure d'origine?
    Éventuellement les couleurs du curseur (je ne sais pas si c'est faisable)?
    Mais surtout la couleur du texte et du curseur dans la zone de texte car avec une interface d'éditeur sombre, je trouve qu'un texte blanc qui s'y affiche est plus approprié.

    Bien cordialement, Dech'aussonauxpommes.  :ange: 
    Enidech
    MasculinAge : 25Messages : 39

    le Dim 16 Fév 2014 - 0:40

    Oh, j'avais complètement oublié ma requête dans ce topic!

    Bonjour,  Very Happy 

    Alors, entre temps, j'ai trouvé comment il fallait faire pour changer la couleur du texte et du curseur dans la zone de texte, c'était en fait tout bête (pour ceux qui souhaitent aussi la réponse, il suffit d'ajouter :
    Code:
      color: #[Votre code couleur] !important;
    dans la balise
    Code:
    .sceditor-container textarea, .sceditor-container iframe
    {
    ...
    }

    En revanche, pour forcer les couleurs de bordure et de scroll du panel de smileys, je n'ai toujours pas trouvé et j'up donc un peu le sujet au cas où quelqu'un sait comment faire.

    Bien cordialement, Dech'inanimé.  :ange: 
    Zadig
    FémininAge : 24Messages : 22

    le Dim 16 Fév 2014 - 1:54

    Heyo !

    Pour la bordure fantôme, un il vous suffira d'ajouter un petit:
    Code:
    #sceditor_smilies {
        background-color: #Couleur;
    }
    En revanche, pour ce qui est du scroll, tu as toutes les chances de ne pas pouvoir en changer la couleur. Si je ne me trompe pas, ton screen a été fait sous chrome (ou quelque chose comme ça) et c'est donc le scroll du navigateur que tu as là.
    Pour le changer, il faudra éventuellement passer par du javascript et mettre un petit slim scroll bien swag à la mode mais c'est une autre histoire =)
    (Si quelqu'un a une autre solution, ceci dit, j'en suis =D)
    Enidech
    MasculinAge : 25Messages : 39

    le Dim 16 Fév 2014 - 2:49

    Merci beaucoup Zadig, c'est parfait ! :)

    Et oui, c'est bien Chrome et c'est bien leur scroll.
    Ça m'a l'air effectivement plutôt complexe alors je vais laisser tomber ça hihi, c'est déjà nickel avec la couleur du contour changée! Very Happy Merci.

    Cordialement.
    pizi
    FémininAge : 28Messages : 569

    le Mer 11 Juin 2014 - 12:31

    Bonjour,

    Merci tout d'abord pour les codes css j'ai pu modifier. Toutefois je me heurte à un petit souci. Je n'arrive pas à changer la box des Smiley. Je dois mettre le code au mauvais endroit je ne le sais pas, ça ne marche pas...

    Quelqu'un saurait me dire comment il a procédé s'il vous plait ?


    Merci beaucoup.




    Contenu sponsorisé

    Aujourd'hui à 9:11


      La date/heure actuelle est Mar 6 Déc 2016 - 9:11