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 en hover avec perspective

    Partagez
    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Dim 20 Sep 2015 - 16:01

    Profil en hover avec perspective





    Hello all ! Bon bah voilà, encore un profil, avec une petite transition cool et les infos à l'intérieur sur des petites bandes... bref.

       
    PHPBB2 - Template et CSS - taille de l'avatar adaptable - Aperçu - Aperçu à l'ouverture



    Et un autre aperçu, pour la transition...





    Template


    Ok, dans le panneau d'admin > affichage > templates > général > viewtopic-body, cherchez ceci (vers la ligne 139)
    Code:
    <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
     <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
     <span class="postdetails poster-profile">
     {postrow.displayed.POSTER_RANK}<br />
     {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
     <!-- BEGIN profile_field -->
     {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
     <!-- END profile_field -->
     {postrow.displayed.POSTER_RPG}
     </span><br />
     <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
     </td>

    Supprimez, et remplacez par ça :


    Là, sur la première ligne vous trouverez ça:
    Code:
    min-height:320px;
    Vous pouvez adapter cette hauteur en fonction de la hauteur des avatars de votre forum; il s'agit de la hauteur minimum d'un message (si le message est plus petit que l'avatar, les avatars des différents messages vont se chevaucher, ce qui serait fâcheux...)



    CSS

    Ensuite validez, publiez le template, puis rendez vous dans affichage > couleurs > feuille de style CSS, et ajoutez ceci à votre code:



    A priori vous ne devriez pas avoir besoin de modifier autre chose que les lignes commentées... Enregistrez, et tout devrait fonctionner !


    Code mis sous hide - Merci de laisser un crédit à N-U quelque part sur votre forum !


    Dernière édition par Alumine le Lun 21 Sep 2015 - 21:18, édité 1 fois



    Alumine
    avatar
    Nihil Scar Winspeare
    Messages : 4693

    le Dim 20 Sep 2015 - 19:52

    Sympaaa, on voit pas très souvent des transform 3d sur FA .

    Merci pour ton partage Alu (^-^)

    Spoiler:
    Si je peux me permettre un petit conseil, ça serait rajouté un overflow hidden à la div autour de l'avatar, pour éviter qu'il dépasse éventuellement si le membre se trompe de format :3

    Au passage, pourquoi le backface-visibility en hidden :o ? Ca risque pas de créer des bugs >< ? Sur Chrome ça me donne ça. C'était pour jouer avec les rangs ensuite, je suppose ?

    J'ai un peu de mal avec ce sélecteur là o:
    Code:
    .profil:hover .avatarflip, profil:hover .avatarflip .div
    profil:hover .avatarflip .div → il y a comme un petit problème, je crois que c'est un ancien code non enlevé XD

    Allez, je m'en vais avec mes remarques embêtantes, ton LS est vraiment sympa :)



    avatar
    Kelalin
    FémininAge : 24Messages : 1602

    le Dim 20 Sep 2015 - 22:37

    Merci (*≧▽≦)
    avatar
    TiGraou
    MasculinAge : 24Messages : 223

    le Lun 21 Sep 2015 - 15:14

    Merci :p
    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Lun 21 Sep 2015 - 21:17

    Coucou Nihil ! merci pour tes remarques... effectivement c'est le rang qui doit se trouver là !
    Et bien vu pour le reste, je m'en occupe illico presto (=



    Alumine
    avatar
    Sid'
    FémininAge : 27Messages : 67

    le Mar 22 Sep 2015 - 12:50

    Merci ! \o/
    avatar
    Sweet Angel
    FémininAge : 34Messages : 147

    le Jeu 1 Oct 2015 - 13:04

    Merci beaucoup
    avatar
    GuillaumeBETA
    MasculinAge : 20Messages : 17

    le Mer 16 Déc 2015 - 21:16

    Merci !
    avatar
    Angie H.-Carter
    FémininAge : 34Messages : 691

    le Sam 26 Déc 2015 - 10:00

    Punaise *-* trop bien j'adore!! Merciiiiiiii



    Your my brillant! You shine into the darkness and you guide me in my life with no fear. I love you so much and i don't want to loose you in my heart. You will be my love forerver. You and me it's like the sky and the sea...This is LIFE!
    avatar
    didicmy
    FémininAge : 26Messages : 69

    le Dim 17 Jan 2016 - 23:37

    Super Merci Very Happy
    avatar
    layna
    FémininAge : 25Messages : 68

    le Jeu 4 Fév 2016 - 0:42

    sublime
    avatar
    LittleChan
    FémininAge : 26Messages : 58

    le Mar 23 Fév 2016 - 3:01

    Thanks Wink



    avatar
    Kynoha
    MasculinAge : 20Messages : 35

    le Sam 5 Mar 2016 - 19:49

    Très bien trouvé, j'adore ton style.
    avatar
    Millaby
    FémininAge : 22Messages : 43

    le Jeu 10 Mar 2016 - 13:35

    Merci beaucoup pour ce partage superbe !
    avatar
    Bunny Lune
    FémininAge : 27Messages : 136

    le Ven 11 Mar 2016 - 12:19

    Merci pour le partage.
    avatar
    Kame-Chan
    FémininAge : 26Messages : 53

    le Jeu 17 Mar 2016 - 22:08

    merci beaucoup pour ce code
    avatar
    Rebekaah
    FémininAge : 22Messages : 50

    le Sam 19 Mar 2016 - 15:43

    Merci !
    avatar
    Sounik
    MasculinAge : 17Messages : 16

    le Sam 19 Mar 2016 - 16:02

    Merci beaucoup cheers
    avatar
    JaydenRcr
    MasculinAge : 18Messages : 32

    le Lun 21 Mar 2016 - 13:13

    Merci ! :)
    avatar
    Coco-Lapin02
    MasculinAge : 49Messages : 147

    le Mar 22 Mar 2016 - 1:34

    Merci beaucoup pour ce partage superbe !
    avatar
    Voltino
    MasculinAge : 22Messages : 55

    le Jeu 24 Mar 2016 - 14:21

    Woooow !!! Merci
    avatar
    rosebleudu10
    FémininAge : 27Messages : 186

    le Jeu 24 Mar 2016 - 15:43

    merci beaucoup
    avatar
    Katia Akane
    FémininAge : 26Messages : 37

    le Lun 28 Mar 2016 - 16:08

    C'est superbe ! Merci.
    avatar
    Tyarra
    FémininAge : 17Messages : 73

    le Lun 28 Mar 2016 - 19:50

    Wouah ! super original, j'adore**




    avatar
    P'tit loup
    MasculinAge : 34Messages : 435

    le Ven 8 Avr 2016 - 18:51

    merci ^^



    Contenu sponsorisé


      La date/heure actuelle est Sam 23 Sep 2017 - 13:11