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 : 19Messages : 488

    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



    Alumine
    avatar
    Sophie2
    FémininAge : 53Messages : 40

    le Mer 22 Juin 2016 - 16:58

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

    le Ven 1 Juil 2016 - 13:23

    merciiii
    avatar
    andie_xcv
    FémininAge : 21Messages : 34

    le Sam 2 Juil 2016 - 21:41

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

    le Dim 3 Juil 2016 - 18:42

    merci
    avatar
    Lynnakiel
    FémininAge : 20Messages : 18

    le Dim 3 Juil 2016 - 19:51

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

    le Lun 4 Juil 2016 - 2:23

    joli
    avatar
    Dearborn
    FémininAge : 22Messages : 108

    le Dim 10 Juil 2016 - 11:02

    Merci!
    avatar
    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 !
    avatar
    Ombinou
    FémininAge : 22Messages : 104

    le Sam 23 Juil 2016 - 1:02

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

    le Dim 24 Juil 2016 - 13:55

    Merci
    En ligne
    avatar
    Ryukaï
    MasculinAge : 18Messages : 590

    le Mar 26 Juil 2016 - 16:42

    merci Very Happy



    avatar
    Merwyn Arehdel
    FémininAge : 17Messages : 298

    le Jeu 28 Juil 2016 - 15:31

    Wow merci ! :)



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

    le Ven 29 Juil 2016 - 17:54

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

    le Lun 1 Aoû 2016 - 1:53

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

    le Sam 6 Aoû 2016 - 21:21

    Merci :3
    avatar
    NekoMiaouw
    FémininAge : 20Messages : 116

    le Mar 23 Aoû 2016 - 15:43

    J'aime beaucoup ce système, merci!



    avatar
    Liumi
    MasculinAge : 16Messages : 9

    le Lun 29 Aoû 2016 - 22:12

    merci :)
    avatar
    Nyroc
    MasculinAge : 14Messages : 51

    le Ven 9 Sep 2016 - 21:37

    Merci ^^



    avatar
    witm
    FémininAge : 23Messages : 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
    avatar
    noksye
    FémininAge : 25Messages : 51

    le Mar 27 Sep 2016 - 0:24

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

    le Jeu 13 Oct 2016 - 23:55

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

    le Ven 14 Oct 2016 - 17:52

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

    le Ven 14 Oct 2016 - 19:05

    Merci
    avatar
    Alborio
    MasculinAge : 17Messages : 12

    le Jeu 27 Oct 2016 - 14:00

    Merci!
    Contenu sponsorisé


      La date/heure actuelle est Mar 28 Mar 2017 - 14:08