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.

Le deal à ne pas rater :
Coffret dresseur d’élite ETB Pokémon EV06 Mascarade Crépusculaire
56.90 €
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

    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
    MikuSong
    MikuSong
    FémininAge : 26Messages : 32

    Sam 31 Jan 2015 - 17:30

    Thks ♥



    Encadrer l'Avatar et le profil dans les messages - Page 12 681302Boo2A
    N'est pas peur...Je suis un gentil fantôme /
    tinker`bell
    tinker`bell
    FémininAge : 35Messages : 20

    Dim 1 Fév 2015 - 18:23

    Merci.
    lolosmile
    lolosmile
    FémininAge : 32Messages : 37

    Jeu 5 Fév 2015 - 15:44

    merci
    kreou
    kreou
    FémininAge : 33Messages : 50

    Dim 8 Fév 2015 - 1:37

    merci de l'astuce ! :)
    Henoch
    Henoch
    FémininAge : 41Messages : 34

    Lun 9 Fév 2015 - 17:05

    merci
    blade li britannia
    blade li britannia
    MasculinAge : 31Messages : 90

    Mer 11 Fév 2015 - 11:35

    merci



    Encadrer l'Avatar et le profil dans les messages - Page 12 Vpzr10
    Dark-Pandaa
    Dark-Pandaa
    FémininAge : 22Messages : 10

    Mer 11 Fév 2015 - 21:58

    Merci !
    Meldicia
    Meldicia
    FémininAge : 36Messages : 31

    Jeu 12 Fév 2015 - 21:39

    Merci!
    narakye
    narakye
    FémininAge : 30Messages : 503

    Dim 15 Fév 2015 - 18:12

    Super pratique , merci =)
    Saphiina
    Saphiina
    FémininAge : 29Messages : 26

    Lun 16 Fév 2015 - 16:15

    Merci :3
    pika-cerise
    pika-cerise
    FémininAge : 32Messages : 92

    Mar 17 Fév 2015 - 10:10

    merci
    ClaryF
    ClaryF
    FémininAge : 33Messages : 138

    Ven 20 Fév 2015 - 21:08

    Merci.
    Kortyx
    Kortyx
    MasculinAge : 33Messages : 81

    Sam 21 Fév 2015 - 16:19

    héhé, merci ^^
    Kianda
    Kianda
    MasculinAge : 23Messages : 88

    Dim 22 Fév 2015 - 18:02

    Merci ^^



    Encadrer l'Avatar et le profil dans les messages - Page 12 1416416855-kandiasigna
    AnimeFanGirl199
    AnimeFanGirl199
    FémininAge : 26Messages : 13

    Lun 23 Fév 2015 - 3:32

    Merci :)
    Drizzle
    Drizzle
    FémininAge : 25Messages : 135

    Lun 2 Mar 2015 - 17:07

    Merci :p.



    Encadrer l'Avatar et le profil dans les messages - Page 12 800961Drizzle
    Mecat
    Mecat
    FémininAge : 35Messages : 55

    Mar 3 Mar 2015 - 3:07

    Merci beaucoup Very Happy



    Encadrer l'Avatar et le profil dans les messages - Page 12 Girl310
    Girly
    Girly
    FémininAge : 26Messages : 116

    Mer 4 Mar 2015 - 12:44

    merci
    Kasshad
    Kasshad
    MasculinAge : 34Messages : 319

    Mer 4 Mar 2015 - 18:10

    Je veux voiiir Very Happy Merci



    Encadrer l'Avatar et le profil dans les messages - Page 12 Prateb
    Youp
    Youp
    FémininAge : 29Messages : 579

    Jeu 5 Mar 2015 - 23:38

    Merci beaucoup Encadrer l'Avatar et le profil dans les messages - Page 12 2774444739 J'espère arriver au résultat que je souhaite en partant de ton code



    Encadrer l'Avatar et le profil dans les messages - Page 12 262632clip20160315at092522
    Krager
    Krager
    MasculinAge : 28Messages : 68

    Sam 7 Mar 2015 - 11:54

    merci
    Selmacke
    Selmacke
    FémininAge : 33Messages : 100

    Lun 9 Mar 2015 - 20:03

    merci !
    Bzzzz
    Bzzzz
    FémininAge : 39Messages : 88

    Lun 16 Mar 2015 - 15:52

    Merci beaucoup
    Dacina moe
    Dacina moe
    FémininAge : 45Messages : 171

    Ven 20 Mar 2015 - 15:20

    Merci beaucoup ! :)
    Syx
    Syx
    MasculinAge : 25Messages : 204

    Ven 20 Mar 2015 - 18:23

    Je prends, merci :B




    ~
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 1:14