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.

-20%
Le deal à ne pas rater :
Pack Gigabyte Ecran PC Gamer 27″ LED M27Q (rev2.0) + Radeon RX 6950 ...
749 € 939 €
Voir le deal

    Encadrer l'Avatar et le profil dans les messages

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

    Mer 9 Sep 2009 - 12:17

    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
    Sasu'X74
    Sasu'X74
    MasculinAge : 30Messages : 142

    Mer 13 Juin 2012 - 19:12

    Merci.



    Encadrer l'Avatar et le profil dans les messages Uchiha_sasuke_signature_by_dr_giddy
    Corkyie
    Corkyie
    FémininAge : 26Messages : 75

    Jeu 14 Juin 2012 - 21:37

    Merci ^^'
    Tweety
    Tweety
    FémininAge : 30Messages : 48

    Ven 15 Juin 2012 - 14:03

    Merci pour ce tutoriel :)
    Sunnie
    Sunnie
    FémininAge : 26Messages : 13

    Ven 15 Juin 2012 - 19:28

    Merci beaucoup du partage (:
    Kraken
    Kraken
    FémininAge : 31Messages : 137

    Ven 15 Juin 2012 - 23:31

    Merci ♥
    killer999
    killer999
    MasculinAge : 33Messages : 116

    Sam 16 Juin 2012 - 0:40

    Thanks a lot!
    Summeryoid
    Summeryoid
    FémininAge : 29Messages : 32

    Sam 16 Juin 2012 - 12:07

    Oh merci pour ce tuto :3



    Encadrer l'Avatar et le profil dans les messages 539853pin
    Len111
    Len111
    MasculinAge : 27Messages : 98

    Dim 17 Juin 2012 - 15:05

    Thanks



    Encadrer l'Avatar et le profil dans les messages Len2c
    xodramm
    xodramm
    FémininAge : 46Messages : 286

    Dim 17 Juin 2012 - 17:32

    Merci beaucoup.
    Miradada
    Miradada
    FémininAge : 31Messages : 14

    Lun 18 Juin 2012 - 22:23

    Merci :)
    Soul
    Soul
    MasculinAge : 28Messages : 1723

    Mar 19 Juin 2012 - 0:25

    Thanks Capitaine !
    Crunshiii
    Crunshiii
    FémininAge : 24Messages : 58

    Mar 19 Juin 2012 - 8:32

    Merci du partage ! (:
    Ryosaki
    Ryosaki
    MasculinAge : 31Messages : 109

    Mar 19 Juin 2012 - 14:03

    MERCI



    Encadrer l'Avatar et le profil dans les messages Tutog
    Blue-J
    Blue-J
    FémininAge : 31Messages : 185

    Mar 19 Juin 2012 - 15:32


    Un tuto très pratique !
    Yume
    Yume
    MasculinAge : 29Messages : 40

    Mer 20 Juin 2012 - 3:51

    Merci pour ce tuto <3!



    Encadrer l'Avatar et le profil dans les messages Yume
    Sara_y
    Sara_y
    FémininAge : 33Messages : 81

    Mer 20 Juin 2012 - 13:07

    Coucou ^^
    Ma curiosité me perdra mais je veux voir de quoi il en retourne Very Happy
    Merci Capitaine :ship:



    Encadrer l'Avatar et le profil dans les messages 389654Arrow
    Darkjeely
    Darkjeely
    FémininAge : 27Messages : 45

    Mer 20 Juin 2012 - 13:16

    Merci bien o/
    Miku
    Miku
    MasculinAge : 31Messages : 70

    Jeu 21 Juin 2012 - 19:15

    Merci !
    ShiShi_Chan
    ShiShi_Chan
    MasculinAge : 34Messages : 51

    Ven 22 Juin 2012 - 6:50

    merchi *_*
    Marion-san
    Marion-san
    FémininAge : 27Messages : 89

    Sam 23 Juin 2012 - 16:44

    Merci du partage Very Happy



    Encadrer l'Avatar et le profil dans les messages Tumblr_m6drlqJB9O1qbd8iro1_500
    Kyoraku Shunsui
    Kyoraku Shunsui
    MasculinAge : 30Messages : 864

    Sam 23 Juin 2012 - 21:21

    merci cap'taine !
    OMJ
    OMJ
    FémininAge : 33Messages : 92

    Dim 24 Juin 2012 - 10:12

    Merci.
    Gravity
    Gravity
    MasculinAge : 26Messages : 2369

    Dim 24 Juin 2012 - 11:37

    merci



    Encadrer l'Avatar et le profil dans les messages 1492519401-bg-copie
    Amiyah
    Amiyah
    FémininAge : 29Messages : 47

    Dim 24 Juin 2012 - 15:57

    Merci ♥
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 0:34