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
    Alumine
    FémininAge : 19Messages : 486

    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




    Before...:

    mon ange gardien ♥
    Nihil Scar Winspeare
    Messages : 3940

    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 :)




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    Kelalin
    FémininAge : 24Messages : 1403

    le Dim 20 Sep 2015 - 22:37

    Merci (*≧▽≦)
    TiGraou
    MasculinAge : 23Messages : 141

    le Lun 21 Sep 2015 - 15:14

    Merci :p
    Alumine
    FémininAge : 19Messages : 486

    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 (=




    Before...:

    mon ange gardien ♥
    Sid'
    FémininAge : 26Messages : 63

    le Mar 22 Sep 2015 - 12:50

    Merci ! \o/
    Sweet Angel
    FémininAge : 33Messages : 125

    le Jeu 1 Oct 2015 - 13:04

    Merci beaucoup
    GuillaumeBETA
    MasculinAge : 20Messages : 17

    le Mer 16 Déc 2015 - 21:16

    Merci !
    Angie H.-Carter
    FémininAge : 33Messages : 670

    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!
    didicmy
    FémininAge : 25Messages : 59

    le Dim 17 Jan 2016 - 23:37

    Super Merci Very Happy
    layna
    FémininAge : 24Messages : 67

    le Jeu 4 Fév 2016 - 0:42

    sublime
    LittleChan
    FémininAge : 26Messages : 58

    le Mar 23 Fév 2016 - 3:01

    Thanks Wink



    Kynoha
    MasculinAge : 19Messages : 35

    le Sam 5 Mar 2016 - 19:49

    Très bien trouvé, j'adore ton style.
    Millaby
    FémininAge : 21Messages : 40

    le Jeu 10 Mar 2016 - 13:35

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

    le Ven 11 Mar 2016 - 12:19

    Merci pour le partage.
    Kame-Chan
    FémininAge : 25Messages : 48

    le Jeu 17 Mar 2016 - 22:08

    merci beaucoup pour ce code
    Rebekaah
    FémininAge : 21Messages : 47

    le Sam 19 Mar 2016 - 15:43

    Merci !
    Sounik
    MasculinAge : 16Messages : 9

    le Sam 19 Mar 2016 - 16:02

    Merci beaucoup cheers
    JaydenRcr
    MasculinAge : 17Messages : 32

    le Lun 21 Mar 2016 - 13:13

    Merci ! :)
    Coco-Lapin02
    MasculinAge : 48Messages : 147

    le Mar 22 Mar 2016 - 1:34

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

    le Jeu 24 Mar 2016 - 14:21

    Woooow !!! Merci
    rosebleudu10
    FémininAge : 26Messages : 186

    le Jeu 24 Mar 2016 - 15:43

    merci beaucoup
    Katia Akane
    FémininAge : 26Messages : 36

    le Lun 28 Mar 2016 - 16:08

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

    le Lun 28 Mar 2016 - 19:50

    Wouah ! super original, j'adore**




    P'tit loup
    MasculinAge : 34Messages : 423

    le Ven 8 Avr 2016 - 18:51

    merci ^^



    Contenu sponsorisé

    Aujourd'hui à 9:10


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