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.


    Profil déroulant (avancé)

    Partagez
    avatar
    Crystal.Nal
    FémininAge : 24Messages : 24

    le Mer 14 Juin 2017 - 18:48

    Ma demande : Profil déroulant (avancé)



    Bonjour à tous ! Pour finaliser notre gros projet presque abouti, nous avons besoin d’un code pour améliorer nos profils. Merci à celui ou à celle qui nous aidera à avoir le plus beau des forums :heart:


    Schéma(s) et Eléments


    Schémas :
    Spoiler:
    Tailles des éléments : le profil ne doit pas excéder 200px en largeur. L’avatar fait 200x320. L’image du rang fait 200 de large également. Le déroulé dévoilant les champs du profil doit être infini et doit repousser le post suivant si besoin.
    Effets voulus : Il faudrait que les champs du profil soit en dessous de l’avatar, et qu’ils se révèlent lorsque l’on passe la souris sur un « bouton » (un élément graphique que nous allons grapher). Dans l’idéal, il faudrait que les champs du profil restent déroulés, jusqu’à ce qu’on passe à nouveau la souris sur l’élément graphique, pour le refermer.
    Ensuite, nous aimerions que les différents liens qu’on trouve habituellement à la fin de chaque post (profil, MP, liens vers la présentation, vers la fiche de liens, etc), soient dissimulés sous l’avatar, et se révèlent au passage de la souris.
    Enfin, le pseudo et le rang textuel se trouveront sous l’avatar, et l’image du rang se trouvera au dessus.

    Version de votre forum : PHPBB2


    Ressources


    Nous allons grapher les éléments à incorporer dans le profil, vous pouvez mettre ces images en attendant : http://imgur.com/a/d1rDb


    Autres précisions ?


    Merci d’avoir pris le temps de lire notre commande ! :coeur:




    Dernière édition par Crystal.Nal le Mer 21 Juin 2017 - 23:28, édité 1 fois
    avatar
    Crystal.Nal
    FémininAge : 24Messages : 24

    le Ven 16 Juin 2017 - 16:14

    Up :gene:
    avatar
    Awful
    MasculinAge : 99Messages : 190

    le Ven 16 Juin 2017 - 23:19

    Salut ! Je m'occupe de toi o/
    Côté graphisme / police / couleurs, tu n'as rien précisé donc tout est brut pour le moment :
    avatar
    Crystal.Nal
    FémininAge : 24Messages : 24

    le Sam 17 Juin 2017 - 11:21

    Wow merci beaucoup pour ta rapidité et ton efficacité :heart:
    Aucun problème pour l'aspect brut, c'est très bien ainsi, et puis si tu veux poster le code dans le LS, ça pourra servir à tout le monde !

    Deux petites questions :
    Est-ce possible de remplacer l'effet qui révèle les champs de contact cachés sous l'avatar ? Nous préférerions un fondu d'opacité, plutôt qu'un slide Very Happy

    Et est-ce possible (pour le coup c'est une question technique, je ne sais pas si c'est réalisable) que les champs de profil slident vers le bas lorsqu'on passe le souris sur le bouton "image à survoler", et qu'ils restent suspendus, jusqu'à ce qu'on passe à nouveau la souris sur "image à survoler" pour refermer ? (Je ne sais pas si je suis très claire :hum: )

    En tout cas, un grand grand merci à toi pour ton travail :ninjahug:
    Sous quel pseudo voudras-tu qu'on te crédite ? Et voudras-tu voir le rendu final sur notre forum ? :coeur:
    avatar
    Awful
    MasculinAge : 99Messages : 190

    le Sam 17 Juin 2017 - 13:08

    @Crystal.Nal a écrit:Est-ce possible de remplacer l'effet qui révèle les champs de contact cachés sous l'avatar ? Nous préférerions un fondu d'opacité, plutôt qu'un slide Very Happy

    C'est fait !

    @Crystal.Nal a écrit:Et est-ce possible (pour le coup c'est une question technique, je ne sais pas si c'est réalisable) que les champs de profil slident vers le bas lorsqu'on passe le souris sur le bouton "image à survoler", et qu'ils restent suspendus, jusqu'à ce qu'on passe à nouveau la souris sur "image à survoler" pour refermer ? (Je ne sais pas si je suis très claire :hum: )

    J'avoue que j'ai du mal à comprendre ta demande, ce n'est pas un comportement logique pour un événement au hover. Dans ce cas, pourquoi ne pas plutôt déclencher le déroulement au clic ? De ce fait, le profil se déroulera au clic et reviendra à son état initial avec un autre clic, comme ça, il restera déroulé tant qu'on ne l'aura pas fermé (car c'est ce que tu veux, non ? Que le profil reste déroulé ?)


    @Crystal.Nal a écrit:En tout cas, un grand grand merci à toi pour ton travail :ninjahug:
    Sous quel pseudo voudras-tu qu'on te crédite ? Et voudras-tu voir le rendu final sur notre forum ? :coeur:

    De rien, ça me fait plaisir ! "Awful", c'est très bien pour le crédit, et oui, je veux bien, je suis curieux de voir le résultat final c:
    avatar
    Crystal.Nal
    FémininAge : 24Messages : 24

    le Sam 17 Juin 2017 - 16:15

    Effectivement, je pense que le plus simple serait de dérouler le profil au clic, tu as raison ! Oui, tu as bien compris ma demande, c'était effectivement que le profil reste déroulé.
    Ca ne te dérange pas de modifier pour passer à un effet cliquable ?

    Du coup, si tout est bon pour toi, je veux bien le code, et je t'envoie un MP avec le résultat sur notre forum dès que c'est installé !
    Merci beaucoup :heart:
    avatar
    Awful
    MasculinAge : 99Messages : 190

    le Sam 17 Juin 2017 - 18:22

    Okay ! Voilà le code :

    Remplace l'intégralité de ton template viewtopic_body par :


    A ajouter dans ton CSS :


    A ajouter dans modules > gestion des codes javascript
    C'est le code pour l'affichage au clic et des champs de contact (je t'explique après). Coche la case "sur les sujets" pour le placement.


    Maintenant, attention, important à savoir :
    Je l'ai noté brièvement dans les commentaires du CSS, mais pour les champs de contact (les liens qui s'affichent sur l'avatar), il faut personnaliser ça dans le CSS mais aussi dans le JS. Normalement, les champs de contact sont des images cliquables comme ça :


    Dans le CSS, j'ai supprimé les images et utilisé les sélecteurs CSS pour personnaliser le texte. Problème : à partir du moment où les gens mettent une adresse vers un topic, impossible de se servir des sélecteurs CSS car toutes les adresses de topic sont différentes ! Du coup, à partir de ce moment-là, j'ai fait un peu de bricolage, je t'explique :

    - En créant mon champ de contact "Présentation", j'ajoute dans "URL de l'icône" une image random choisie au hasard. Cette image n'apparaîtra pas donc on s'en fiche un peu. L'important, c'est que tous les champs que tu créeras aient une image différente.

    - Dans mon javascript, je rentre l'URL de l'image et j'y associe une class
    Code:
    $( ".profil-links div img[src*='http://illiweb.com/fa/i/smiles/icon_scratch.png']").parent().addClass('myClassName');

    - Dans mon CSS, je personnalise l'intitulé du lien grâce à cette class
    Code:
    .profil-links a.myClassName:before {
        content: "Présentation";
    }

    J'espère que j'arrive à me faire comprendre xD Je présume que tu n'auras pas 10 000 champs de contact donc c'est faisable. Pour chaque champ différent, tu auras une ligne dans le js à ajouter et une class dans le CSS à personnaliser :

    Code:
    $( ".profil-links div img[src*='URL DE TON IMAGE']").parent().addClass('NOM_DE_TA_CLASS');
    Code:
    .profil-links a.NOM_DE_TA_CLASSE:before {
        content: "TON TEXTE";
    }

    Voilà dis-moi si tu ne comprends pas D:
    avatar
    Crystal.Nal
    FémininAge : 24Messages : 24

    le Dim 18 Juin 2017 - 10:59

    Merci, c'est parfaitement clair !
    Merci beaucoup pour ton aide, j'ai hâte de voir ça installé sur notre forum :coeur:
    Je t'envoie le résultat par MP dès que ce sera fait !
    Contenu sponsorisé


      La date/heure actuelle est Sam 18 Nov 2017 - 9:26