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 - 16:01

    Rappel du premier message :

    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 - 21:18, édité 1 fois



    Alumine
    avatar
    Sophie2
    FémininAge : 53Messages : 58

    le Mer 22 Juin - 16:58

    Merci.
    avatar
    Electro
    FémininAge : 21Messages : 30

    le Ven 1 Juil - 13:23

    merciiii
    avatar
    andie_xcv
    FémininAge : 22Messages : 34

    le Sam 2 Juil - 21:41

    Ce code a l'air super ! Merci :)
    avatar
    Inoue Musaki
    FémininAge : 28Messages : 147

    le Dim 3 Juil - 18:42

    merci
    avatar
    Lynnakiel
    FémininAge : 21Messages : 18

    le Dim 3 Juil - 19:51

    Merci ! Je vais tester ça Wink
    avatar
    Nekrofyre
    MasculinAge : 17Messages : 33

    le Lun 4 Juil - 2:23

    joli
    avatar
    Dearborn
    FémininAge : 23Messages : 108

    le Dim 10 Juil - 11:02

    Merci!
    avatar
    Eryu
    FémininAge : 24Messages : 45

    le Lun 18 Juil - 19:09

    L'effet est vraiment intéressant je trouve ^^ Du coup ça me donne envie d'essayer 'w'
    Merci donc pour ce code !
    avatar
    Ombinou
    FémininAge : 22Messages : 104

    le Sam 23 Juil - 1:02

    Merci beaucoup. C'est très original
    avatar
    EOS
    MasculinAge : 24Messages : 34

    le Dim 24 Juil - 13:55

    Merci
    avatar
    Ryukaï
    MasculinAge : 19Messages : 613

    le Mar 26 Juil - 16:42

    merci Very Happy



    avatar
    Merwyn Arehdel
    FémininAge : 17Messages : 298

    le Jeu 28 Juil - 15:31

    Wow merci ! :)



    Just want to be yours.
    avatar
    Mistiny
    FémininAge : 14Messages : 23

    le Ven 29 Juil - 17:54

    J'adore ! Merci beaucoup pour le partage ! ^^
    avatar
    ShiShi_Chan
    MasculinAge : 28Messages : 51

    le Lun 1 Aoû - 1:53

    Super astuce ! Merci bien *_*
    avatar
    nikuchips
    FémininAge : 16Messages : 3

    le Sam 6 Aoû - 21:21

    Merci :3
    avatar
    NekoMiaouw
    FémininAge : 21Messages : 134

    le Mar 23 Aoû - 15:43

    J'aime beaucoup ce système, merci!



    avatar
    Liumi
    MasculinAge : 17Messages : 9

    le Lun 29 Aoû - 22:12

    merci :)
    avatar
    Nyroc
    MasculinAge : 15Messages : 57

    le Ven 9 Sep - 21:37

    Merci ^^



    avatar
    witm
    FémininAge : 23Messages : 51

    le Jeu 15 Sep - 19:38

    merci beaucoup :heart:
    Yunroxas
    FémininAge : 24Messages : 37

    le Sam 24 Sep - 20:17

    Merci, le principe est génial
    avatar
    noksye
    FémininAge : 26Messages : 51

    le Mar 27 Sep - 0:24

    Merci !
    avatar
    Noubil
    FémininAge : 29Messages : 56

    le Jeu 13 Oct - 23:55

    J'adore :love:
    avatar
    Star Rock Shooter
    MasculinAge : 20Messages : 11

    le Ven 14 Oct - 17:52

    Merci beaucoup ! :bisou:
    avatar
    leviarthrite
    FémininAge : 30Messages : 26

    le Ven 14 Oct - 19:05

    Merci
    avatar
    Alborio
    MasculinAge : 18Messages : 27

    le Jeu 27 Oct - 14:00

    Merci!
    Contenu sponsorisé


      La date/heure actuelle est Mar 17 Oct - 18:54