Bonjour,

Voila je cherche comment je pourrais mettre une image derrière le profil de chacun de mes membres.
Je voudrais y mettre un parchemin dans ce genre là :
J'ai vu parfois que pour certain code, l'image est coupée en 3 parties : partie du haut fixe, partie du milieu répétée, partie du bas fixe. (même principe que la barre des votes)

Pensez vous que c'est réalisable ?

Bonjour,

Dans ce cas précis, ça ne l'est pas vraiment : ton parchemin n'a pas une partie centrale qui se répète ^^'

Je t'invite à jeter un oeil à ce tutoriel d'Orange qui n'a rien à voir avec ce que tu demandes (Ah bravo 'Christa, super utile ton aide ) mais comporte une bonne partie en lien avec la personnalisation du profil.

Effectivement, c'est pas tout à fait ce que je demande ^^'
D'autant que sur mon forum il n'y a pas de contours ...
Une autre solution est-elle envisageable ?

Peut être mettre l'image en background d'un div conteneur des information de profil ? Ou du moins l'avatar, quitte à mettre les informations en infobulle, pour éviter les déformements ? Enfin, je vais essayer de faire mumuse avec mon éditeur de styles.

Code:

.élément {
    background: url("http://www.noook.fr/img/parchemin-noook.gif") no-repeat scroll 0% 0% transparent;
    padding: 55px;
}

Avec ce code là, ça donne ceci : https://2img.net/r/hpimg15/pics/977425profilparchemin.png

Je ne sais pas si c'est vraiment l'endroit où tu voulais faire cette modification, mais bon, je tente quand même ! ^^
Du coup, il faudrait rajouter une classe [ T'as vu, 'Christa, j'apprend vite ! *meurt* ] dans le td contenant les informations du posteur...

Mais du coup, il faudrait changer l'affichage pour éviter que les informations de profils ne dépassent du parchemin.... Je pensais que ce serait peut être possible si on mettait toute les infos du posteur dans un div, avec le fond en taille maximale ( background-size: 100% 100%; ) Je sais pas si c'est possible, quelqu'un pourrait passer pour confirmer ce que je dis. *-*

Quoi d'autre... Ah, oui, l'image est entourée d'une petite ligne de pixels blancs... Je sais pas si c'est volontaire. Je trouve ça un peu disgracieux, m'enfin, c'est que mon avis.

Voilà voilà. (:

C'est exactement ce que je veux, après je ne m'y connais pas trop en codage donc pour moi ça reste un peu flou ...
La classe est a rajouter dans le template, puis on l'utilise dans le CSS c'est ça ?
Donc on oublie l'image en 3 parties et on la met directement ?

Pour les pixels blancs j'avais pas remarqué, j'ai passé un petit coup de transpa :

Rhô, le tutoriel d'Orange permet de cerner l'endroit où se place le profil et donc de l'éditer par la suite U.U

Bref.

Citation :

Mais du coup, il faudrait changer l'affichage pour éviter que les informations de profils ne dépassent du parchemin.... Je pensais que ce serait peut être possible si on mettait toute les infos du posteur dans un div, avec le fond en taille maximale ( background-size: 100% 100%; ) Je sais pas si c'est possible, quelqu'un pourrait passer pour confirmer ce que je dis. *-*

Je n'ai rien compris XD Et je ne pense pas que mettre le fond en taille maximale (CSS3 again...) aide beaucoup XD

L'idéal serait plutôt de mettre l'avatar normalement et de placer les informations de l'auteur dans un bloc déroulant (avec un overflow:auto)

Dans le template viewtopic_body, la partie qui contient le profil est une cellule, à savoir cette section (c'était dans le tuto d'Orange x) )

Code:

      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
        <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
            <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><br />
        <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>

Contrairement au tuto d'Orange on va éviter de toucher à la cellule, donc on met tout ce qu'il y a entre les deux balises <td ...> et </td> entre des balises <div> supplémentaires.

Et après pour juste la partie du profil, il faudra rajouter un autre bloc qui lui contiendra un scroll si on dépasse. Comme il ne faut surtout pas mettre de bloc (div) dans un élément inline (span), il faut d'abord que tu transformes le <span class="postdetails poster-profile"> en <div class="postdetails poster-profile">, et le tout dernier </span> en </div>

Après je vais te laisser faire tes propres essais (tu n'apprendras rien si on fait tout à ta place) mais voici quelques indications en plus :

La structure "générale" du code que j'ai cité en premier deviendra comme ceci :

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
  <div class="MonProfilPerso">
  PSEUDO, AVATAR, RANG...
      <div class="InfosProfil">
        LES CHAMPS DE PROFIL
      </div>
  LE DERNIER <br /> ET L'IMAGE FINALE (<img ... />) ICI
  </div>
  TU PEUX AUSSI PLACER LE DERNIER <br /> ET L'IMAGE FINALE (<img ... />) ICI
</td>

Le code correspondant aux champs de profil est cette partie :

Code:

            <!-- 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}

(Tu vas donc devoir l'entourer d'un div, celui qui correspond à la classe .InfoProfil dans mon exemple)

Pour le CSS...
Tu dois définir deux classes dans ton CSS, si on prend celles de mon exemple il y aura donc :
.MonProfilPerso : contient l'image que tu nous as donnée en fond, mais aussi sa largeur (width) et sa hauteur (height). Pense à rajouter un padding (genre padding:55px 5px 50px 5px;, qui correspond à l'espacement haut (55px) droit (5px) bas (50px) gauche (5px) par rapport aux bords du bloc)
.InfoProfil qui devra avoir une hauteur fixée (à toi de faire les tests) et un overflow:auto; pour que, lorsqu'il y a trop d'infos, le bloc ait une barre de défilement.

Pour taper 'Christa :
Ce n'est pas autorisé. Par contre, tu peux poser des questions x)

Merci de ton aide Christa.

J'ai juste un petit problème c'est que j'ai déjà pas mal modifier mon template du coup je sais pas où mettre les balises.
Voici mon code :

Code:

      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
        <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a>
          <center><strong>{postrow.displayed.POSTER_NAME}</strong></center>
        </span><br>
        <div class="postdetails poster-profile">
          <center>{postrow.displayed.RANK_IMAGE}</center><br>
          <center>{postrow.displayed.POSTER_AVATAR}</center><br>
        <div onClick="a=this.nextSibling.style;a.display=(a.display==''?'none':'')" class="bouton-profil">En savoir plus</div>
          <div class="profil-cache" style="display: none">
            <!-- 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}
          </div>

        <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>

Ben apparemment tu sais où est la bonne cellule, c'est déjà un bon point de départ. La seule "différence", c'est que la partie du profil, cette fois, c'est celle ci :

Code:

<div class="profil-cache" style="display: none">
            <!-- 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}
          </div>

Et en plus, la transformation de span en div est déjà faite.

Du coup grosso modo tout ce que tu as à faire :
• rajouter un <div ... > et le </div> associé juste "entre" les balises <td ... > et </td>
• Rentabiliser le <div ... > qui entoure DÉJÀ le profil (du coup mon .InfoProfil dans mon exemple précédent est inutile, tu n'as qu'à personnaliser la classe .profil-cache)

Tout le reste se passe dans le CSS, et je préfère que tu essaies sérieusement avant de te donner le code tout fait, l'apprentissage c'est important o/

J'ai testé plusieurs fois durant la journée mais rien ne se produit.

Mon template :

Code:

      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
      <div class="ProfilPerso">
        <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a>
          <center><strong>{postrow.displayed.POSTER_NAME}</strong></center>
        </span><br>
        <div class="postdetails poster-profile">
          <center>{postrow.displayed.RANK_IMAGE}</center><br>
          <center>{postrow.displayed.POSTER_AVATAR}</center><br>
        <div onClick="a=this.nextSibling.style;a.display=(a.display==''?'none':'')" class="bouton-profil">En savoir plus</div>
          <div class="profil-cache" style="display: none">
            <!-- 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}
          </div>
        </div>
        <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>

Et l'extrait qui concerne le profil de mon CSS :

Code:

.bouton-profil {
    cursor: pointer; /* curseur au survol */
    margin: 2px 0; /* petite marge en haut et en bas */
    padding: 1px; /* espacement entre le texte et la bordure */
    text-align: center; /* centrage du texte dans le bloc */
    /* -- mise en forme -- */
    background: ; /* couleur de fond */
    border: 5px double #750E0E; /* bordure */
    color: #FFFFFF; /* couleur texte */
    font-size: 12px; /* taille du texte */
    font-weight: ; /* effet gras */
    letter-spacing: 2px; /* espace entre les lettres */
}

.profil-cache {
    height: 100
    border: 5px double #750E0E;
    margin: 2px 0;
    padding: 2px;
    text-align: center; /* centrage du texte dans le bloc */
    overflow:auto
}

.ProfilPerso {
    background: url(http://img15.hostingpics.net/pics/721694Parchemin.png)
    height: 100
    width: 100
    padding: 55px 5px 50px 5px;
}

A mon avis le problème vient du CSS, peut-être la taille ...
Ou alors c'est le .bouton-profil qui contredit l'autre code ...

Merci d'avance de ta patience

Regarde la première ligne dans ta classe .ProfilPerso : Où est le point virgule à la fin ? Ca ne risque pas de marcher ^^'

Edit : Et pareil pour les autres lignes. Une déclaration CSS se termine toujours par un point virgule. C'est pareil en PHP, en Javascript et dans plein d'autres langages @_@

Ok merci, j'ai essayé et ça donne ce que je veux !
Seulement un dernier problème, le parchemin est trop court, j'imagine qu'avec un petit coup de graph' c'ets arrangé ou y a t-il une autre manière ?

Ben c'est à toi de t'arranger pour que les avatars et les différents contenus ne dépassent pas les limites du parchemin ^^' Et aussi, de choisir si nécessaire un parchemin plus grand.

Problème résolu, merci beaucoup pour ta patience et ton temps

Hello (:
Puisque le problème est résolu, je déplace (:
La prochaine fois, merci de le signaler dans le titre du topic