AccueilDernières imagesRechercherS'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.

-50%
Le deal à ne pas rater :
-50% Baskets Nike Air Huarache
64.99 € 129.99 €
Voir le deal
Le Deal du moment : -24%
PC Portable Gaming 15.6″ Medion Erazer Deputy ...
Voir le deal
759.99 €

    Encadrer l'Avatar et le profil dans les messages

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mer 9 Sep 2009 - 12:17

    Rappel du premier message :

    Bonjour !

    Là aussi ayant eu de nombreuses demandes (y compris assez "vives" sur le FdF...), je vous donne l'astuce pour afficher un cadre autour de l'avatar profil dans les messages.

    Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.


    Le tout se déroule en deux étapes : la première consiste à poser des divisions dans le templates correspondant à l'affichage des messages (="div"). Ces divisions comporteront un "class" (classe css) qui nous permettront ensuite d'y appliquer une mise en forme par le biais du CSS (second temps) et en particulier un fond, puisque c'est ce qui nous intéresse.


    1) Installation TEMPLATES :

    Allez dans "Affichage" > Templates > Général, puis sélectionnez le Template "viewtopic_body".

    Repérez la partie :

    Code:
    <!-- BEGIN displayed -->
       <tr class="post">
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" max-width="170">

    Et mettez votre première division, correspondant au fond du pseudo et donc à votre "tête" de cadre :

    Code:
    <div class="profil_head">

    Refermez cette division juste après :

    Code:
    <a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong>

    Ajoutez donc la fermeture de division :

    Code:
    </div>

    Information : ajoutez au besoin le code correspondant au retour à la ligne pour espacer le pseudo de l'affichage du rang en dessous (selon l'image de fond que vous mettrez).

    On va ajouter une autre division qui entourera le pseudo des membres, afin de pouvoir le placer où on veut dans votre division de tête (selon le type d'image de fond).

    Ajoutez donc :

    Code:
    <div class="profil_name">

    Juste avant :

    Code:
    <a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong>



    Voici la fin des divisions :

    Code:
    <div class="profil_body"><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>
    </div>
    <div class="profil_foot"></div>

    Vous observez donc la division "profil_body" qui correspond à l'ensemble "avatar / profil", et qui contiendra un fond qui se répètera verticalement.
    Juste après se trouve la division "profil_foot" qui "ferme" votre cadre, c'est votre "pieds".


    2) Mise en Forme CSS

    Allez ensuite dans la Feuille CSS (Affichage > Images & Couleurs > Couleurs > Feuille CSS) afin que l'on mette en forme tout cela.

    Voici un exemple de CSS :

    Code:
    .profil_head
    {
    background-image: url(adresse de votre image de fond);
    background-repeat: no-repeat;
    width: largeur de votre image;
    height: hauteur de votre image;
    }

    .profil_name
    {
    padding-top: distance du pseudo au bord supérieur;
    }

    .profil_body
    {
    background-image: url(adresse de votre image de fond);
    background-repeat: repeat-y;
    width: largeur de votre image;
    }

    .profil_foot
    {
    background-image: url(adresse de votre image de fond);
    background-repeat: no-repeat;
    width: largeur de votre image;
    height: hauteur de votre image;
    }

    A vous de jouer pour mettre tout ça en forme ! Et merci de RESPECTER le travail que j'ai dû fournir pour vous permettre de faire cela !


    Supplément :
    Pour ajouter un overflow sur le profil (autrement dit qu'il soit déroulant s'il devient trop long), il suffit d'ajouter dans le CSS (dans la division du corps du profil) :

    Code:
    .profil_body
    {
    background-image: url(adresse de votre image de fond);
    background-repeat: repeat-y;
    width: largeur de votre image;
    max-height: hauteur max du profil;
    overflow: auto;
    }

    Ce tuto ainsi que la méthode vient de moi et moi seul, merci donc de ne pas diffuser ce tuto en le copiant. Vous pouvez par contre librement en indiquer le lien direct.

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par Sparrow-style le Jeu 28 Mar 2013 - 14:20, édité 1 fois



    sign
    CaNL
    CaNL
    FémininAge : 31Messages : 9

    Lun 9 Mai 2016 - 6:14

    Merci o/
    Myrddin
    Myrddin
    FémininAge : 33Messages : 61

    Mer 11 Mai 2016 - 22:13

    Merci !
    Suisen
    Suisen
    FémininAge : 29Messages : 52

    Jeu 12 Mai 2016 - 0:00

    Merci ♥
    Athéna
    Athéna
    FémininAge : 63Messages : 29

    Jeu 12 Mai 2016 - 3:20

    Je jette un oeil, un grand merci ^^



    "L'esprit est un instrument de musique avec une certaine gamme de tons,
    au-deLà desquels s'étend un silence infini."
    Heryon
    Heryon
    FémininAge : 29Messages : 23

    Jeu 12 Mai 2016 - 21:45

    Merci !
    The baily gossip
    The baily gossip
    FémininAge : 38Messages : 36

    Ven 13 Mai 2016 - 12:58

    Merciiiiii
    pépito1989
    pépito1989
    FémininAge : 34Messages : 9

    Ven 13 Mai 2016 - 16:18

    Merci
    marie-noelle
    marie-noelle
    FémininAge : 66Messages : 112

    Lun 16 Mai 2016 - 18:58

    merci
    Lou Ange
    Lou Ange
    FémininAge : 26Messages : 33

    Mar 17 Mai 2016 - 13:17

    Merci ! :)



    Encadrer l'Avatar et le profil dans les messages - Page 20 Signu10
    Saik
    Saik
    MasculinAge : 28Messages : 65

    Dim 22 Mai 2016 - 18:05

    merci
    Hadès.
    Hadès.
    MasculinAge : 25Messages : 42

    Dim 22 Mai 2016 - 21:41

    merci
    JuanCastie954
    JuanCastie954
    MasculinAge : 29Messages : 4

    Mar 24 Mai 2016 - 1:34

    Merci !
    Faïryna
    Faïryna
    FémininAge : 21Messages : 87

    Sam 28 Mai 2016 - 12:04

    Merci pour le boulot! Very Happy
    Lust Caution
    Lust Caution
    FémininAge : 29Messages : 79

    Sam 28 Mai 2016 - 21:30

    merci.
    paradox68
    paradox68
    MasculinAge : 41Messages : 11

    Dim 29 Mai 2016 - 18:59

    Merci à toi
    CathyCréation
    CathyCréation
    FémininAge : 44Messages : 207

    Jeu 2 Juin 2016 - 9:39

    merci bcp
    -Resis
    -Resis
    MasculinAge : 27Messages : 25

    Dim 5 Juin 2016 - 15:54

    mci
    MPGuenette
    MPGuenette
    FémininAge : 28Messages : 111

    Sam 11 Juin 2016 - 21:35

    thank youuu
    castles
    castles
    MasculinAge : 24Messages : 6

    Lun 27 Juin 2016 - 21:29

    Merciii :)
    Sideris
    Sideris
    FémininAge : 28Messages : 113

    Mer 29 Juin 2016 - 21:33

    Merci !









    Keylha
    Keylha
    FémininAge : 23Messages : 82

    Jeu 30 Juin 2016 - 2:41

    Merci :')



    Pelezinho
    Pelezinho
    MasculinAge : 24Messages : 91

    Jeu 7 Juil 2016 - 2:29

    Thanks ! ♣



    [MERCI D'INTRODUIRE SIGNATURE ORIGINALE ICI]
    Nekrofyre
    Nekrofyre
    MasculinAge : 24Messages : 33

    Sam 9 Juil 2016 - 22:35

    Merci, je voulais le faire depuis longtemps! Very Happy
    Liintu
    Liintu
    FémininAge : 34Messages : 67

    Lun 11 Juil 2016 - 18:08

    thank you Very Happy
    papill0n
    papill0n
    FémininAge : 33Messages : 2

    Mar 12 Juil 2016 - 8:31

    Merci ! Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 20:23