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

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




    Before...:

    mon ange gardien ♥
    Sophie2
    FémininAge : 53Messages : 38

    le Mer 22 Juin 2016 - 16:58

    Merci.
    Electro
    FémininAge : 20Messages : 30

    le Ven 1 Juil 2016 - 13:23

    merciiii
    andie_xcv
    FémininAge : 21Messages : 34

    le Sam 2 Juil 2016 - 21:41

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

    le Dim 3 Juil 2016 - 18:42

    merci
    Lynnakiel
    FémininAge : 20Messages : 18

    le Dim 3 Juil 2016 - 19:51

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

    le Lun 4 Juil 2016 - 2:23

    joli
    Dearborn
    FémininAge : 22Messages : 99

    le Dim 10 Juil 2016 - 11:02

    Merci!
    Eryu
    FémininAge : 24Messages : 37

    le Lun 18 Juil 2016 - 19:09

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

    le Sam 23 Juil 2016 - 1:02

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

    le Dim 24 Juil 2016 - 13:55

    Merci
    Ryukaï
    MasculinAge : 18Messages : 522

    le Mar 26 Juil 2016 - 16:42

    merci Very Happy



    Merwyn Arehdel
    FémininAge : 17Messages : 298

    le Jeu 28 Juil 2016 - 15:31

    Wow merci ! :)



    Just want to be yours.
    Mistiny
    FémininAge : 13Messages : 21

    le Ven 29 Juil 2016 - 17:54

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

    le Lun 1 Aoû 2016 - 1:53

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

    le Sam 6 Aoû 2016 - 21:21

    Merci :3
    NekoMiaouw
    FémininAge : 20Messages : 100

    le Mar 23 Aoû 2016 - 15:43

    J'aime beaucoup ce système, merci!



    Liumi
    MasculinAge : 16Messages : 9

    le Lun 29 Aoû 2016 - 22:12

    merci :)
    Nyroc
    MasculinAge : 14Messages : 51

    le Ven 9 Sep 2016 - 21:37

    Merci ^^



    witm
    FémininAge : 22Messages : 50

    le Jeu 15 Sep 2016 - 19:38

    merci beaucoup :heart:
    Yunroxas
    FémininAge : 23Messages : 35

    le Sam 24 Sep 2016 - 20:17

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

    le Mar 27 Sep 2016 - 0:24

    Merci !
    Noubil
    FémininAge : 28Messages : 56

    le Jeu 13 Oct 2016 - 23:55

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

    le Ven 14 Oct 2016 - 17:52

    Merci beaucoup ! :bisou:
    leviarthrite
    FémininAge : 29Messages : 26

    le Ven 14 Oct 2016 - 19:05

    Merci
    Alborio
    MasculinAge : 17Messages : 12

    le Jeu 27 Oct 2016 - 14:00

    Merci!
    Contenu sponsorisé

    Aujourd'hui à 5:55


      La date/heure actuelle est Mar 17 Jan 2017 - 5:55