Un codage d'avatar et de fiche de personnage

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Un codage d'avatar et de fiche de personnage

Message par Rimaï J. Godwin Ven 8 Mai 2015 - 17:07

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://contrast.forumactif.org

Description du problème

Hello tout le monde,
Alors voilà, je voudrais modifier le profil des joueurs en général.
Voilà, je voudrais que dans les sujets, on puisse voir déjà l'avatar aux bords arrondit et en au survol de la souris, la fiche de personnage que le joueur peut compléter seul.
Comme je l'ai dit, les bords du vava arrondit, et la fiche de personnage au passage de la souris. Avec un effet fondu si possible (ou poussé). J'aimerai également que sur l'avatar soit écrit le pseudo du joueur (par-dessus) en haut et le grade (par-dessus en bas)(voir schéma!). La taille réglementaire est de 200x360

Schéma d'aide:

J'ai cru comprendre qu'il fallait modifier le template viewtopic_body, donc le voilà:

template:

Voilà, je pense avoir tout dit et j'espère avoir été claire surtout.
Merci infiniment à tout ceux qui m'aideront ou tenteront de m'aider.

PS: J'espère avoir fais ma demande au bon endroit >>


Dernière édition par Rimaï J. Godwin le Dim 10 Mai 2015 - 17:57, édité 1 fois
avatar

Rimaï J. Godwin
Nouveau membre

Messages : 3
Inscrit(e) le : 08/05/2015

http://contrast.forumactif.org
Rimaï J. Godwin a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un codage d'avatar et de fiche de personnage

Message par Rimaï J. Godwin Sam 9 Mai 2015 - 19:06

Demande toujours d'actu' c:
avatar

Rimaï J. Godwin
Nouveau membre

Messages : 3
Inscrit(e) le : 08/05/2015

http://contrast.forumactif.org
Rimaï J. Godwin a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un codage d'avatar et de fiche de personnage

Message par Audrey75 Dim 10 Mai 2015 - 11:02

Bonjour,

Pour modifier le profil sur vos forum vous devez aller dans le template "viewtopic_body", autrement nommé "Affichage d'un sujet". Dans ce template, repérez le code suivant :
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>

Il commence à la ligne 87 normalement. C'est la case du profil ("td" en codage html désignant la case d'un tableau).

Remplacez l'intégralité de ce passage par celui-ci :

Code:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
                  <div class="profil_mess">
        <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}</span>
                    <span class="avatar_mess">{postrow.displayed.POSTER_AVATAR}</span><br />
                  </div>
                  <div class="profil2_mess">
                    <center><img src="http://img15.hostingpics.net/pics/665019profilimage.png" /></center>
                    <div class="profil2_content"><span class="postdetails poster-profile">
            <!-- 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" /></div>
                  </div>
      </td>

N'oubliez pas d'enregistrer et de valider votre template modifié !

Installation CSS
Allez ensuite dans votre Feuille CSS pour y ajouter ce code, qui mettra en forme votre profil :

Code:
.profil_mess
{
  position: relative;
  z-index: 9;
  width: 210px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  background-color: #333333;
  padding: 4px;
  text-align: center;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -htm-border-radius: 10px;
  -o-border-radius: 10px;
  -webkit-border-radius: 10px;
  border: 2px solid #5b5b5b;
  box-shadow: 0px 0px 5px #000000;
  -moz-box-shadow: 0px 0px 5px #000000;
  -htm-box-shadow: 0px 0px 5px #000000;
  -o-box-shadow: 0px 0px 5px #000000;
  -webkit-box-shadow: 0px 0px 5px #000000;
}

.name
{
  display: block;
  text-transform: uppercase;
  margin-top: -15px;
  margin-bottom: -10px;
  font-size: 14px;
  font-family: arial black;
  text-shadow: 1px 1px 0px #000000;
  padding-bottom: 5px;
  border-bottom: 1px dashed #5b5b5b;
}

.avatar_mess
{
  display: block;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  height: 320px;
  overflow: hidden;
  border: 5px solid #0d0d0d;
  opacity: 0.7;
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  filter: alpha(opacity=70);
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.avatar_mess:hover
{
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

.profil2_mess
{
  position: relative;
  z-index: 1;
  width: 180px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -202px;
  background-color: #141414;
  padding-left: 4px;
  padding-right: 4px;
  text-align: left;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -htm-border-radius: 10px;
  -o-border-radius: 10px;
  -webkit-border-radius: 10px;
  border: 2px solid #434343;
  box-shadow: 0px 0px 5px #000000;
  -moz-box-shadow: 0px 0px 5px #000000;
  -htm-box-shadow: 0px 0px 5px #000000;
  -o-box-shadow: 0px 0px 5px #000000;
  -webkit-box-shadow: 0px 0px 5px #000000;
  color: #434343 !important;
  transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  -htm-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transition: 2s;
  -moz-transition: 2s;
  -o-transition: 2s;
  -htm-transition: 2s;
  -webkit-transition: 2s;
}
.profil2_mess:hover
{
  margin-top: -42px;
  transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -htm-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transition: 2s;
  -moz-transition: 2s;
  -o-transition: 2s;
  -htm-transition: 2s;
  -webkit-transition: 2s;
}
.profil2_content
{
  display: block;
  width: 180px;
  height: 200px;
  max-height: 200px;
  overflow: auto;
}

Personnalisation

Comme vous pouvez le constater, le profil est placé à l'envers sous l'avatar pour ensuite être remis dans le bon sens au survol. Du coup, il est OBLIGATOIRE que votre petite image de profil soit créée A L'ENVERS ! Bah oui, puisqu'elle n'apparait à l'endroit que parce que le bloc est à l'envers... Vous suivez ? XD

Pour le reste, il s'agit essentiellement de couleurs à changer, guère plus.

Parmi les effets du profil, l'avatar est en opacité légèrement réduite et devient opaque au survol, et le pseudo est en majuscules.

Source: Never-Utopia
Audrey75

Audrey75
Nouveau membre

Messages : 4
Inscrit(e) le : 09/05/2015

Audrey75 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un codage d'avatar et de fiche de personnage

Message par Rimaï J. Godwin Dim 10 Mai 2015 - 17:57

Audrey75
Merci beaucoup pour ton aide, j'avais déjà vu ce tuto x) mais je pense avoir trouvé ce qu'il me faut désormais, merci encore de t'être proposé ^^
avatar

Rimaï J. Godwin
Nouveau membre

Messages : 3
Inscrit(e) le : 08/05/2015

http://contrast.forumactif.org
Rimaï J. Godwin a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum