AccueilRechercherS'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.

-40%
Le deal à ne pas rater :
Lacoste : -40% sur la ceinture sangle siglée à boucle plaque gravée
33 € 55 €
Voir le deal

    Encadrer l'Avatar et le profil dans les messages

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

    le Mer 9 Sep - 10: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 - 13:20, édité 1 fois



    sign
    Kiki85
    Kiki85
    MasculinAge : 26Messages : 398

    le Dim 8 Juin - 21:28

    Ca m'intrigue, je vais voir ça ! :)
    Merci
    Mangédéfruiélégumeuh
    Mangédéfruiélégumeuh
    MasculinAge : 23Messages : 83

    le Mer 11 Juin - 12:09

    Merci Very Happy
    Grande
    Grande
    FémininAge : 33Messages : 207

    le Jeu 12 Juin - 19:13

    Merci



    Encadrer l'Avatar et le profil dans les messages - Page 5 171074gwenj10
    Reishi
    Reishi
    MasculinAge : 27Messages : 146

    le Dim 15 Juin - 9:20

    merci !
    Elf-of-Nature
    Elf-of-Nature
    FémininAge : 26Messages : 156

    le Dim 15 Juin - 16:43

    Merciiii :-D



    Encadrer l'Avatar et le profil dans les messages - Page 5 216988Renardssigna
    l'intruse
    l'intruse
    FémininAge : 26Messages : 46

    le Lun 16 Juin - 2:01

    Merci beaucoup!!! Very Happy
    Patou972
    Patou972
    FémininAge : 42Messages : 172

    le Lun 16 Juin - 4:15

    merci
    Yser
    Yser
    FémininAge : 22Messages : 46

    le Mar 17 Juin - 21:52

    Merci !
    Nanou0001
    Nanou0001
    FémininAge : 36Messages : 50

    le Ven 20 Juin - 7:17

    merci
    Kiwi SuperStar
    Kiwi SuperStar
    FémininAge : 29Messages : 88

    le Ven 20 Juin - 7:30

    Merchi d'avance :3
    Zélya
    Zélya
    FémininAge : 31Messages : 190

    le Ven 20 Juin - 8:02

    bonjour merci



    Encadrer l'Avatar et le profil dans les messages - Page 5 891727signaNanmoue
    erwand59
    erwand59
    MasculinAge : 31Messages : 88

    le Dim 22 Juin - 10:22

    Envie de voir :)
    Kau
    Kau
    FémininAge : 19Messages : 148

    le Dim 22 Juin - 13:30

    merci
    Daisy Hardman
    Daisy Hardman
    FémininAge : 23Messages : 60

    le Dim 22 Juin - 19:34

    Merci!
    Loupiotte-Fr
    Loupiotte-Fr
    FémininAge : 24Messages : 27

    le Mar 24 Juin - 16:40

    Merci Very Happy



    Once Upon a Time
    ... Réécrit l'histoire ...
    Anonymous
    Invité

    le Mar 24 Juin - 18:42

    Merci
    Ahila
    Ahila
    FémininAge : 27Messages : 107

    le Ven 27 Juin - 11:04

    Merchi!
    Elanille
    Elanille
    FémininAge : 30Messages : 2

    le Ven 27 Juin - 20:56

    Merci bien :)
    mini-mimi
    mini-mimi
    FémininAge : 24Messages : 75

    le Sam 28 Juin - 11:03

    par curiosité :)
    -Hikaru-
    -Hikaru-
    MasculinAge : 24Messages : 52

    le Sam 28 Juin - 15:37

    merci
    tamanegeek
    tamanegeek
    MasculinAge : 21Messages : 167

    le Lun 30 Juin - 1:09

    Thx !
    Shinju.dot
    Shinju.dot
    FémininAge : 31Messages : 88

    le Mar 1 Juil - 8:19

    merci
    Filou
    Filou
    FémininAge : 29Messages : 162

    le Mar 1 Juil - 8:53

    Thanks you
    Anonymous
    Invité

    le Mar 1 Juil - 19:27

    Merci !
    Kuta
    Kuta
    MasculinAge : 27Messages : 224

    le Mar 1 Juil - 20:26

    Merci :)



    Encadrer l'Avatar et le profil dans les messages - Page 5 12080210
    Contenu sponsorisé


      La date/heure actuelle est Sam 23 Jan - 19:32