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.


    Encadrer l'Avatar et le profil dans les messages

    Partagez
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le 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.


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



    avatar
    Allison01
    FémininAge : 32Messages : 176

    le Jeu 8 Mai 2014 - 16:58

    Merci beaucoup ^^
    Phénix'
    FémininAge : 15Messages : 88

    le Jeu 8 Mai 2014 - 17:00

    Merci :')
    avatar
    Jull421
    FémininAge : 22Messages : 139

    le Ven 9 Mai 2014 - 4:01

    merci



    avatar
    SpicAsh
    FémininAge : 20Messages : 155

    le Ven 9 Mai 2014 - 14:30

    Merci !
    avatar
    TheHG
    FémininAge : 22Messages : 52

    le Ven 9 Mai 2014 - 15:29

    Merci !
    avatar
    Patapou
    FémininAge : 17Messages : 15

    le Mer 14 Mai 2014 - 18:14

    Merci
    avatar
    Canibal
    FémininAge : 25Messages : 26

    le Jeu 15 Mai 2014 - 17:04

    Merci pour le tutoriel!
    avatar
    Tatsumi Oga
    MasculinAge : 16Messages : 26

    le Jeu 15 Mai 2014 - 19:47

    J'éspere avoir un beau tuto
    avatar
    Mayiie
    FémininAge : 26Messages : 38

    le Ven 16 Mai 2014 - 1:45

    Merci !
    avatar
    Rococo
    MasculinAge : 21Messages : 28

    le Ven 16 Mai 2014 - 15:36

    Merci bien.
    avatar
    artic marteen
    FémininAge : 24Messages : 22

    le Ven 16 Mai 2014 - 15:53

    mercii



    Words are flying out like endless rain into a paper cup, they slither while they pass, they slip away across the universe. Pools of sorrow, waves of joy are drifting through my open mind, possessing and caressing me.   SEE YOU AT THE BITTER END. ytb
    avatar
    Jimmy
    MasculinAge : 21Messages : 166

    le Sam 17 Mai 2014 - 19:20

    merci
    avatar
    Xélore
    MasculinAge : 20Messages : 54

    le Sam 17 Mai 2014 - 23:20

    Merci Very Happy
    avatar
    Candy Libertine
    FémininAge : 18Messages : 135

    le Dim 18 Mai 2014 - 15:14

    Super merci *-*
    avatar
    Chatchoum
    FémininAge : 25Messages : 43

    le Mar 20 Mai 2014 - 16:13

    merciiiii ! <3
    avatar
    Clarisse
    FémininAge : 17Messages : 3931

    le Mar 20 Mai 2014 - 18:00

    Merci. :)
    avatar
    Ab0utxMe
    FémininAge : 22Messages : 182

    le Mar 20 Mai 2014 - 19:05

    Merci '-'



    PetitFermier
    MasculinAge : 17Messages : 445

    le Mer 21 Mai 2014 - 13:20

    Merci!
    avatar
    Kovu
    FémininAge : 15Messages : 250

    le Mer 21 Mai 2014 - 14:12

    Merci !



    avatar
    little_chuups
    FémininAge : 22Messages : 8

    le Mer 21 Mai 2014 - 18:17

    Merci beaucoup ♥
    avatar
    Everdeen
    FémininAge : 23Messages : 34

    le Jeu 22 Mai 2014 - 23:03

    Bonsoir :)

    Merci beaucoup Very Happy



    avatar
    thib56
    MasculinAge : 22Messages : 32

    le Ven 23 Mai 2014 - 14:51

    Merci.
    avatar
    Nivek075
    MasculinAge : 24Messages : 4

    le Sam 24 Mai 2014 - 11:48

    Merci beaucoup. :)
    avatar
    Hawk Lowell
    MasculinAge : 20Messages : 103

    le Sam 24 Mai 2014 - 12:36

    Merci
    avatar
    Féhéla
    FémininAge : 43Messages : 232

    le Sam 24 Mai 2014 - 14:24

    merci bcp :)
    Contenu sponsorisé


      La date/heure actuelle est Mar 25 Avr 2017 - 12:27