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.



9 résultats trouvés pour profil

Happy Halloween (Epoque moderne, style manga, boucle temporelle) - Mar 31 Oct 2017 - 17:32

ouverture
31 Octobre
Happy Halloween
époque moderne / style manga

#je reviens avec le reste dans un edit #je voulais poster mon petit blabla aujourd'hui, un 31 octobre :gene:

#je reviens donc avec des propositions de prédéfinis (une dizaine :3), un contexte (boucle temporelle et comptes à rebours avec artefacts à trouver ), des propositions de lieux avec des mini-intrigues et la description des différents groupes jouables (au nombre de 3 pour une première phase de lancement) #vous incarnez autant de personnages qu'il y a de groupe

#pas de fiche de présentation à faire #une mini-fiche pouvoirs remplace la fiche de présentation #nouveau design = ajout d'un groupe #le nombre total de groupe ne dépassera pas 12. #vous êtes obligés de créer un nouveau personnage pour le nouveau groupe ajouté avec le nouveau design #participation à un event au choix obligatoire #gros bonus de point pour tous rp-event à 5 personnages





#mots -clés du contexte #boucle temporelle #des sourires carnassiers #des excentriques #des mélancoliques à cause des disparitions #humain maudit #ils doivent trouver 12 artefacts pour se soigner #ils obtiennent des pouvoirs #ils deviennent de plus en plus fous #ils peuvent retrouver la raison aussi #délices #chatouilles #miroirs #joker #boucle temporelle avec un compte à rebours du 31 octobre au 2 novembre.

#rules #guide du nouveau arrivant #vous incarnez autant de personnages qu'il y a de groupe #il n'y a que trois groupes de disponible pour la première ouverture #vous êtes obligés de créer le nouveau personnage lorsqu'il y a un nouveau groupe #nouveau design = ajout d'un groupe #on s’arrêtera à 12 groupes donc 12 designs #fermeture du forum mode ON #avatars de style manga #pas de fiche de présentation #fiche de relation obligatoire #fiche de relation remplace fiche de présentation #système de jeu à piocher dans mes propres sélections #rp à 5 #zone rp à reculons #zone rp 2-3-4 Groupes dans le même rp #zone rp avec autorisation de poster un rp où l'on veut #romance & bromance acceptée #mais pas de lemon #ni de hentai #parcours rp suffisamment complet grâce à des mini-rps dans des mini-codes

#annexes pour informations sur contexte et groupes #participation à un event au choix obligatoire
#explication sur la provenance des créatures #créations et descriptions de nouveaux lieux qui sont liés à l'intrigue du nouveau groupe #plusieurs PNJ au cas où

_____

12 groupes maximums #pour 12 personnages maximums #une intrigue = l'ajout d'un groupe dans les annexes du forum #les voici dans l'ordre :

#intrigue des lunettes (premier groupe, les lunettes qu'ils se sont procurés ont des capacités de visibilité, lunette de vue comme lunette de soleil, achat boutique déstockage, objet perdu dans salle de cinéma, lunette trouvé dans boite aux lettres, lunette de sa frangine, lunette de son paternel, il doit y avoir la paire de lunette sur l'avatar) #couleur du groupe : brun (pour les cheveux bruns naturels des personnages civils )

#intrigue des déguisement (deuxième groupe, il faut que votre personnage soit un humain qui s'est déguisé pour célébrer halloween, son costume peut être peu ou très élaborés, avec costume, maquillage et/ou perruque) #couleur du groupe : orange (pour les citrouilles décoratives)

#intrigue des yeux émeraudes (troisième groupe, il faut que votre personnage soit un mystérieux individu aux yeux émeraudes et aux capacités magiques assez surprenantes ) #couleur du groupe : vert (évident)

#intrigue des flammes bleues (quatrième groupe, il faut que votre personnage soit un mystérieux individu qui contrôle une lumière bleuâtre luminescence et à l'aspect d'une flamme) #couleur du groupe : bleu ciel (évident)

#intrigues sur black red heart (uh uh uh, les couleurs ont tendances à disparaitre dans des flashs, la maquette du forum en témoigne avec des gifs) #couleur du groupe : rouge

#intrigue des cheveux roses #couleur du groupe : rose (il faut que votre personnage soit un mystérieux individu avec des cheveux roses)

#intrigue yeux dorés #couleur du groupe : mordoré (il faut que votre personnage soit un mystérieux individu avec des yeux dorés, ils sont tous une aura dorée)

#intrigues sur les cigarettes (il faut que votre personnage soit un mystérieux individu avec qui fume)

#intrigue yeux vairons (il faut que votre personnage soit un mystérieux individu avec des yeux vairons)

#intrigue des parapluies (il faut que votre personnage soit un mystérieux individu avec un parapluie)

______

#graphisme & codage & templates #améliore toi pour les prochains designs #forumactif ou jcink ? #le forum s'appellera "happy halloween" #bon pour le référencement seo #il a été ouvert un 31 octobre. #maquette à finir #structure à définir #partenariat #archives des demandes de relations #annonces #zone rp #QEEL #noms des groupes #profil code couleurs brush #un membre vient avec trois personnages #s'il y a 6 membres par exemple, 3x6=18 personnages en tout #ouverture un 31 octobre #relance tous les ans pour le 31 octobre #collection des maquettes coup de coeur pour s'en inspirer #mettre à jour la playlist #promouvoir le lancement sur quelques pages facebook




HAPPY HALLOWEEN
WANTED
annexes / contexte / groupes

Cheshire Cat

Profil gris avec effet au survol - Dim 19 Fév 2017 - 14:54



Bonjour ou bonsoir !
Je suis de nouveau là, de retour pour vous proposer un nouveau libre service de profil avec un style assez simple !

Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.

Aperçu en image:


Optimisé pour tous les navigateurs - Version PHPBB2

Quelques infos:
- La taille de la création est de 200 pixels.
- La taille des avatars dans le code est de 320 pixels, mais adaptable si vous modifiez la valeur.
- Les couleurs et les polices sont modifiables et sont toutes indépendantes de la charte de couleur dans l'onglet Couleurs.

Installer votre nouveau profil:
Pour commencer l'installation de notre nouveau profil, nous allons devoir aller dans Panneau d'administration > Accueil > Affichage > Templates > Généralités > viewtopic_body et chercher cette partie, si votre template n'est pas encore modifiée
Code:
<!-- BEGIN displayed -->
   <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
         <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{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://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>


Vous supprimez et vous remplacez par ce qui suis
Code:
<!-- BEGIN displayed -->
   <tr id="p{postrow.displayed.U_POST_ID}">
      <td valign="top">
                     <div class="profil_posteur">
            <div class="pseudo_sujet">
                                  <a name="{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}"></a>
                                  {postrow.displayed.POSTER_NAME}
                             </div>
            <div class="rang_sujet">
                                  {postrow.displayed.POSTER_RANK}
                             </div>
            <div class="hover_profil">
                                     <div class="avatar_sujet">
                                       {postrow.displayed.POSTER_AVATAR}
                                     </div>
                                     <div class="infosprofil_sujet">
                  <!-- BEGIN profile_field -->
                                             <div class="label_sujet">
                    {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}
                                             </div>
                  <!-- END profile_field -->
                 {postrow.displayed.POSTER_RPG}
                                     </div>
            </div>
            <div class="rang_sujet">
              {postrow.displayed.RANK_IMAGE}
                             </div>
                     </div>
      </td>


Une fois cela fait, enregistrez et validez votre template.

Nous allons ensuite devoir ajouter le CSS qui va le rendre super stylé. Du coup, on va aller dans Affichage > Images et Couleurs > Couleurs > Feuille de style CSS
Code:
/* Profil du membre dans les sujets */
.profil_posteur{
  width:200px;
  background:#927d75;
  padding:8px 0;
  font-family:calibri; /* Police sur toute la zone du profil */
  box-sizing:border-box; /* Cette propriete permet d ajuster le padding en fonction de la taille du bloc */
}
/* La partie suivante centre a la fois le pseudo, le rang écrit et l image du rang */
.pseudo_sujet, .rang_sujet{
  text-align:center;
}
/* La partie suivante concerne uniquement le pseudo du membre */
.pseudo_sujet{
  font-size:16px;
}
/* La partie suivante concerne les div du rang */
.rang_sujet{
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
}
/* La partie suivante concerne uniquement l image du rang */
.rang_sujet img{
  max-width:100%;
}
/* La partie suivante concerne l'effet sur le profil */
.hover_profil{
  position:relative; /* Ne pas modifier cette partie */
  width:200px; /* A modifier en fonction de la taille de votre avatars */
  height:320px; /* A modifier en fonction de la taille de votre avatars */
  overflow:hidden;
  margin:8px 0;
}
.avatar_sujet{
  position:absolute;
  top:0;
  left:0;
  /* La propriete filter permet d appliquer un flou a l image */
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
  /* La valeur scale permet d agrandir la zone concernee */
  -webkit-transform:scale(1);
  transform:scale(1);
  /* La propriete transition permet d avoir un effet fluide */
  -webkit-transition:all 400ms;
  transition:all 400ms;
}
.hover_profil:hover .avatar_sujet{
  /* La propriete filter permet d appliquer un flou a l image */
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
  /* La valeur scale permet d agrandir la zone concernee */
  -webkit-transform:scale(2);
  transform:scale(2);
}
.infosprofil_sujet{
  position:absolute; /* Ne pas modifier cette partie */
  top:10px; /* Ne pas modifier cette partie */
  left:10px; /* Ne pas modifier cette partie */
  width:180px;
  height:300px;
  overflow:auto;
  padding:10px;
  background:rgba(0, 0, 0, 0.2); /* La derniere valeur permet de modifier l opacite de la couleur de fond */
  border:4px solid #f9fdf9;
  box-sizing:border-box; /* Cette propriete permet d ajuster le padding en fonction de la taille du bloc */
  opacity:0;
  /* La valeur scale permet d agrandir la zone concernee */
  -webkit-transform:scale(1.5);
  transform:scale(1.5);
  /* La propriete transition permet d avoir un effet fluide */
  -webkit-transition:all 400ms;
  transition:all 400ms;
}
.hover_profil:hover .infosprofil_sujet{
  opacity:1;
  /* La valeur scale permet d agrandir la zone concernee */
  -webkit-transform:scale(1);
  transform:scale(1);
}
.label_sujet{
  background:#f9fdf9;
  padding:3px;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:1px;
  margin:0 0 5px 0;
}
/* Ne pas modifier cette partie */
.label_sujet:last-child{
  margin:0 0 0 0;
}
/* empeche certaines infos du profil de depasser*/
.infosprofil_sujet img,
.infosprofil_sujet textarea {
  max-width: 100%;
  box-sizing: border-box;
}


Si jamais vous voulez une image dans vos profils, vous devez mettre le champ en tout premier et avec une image par défaut, sans quoi cela peut provoquer quelques problèmes avec le code actuel.

Voici aussi les champs à renseigner pour ne pas afficher le titre du label


Donc, si vous suivez ces indications, ajoutez ceci à votre CSS
Code:
/* Ne pas modifier cette partie */
.label_sujet:first-child{
  padding:0;
}
/* Ne pas modifier cette partie */
.label_sujet:first-child > img{
  width:100%; /* le pourcentage permet de redimensionner l image quelque soit sa taille et celle de la zone */
}


N'oubliez pas de l'enregistrer, et voilà vos nouveaux profils ! Very Happy

J'espère que ça vous plaît, et n'hésitez surtout pas à poster un petit "merci", ça fait toujours très plaisir :mouton:

Cheshire Cat

Profil simple aux bordures arrondies - Dim 19 Fév 2017 - 14:53



Bonjour à tous !
Aujourd'hui je vous propose un profil très simple et facilement modifiable ^-^

Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.

Rendu en image:


Optimisé pour tous les navigateurs - Version PHPBB2

Quelques infos:
- La taille est adaptée automatiquement
- Les couleurs et les polices sont modifiables et sont toutes indépendantes de la charte de couleur dans l'onglet Couleurs.
- L'image "Info du profil" est modifiable.

Installer votre nouveau profil:
Pour commencer l'installation de nos nouveau profil, nous allons devoir aller dans Panneau d'administration > Accueil > Affichage > Templates > Généralités > viewtopic_body et chercher cette partie, si votre template n'est pas encore modifiée
Code:
<!-- BEGIN displayed -->
 <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
 <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{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://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
 </td>


Vous supprimez et vous remplacez par ce qui suis
Code:
<!-- BEGIN displayed -->
 <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
 <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a></span>
                   <div class="SujetPseudo">{postrow.displayed.POSTER_NAME}</div>
                   <div class="SujetProfil">
 <div class="SujetRang">
                                   {postrow.displayed.POSTER_RANK}<br />
                                   {postrow.displayed.RANK_IMAGE}
                           </div>
                           <span class="SujetAvatar">
                           {postrow.displayed.POSTER_AVATAR}
                           </span>
                   </div>
                   <div class="SujetInfosProfil">
                           <div>
 <!-- BEGIN profile_field -->
                           <div class="SujetLabel">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}</div>
 <!-- END profile_field -->
 <div class="SujetFeuillePerso">{postrow.displayed.POSTER_RPG}</div>
                           </div>
                           <img src="http://img11.hostingpics.net/pics/480042Infoduprofil.png" alt="Infos fermées" class="ImageInfosClosed" />
                   </div>
 </td>


Une fois cela fait, enregistrez et validez votre template.

Nous allons ensuite devoir ajouter le CSS qui va le rendre super stylé. Du coup, on va aller dans Affichage > Images et Couleurs > Couleurs > Feuille de style CSS
Code:
/* Commande profil par Cheshire Cat */
/* Concerne le pseudo du membre */
.SujetPseudo{
  margin-bottom:-12px; /* fait descendre le pseudo en dessous de la bordure du profil */
  text-align:center;
  text-transform:uppercase;
  font-size:20px;
}
/* Empêche le pseudo d'être écrit en gras */
.SujetPseudo strong{
  font-weight:normal;
}
/* Concerne l'avatar et le rang */
.SujetProfil{
  margin:0 5px;
  width:230px;
  padding:15px;
  box-sizing:border-box;
  border-radius:15px;
  border:1px solid #d6d59c;
  background-color:#fafdf9;
}
/* Concerne le rang */
.SujetRang{
  margin:5px 0 15px;
  text-align:center;
  font-size:15px;
  color:#6e520f;
  letter-spacing:1px;
}
/* Concerne les informations du profil */
.SujetInfosProfil{
  width:135px;
  padding:0px 15px 0px 15px;
  margin-top:-1px;
  margin-left:34px;
  box-sizing-border-box;
  border-bottom-left-radius:15px;
  border-bottom-right-radius:15px;
  border:1px solid #d6d59c;
  background-color:#fafdf9;
  transition:all 800ms;
  font-size:11px;
}
/* Ajoute un padding supérieur au passage de la souris pour afficher les informations */
.SujetInfosProfil:hover{
  padding:15px 15px 0 15px;
}
/* Concerne la parite interne aux informations */
.SujetInfosProfil > div{
  height:0px;
  overflow:auto;
  transition:all 800ms; /* créé une transition progressive avant et après passage de la souris */
}
/* Affiche les informations au survol */
.SujetInfosProfil:hover > div{
  height:180px;
}
/* Concerne les champs du profil */
.SujetLabel{
  margin-bottom:5px;
  margin-right:5px;
  padding:3px;
  background-color:rgba(233, 236, 234, 0.7);
  border:1px solid #bcb7ba;
  color:#6e520f;
}
/* Supprime le margin-bottom pour le dernier champ du profil */
.SujetLabel:last-of-type{
  margin-bottom:0;
}
/* Concerne la feuille de personnage */
.SujetFeuillePerso{
  color:#6e520f;
}
/* Concerne le lien vers la feuille de personnage */
.SujetFeuillePerso a[href="/u1rpgsheet"]{
  text-align:center;
  letter-spacing:1px;
  display:block;
  margin:10px 0 5px;
  color:#6e520f;
  border-bottom:1px solid #6e520f;
}
/* Supprime les balises BR avant et après le lien vers la feuille de personnage */
.SujetFeuillePerso br:first-of-type,
.SujetFeuillePerso br:nth-of-type(2){
  display:none;
}
/* Concerne l'image en bas des informations du profil */
.ImageInfosClosed{
  margin-bottom:-1px;
  margin-left:-15px;
  opacity:0.6;
}

/* empeche certaines infos du profil de depasser*/
.SujetInfosProfil > div img,
.SujetInfosProfil > div textarea {
  max-width: 100%;
  box-sizing: border-box;
}


N'oubliez pas de l'enregistrer, et voilà vos nouveaux profils ! Very Happy

Un petit merci fait toujours plaisir, alors hésite pas ! :mouton:

Système de profil à 2 personnages qui change selon la catégorie - Mer 21 Déc 2016 - 22:12




Système de profil à 2 personnages qui change selon la catégorie


Salut !

Suite à la demande de 24nono38, j'ai conçu un code qui permet l'affichage de 2 personnages différent selon la catégorie où un message est posté.

Je m'explique :
Disons que vous avez un forum rpg avec section "monde des rêves" et "monde réel" et que vos joueurs incarnent un personnage différent selon le monde où ils sont. Vous voulez que le profil de vos joueurs affichent les données du personnage qu'ils jouent selon la catégorie où ils jouent.
Il vous suffira de créer des champs de profil où les joueurs mettront les informations du 2e personnage, soit les champs généraux comme âge, humeur, métier ainsi que des champs plus spéciaux comme rang, url de l'avatar, nom du 2e personnage.
Ensuite, le javascript s'occupera de faire apparaître les bons champs et les bonnes informations selon la catégorie où ils postent.
Utile, non?

Pour voir l'aperçu du premier profil : cliquez ici.
Pour voir l'aperçu du 2e profil : cliquez ici.

Ce LS est en quatre parties.
  • Tout d'abord, nous allons installer le profil dans le template.
  • Puis, nous allons mettre en forme le profil à l'aide du CSS.
  • Ensuite, nous allons créer les champs du 2e personnage dans le profil.
  • Enfin, nous allons installer et modifier le javascript qui fera fonctionner le tout.


- La version du forum est PhpBB2.

Mettre un crédit vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



1. Le profil (Template Viewtopic_Body)


Nous allons commencer par aller dans les templates, plus précisément dans le template "Viewtopic_Body" .

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > VIEWTOPIC_BODY

Vous devez trouver ce bout de code (lignes 61 à 67) :
Code:
      <td class="nav" valign="middle" width="100%">
         <span class="nav">
                <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                {NAV_CAT_DESC_SECOND}
            </span>
      </td>   


Et le remplacer par ceci :
Code:
      <td class="nav" valign="middle" width="100%">
         <span class="nav">
                <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                <span class="profil_navig">{NAV_CAT_DESC_SECOND}</span>
            </span>
      </td>   



Puis, vous devez trouver ceci (lignes 139 à 150) :
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}" style="position: relative; top: -30px; width: 1px;" id="{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://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>


Et le remplacer par ceci :
Code:
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
            <div class="postdetails poster-profile">
              <div class="profil_utilisateur">
                <div class="name">
                  <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
                  <div class="profil_pseudo">
                    <strong>{postrow.displayed.POSTER_NAME}</strong>
                  </div>
                </div>
                <div class="profil_avatar">{postrow.displayed.POSTER_AVATAR}</div>
                <div class="profil_rang">{postrow.displayed.POSTER_RANK}</div>
                <div class="profil_contact">
                  <!-- BEGIN contact_field -->
                  {postrow.displayed.contact_field.CONTENT}
                  <!-- END contact_field -->
                  {postrow.displayed.PROFILE_IMG}
                  {postrow.displayed.PM_IMG}
                  {postrow.displayed.EMAIL_IMG}
                  {postrow.displayed.ONLINE_IMG}
                </div>
                <div class="profil_infos">
                  <div class="profil_champs">
                    <!-- BEGIN profile_field -->
                    <span class="profil_champ">
                      {postrow.displayed.profile_field.LABEL} <span>{postrow.displayed.profile_field.CONTENT}</span>
                    </span>
                    <!-- END profile_field -->
                  </div>
                </div>
              </div>
        </div>
      </td>



Enfin, vous devez trouvez ceci (lignes 253 à 261) :
Code:
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="middle">
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
               </td>
            </tr>
         </table>
      </td>


Et le remplacer par cela :
Code:
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="middle">
               </td>
            </tr>
         </table>
      </td>




2. Mise en forme (CSS)


Si vous regardez votre profil, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons le mettre en forme à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:

/*Bloc profil*/
.profil_utilisateur {
  width: 200px;
  margin: auto;
  position: relative;
}

/*Pseudo*/
.profil_pseudo {
  border-bottom: 1px solid #635f5f;
  padding: 5px 2px 5px 2px;
  font-size: 20px;
  margin: auto;
  text-align: center;
}

/*Bloc avatar*/
.profil_avatar {
  margin: 5px auto;
  box-shadow: 0px 0px 5px #635f5f;
  width: 200px;
  height: 320px;
  background: #ffffff;
}
/*Image avatar*/
.profil_avatar img {
  width: 200px;
  height: 320px;
}

/*Rang*/
.profil_rang {
  border-bottom: 1px solid #635f5f;
  border-top: 1px solid #635f5f;
  padding: 3px;
  font-size: 20px;
  margin: 5px auto;
  text-align: center;
  color: #41506f;
  font-family: 'Verdana';
  font-size: 14px;
  font-style: italic;
}

/*Liens sous le rang*/
.profil_contact {
  text-align: center;
}

/*Bloc qui contient les infos*/
.profil_infos {
  margin: 10px auto 5px auto;
  width: 190px;
  padding: 5px;
  background: #ffffff;
  border-bottom: 1px solid #635f5f;
  border-top: 1px solid #635f5f;
}
.profil_champ {
  color: #6f6f6f;
  font-size: 11px;
  display: none;
}
.profil_champ .label {
  color: #000000!important;
}




3. Créer les champs du 2e personnage (profil)


Maintenant, il faut créer les champs qui vont correspondrent aux informations du 2e personnage.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > UTILISATEURS & GROUPES
> > > UTILISATEURS
> > > > PROFILS

Puis vous créez les champs. Je suppose que je n'ai pas besoin de vous expliquer comment faire? La seule chose que je vous conseille, c'est de les mettre en ordre. À l'exception du rang, de l'image de l'avatar et du pseudo du 2e personnage, les informations s'affichent dans l'ordre où vous les mettez.

Voilà mon résultat si cela peut vous aider :
Spoiler:




4. Faire fonctionner le système de double profil (Javascript)


Enfin, on passe au javascript.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Système de double profil".
On choisit le placement "Sur les sujets".

Enfin, on met le javascript suivant et on enregistre :
Code:
$(function(){
   
      /*Noms des champs du profil NORMAL*/
      var champnamenormal = [
        "Je suis né(e) le : ",
        "Age du personnage : ",
        "Coté coeur : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Dans l'animus je suis : ",
        "Métier : ",
        "Avatar : ",
        "Crédit kit : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation : ",
        "Emploi : ",
        "Humeur : ",
        "Let's rock : "
      ];
   
      /*Nom des champs du profil SPÉCIAL tels qu'ils sont créés*/
      var champnamespecial = [
        "Je suis né(e) le (2e perso) : ",
        "Age du personnage (2e perso) : ",
        "Coté coeur (2e perso) : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Hors de l'animus je suis (2e perso) : ",
        "Métier (2e perso) : ",
        "Avatar (2e perso) : ",
        "Crédit kit (2e perso) : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation (2e perso) : ",
        "Emploi : ",
        "Humeur (2e perso) : ",
        "Let's rock (2e perso) : "
      ];
   
      /*Nom des champs du profil SPÉCIAL tels qu'ils doivent apparaîtrent*/
      var champnamespecialvrai = [
        "Je suis né(e) le : ",
        "Age du personnage : ",
        "Coté coeur : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Hors de l'animus je suis : ",
        "Métier : ",
        "Avatar : ",
        "Crédit kit : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation : ",
        "Emploi : ",
        "Humeur : ",
        "Let's rock : "
      ];
   
      /*Variables*/
      var champs;
      var champ;
      var champnormal;
      var champspecial;
      var champtext;
      var nouvellevaleur;
      var principal;
      var pseudomachin;
      var cate = $('.profil_navig:first').find('a:first').attr('href');

      /*Catégorie où le profil spécial doit être affiché*/
      var catespecial = "URL DE LA CATÉGORIE SPÉCIALE";
   
      /*Nom du champ du l'image de l'avatar du profil spécial*/
      var avatar2 = "Image avatar (2e perso) : ";
   
      /*Nom du champ du Nom du personnage du profil spécial*/
      var pseudo2 = "Prénom et Nom (2e perso) : ";
   
      /*Nom du champ du rang du personnage du profil spécial*/
      var rang2 = "Rang (2e perso) : ";
   
   
      /*Code à ne pas toucher qui affiche les bonnes données dans le profil SPÉCIAL*/
      if (cate == catespecial) {
        $('.profil_utilisateur').each(function(){
          principal = $(this);
          champs = principal.find('.profil_champ');
          for (y = 0; y < champs.length; y++) {
            champ = champs.eq(y);
            if (champ.find('span.label:first').text() == avatar2) {
              nouvellevaleur = champ.find('img:first').attr('src');
              if (principal.find('.profil_avatar').find('img:first').length > 0) {
                principal.find('.profil_avatar').find('img:first').attr('src', nouvellevaleur);
              }
              else {
                pseudomachin = principal.find('.profil_pseudo a:first').attr('href');
                principal.find('.profil_avatar').append('<a href="' + pseudomachin + '"><img src="' + nouvellevaleur + '" /></a>');
              }
            }
            else if (champ.find('span.label:first').text() == pseudo2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              if ($(this).find('.profil_pseudo:first').find('a strong:first').length > 0) {
                $(this).find('.profil_pseudo:first').find('a strong:first').text(nouvellevaleur);
              }
              else {
                $(this).find('.profil_pseudo:first').find('a:first').text(nouvellevaleur);
              }
            }
            else if (champ.find('span.label:first').text() == rang2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              $(this).find('.profil_rang:first').text(nouvellevaleur);
            }
            else {
              for (z = 0; z < champnamespecial.length; z++) {
                champspecial = champnamespecial[z];
                if (champ.find('span.label:first').text() == champspecial) {
                  champ.css('display', 'block');
                  champtext = champnamespecialvrai[z];
                  champ.find('span.label:first').text(champtext);
                }
              }
            }
          }
        });
      }
   
      /*Code à ne pas toucher qui affiche les bonnes données dans le profil NORMAL*/
      else {
        $('.profil_utilisateur').each(function(){
          champs = $(this).find('.profil_champ');
          for (y = 0; y < champs.length; y++) {
            champ = champs.eq(y);
            for (z = 1; z < champnamenormal.length; z++) {
              champnormal = champnamenormal[z];
              if (champ.find('span.label:first').text() == champnormal) {
                champ.css('display', 'block');
              }
            }
          }
        });
      }
    });


Il y a 4 choses à modifier dans ce javascript.

La première section correspond aux champs du profil normal qui apparaît dans presque toutes les catégories. Il s'agit de cette section :
Code:
      /*Noms des champs du profil NORMAL*/
      var champnamenormal = [
        "Je suis né(e) le : ",
        "Age du personnage : ",
        "Coté coeur : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Dans l'animus je suis : ",
        "Métier : ",
        "Avatar : ",
        "Crédit kit : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation : ",
        "Emploi : ",
        "Humeur : ",
        "Let's rock : "
      ];



Même chose pour la section /*Nom des champs du profil SPÉCIAL tels qu'ils sont créés*/ qui contient les champs du profil spécial tels que vous les avez créés dans le profil.


La section /*Nom des champs du profil SPÉCIAL tels qu'ils doivent apparaîtrent*/ contient les noms des champs du profil spécial tels que vous voulez qu'ils apparaîssent dans le profil. Les champs doivent être dans le même ordre que la section précédente.


Enfin, vous devez remplacer le URL DE LA CATÉGORIE SPÉCIALE de ce bout de code par l'url de votre propre catégorie.
Code:
      /*Catégorie où le profil spécial doit être affiché*/
      var catespecial = "URL DE LA CATÉGORIE SPÉCIALE";


Pour cela, allez sur la catégorie où le profil spécial doit s'afficher et regarder l'url de la page. Cela vous donnera quelque chose comme "http://www.never-utopia.com/c31-les-ateliers". Vous gardez seulement le / et ce qu'il y après, comme "/c31-les-ateliers" et c'est ce que vous utilisez pour remplacer le URL DE LA CATÉGORIE SPÉCIALE.




Si jamais vous voulez que le profil spécial s'affiche dans plus qu'une catégorie spécifique, vous ajoutez ce bout de code pour chaque forum/catégorie supplémentaire juste avant le "/*Code à ne pas toucher qui affiche les bonnes données dans le profil NORMAL*/" :
Code:
/*Code à ne pas toucher qui affiche les bonnes données dans le profil SPÉCIAL*/
      else if (cate == "URL DE CATÉGORIE") {
        $('.profil_utilisateur').each(function(){
          principal = $(this);
          champs = principal.find('.profil_champ');
          for (y = 0; y < champs.length; y++) {
            champ = champs.eq(y);
            if (champ.find('span.label:first').text() == avatar2) {
              nouvellevaleur = champ.find('img:first').attr('src');
              if (principal.find('.profil_avatar').find('img:first').length > 0) {
                principal.find('.profil_avatar').find('img:first').attr('src', nouvellevaleur);
              }
              else {
                pseudomachin = principal.find('.profil_pseudo a:first').attr('href');
                principal.find('.profil_avatar').append('<a href="' + pseudomachin + '"><img src="' + nouvellevaleur + '" /></a>');
              }
            }
            else if (champ.find('span.label:first').text() == pseudo2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              if ($(this).find('.profil_pseudo:first').find('a strong:first').length > 0) {
                $(this).find('.profil_pseudo:first').find('a strong:first').text(nouvellevaleur);
              }
              else {
                $(this).find('.profil_pseudo:first').find('a:first').text(nouvellevaleur);
              }
            }
            else if (champ.find('span.label:first').text() == rang2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              $(this).find('.profil_rang:first').text(nouvellevaleur);
            }
            else {
              for (z = 0; z < champnamespecial.length; z++) {
                champspecial = champnamespecial[z];
                if (champ.find('span.label:first').text() == champspecial) {
                  champ.css('display', 'block');
                  champtext = champnamespecialvrai[z];
                  champ.find('span.label:first').text(champtext);
                }
              }
            }
          }
        });
      }


Il vous suffira de modifier le "URL DE CATÉGORIE" par l'url de la catégorie où vous voulez que le profil spécial s'affiche.




C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

À plus !

Profil simple avec hover et feuille de rpg cachée - Mer 10 Aoû 2016 - 16:44



Bonjour, je viens vous proposer un profil à la bordure dorée, avec les informations qui apparaissent à la survol de l'avatar, comme ceci :

► Simple
► Au survol

De plus, la feuille de rpg est cachée et s'affiche/se referme quand vous cliquez sur "Ouvrir".

L'arrière plan sombre est celui de mon forum. L'avatar est en 200x400. Cela a été créé pour phpBB2.

Il suffit de se rendre dans le template viewtopic_body et de remplacer ceci :
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}" style="position: relative; top: -30px; width: 1px;" id="{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://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>


Par ceci :
Code:
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
   <div class="namePOST"><a name="{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></div><div class="imgrankPOST">{postrow.displayed.RANK_IMAGE}</div><div class="avaPOST"><div>{postrow.displayed.POSTER_RANK}<br/><br/><!-- BEGIN profile_field --><font style="color:white;">{postrow.displayed.profile_field.LABEL}</font> {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}<!-- END profile_field --></div><p>{postrow.displayed.POSTER_AVATAR}</p></div><div onClick="a=this.nextSibling.style;a.display=(a.display==''?'none':'')" class="openPOST">Ouvrir</div><div class="rpgPOST" style="display:none;">{postrow.displayed.POSTER_RPG}</div>
 </td>


Et le CSS :
Code:
/*****************PROFIL*****************/
/* PSEUDONYME SUJET */
.namePOST {
  font-family: 'Eagle Lake'; /**modifiable**/
  text-decoration:none;
  text-shadow: 0px 1px lightgrey;
text-transform:uppercase; text-align:center;
}
.namePOST a {
  text-decoration:none;}
/* AVATAR SUJET */
.avaPOST {
position:relative; z-index:5; width:200px; height:400px; overflow:hidden; border-radius:10px;
  border:2px groove DarkGoldenRod; /* MODIFIABLE */
}
.avaPOST p {
position:relative; z-index:3; margin:0;
}
.avaPOST:hover p{
z-index:-1; opacity:0;
}
/* INFORMATIONS JOUEUR SUJET */
.avaPOST div{
position:absolute;
width:190px; height:390px; padding:5px; overflow:auto;
background:rgba(0,0,0,0.5); color:white; /* MODIFIABLE */
font-size:11px; text-align:center;
}
/* IMAGE RANG SUJET */
.imgrankPOST {margin-top:-5px;
}
.imgrankPOST img{
max-height:400px;
}
/* OUVRIR FEUILLE DE PERSONNAGE SUJET */
.openPOST {
position:relative; z-index:10; margin:auto; margin-top:-15px;
cursor:pointer; width:175px; height:25px; color:rgba(0,0,0,0);
background:url(http://image.noelshack.com/fichiers/2016/31/1470580990-sans-titre-2.png);  /* IMAGE 175*25 */
}
/* FEUILLE DE PERSONNAGE SUJET */
.rpgPOST {
margin-top:-10px;
padding:08px 10px 10px; border-radius:0 0 15px 15px;
background:#191919; /* MODIFIABLE */
font-size:11px;
}

Onyx

Changement automatique du rang selon le groupe - Lun 18 Avr 2016 - 2:12




Changement automatique du rang selon le groupe


Salut !

Pour certains administrateurs, il y a beaucoup de changements de groupes et de rangs. Déjà que changer le groupe de 15 personnes par jour prend du temps, devoir en plus changer leur rang à chaque fois ne rend pas les choses très faciles.

Du coup, j'ai créé une petite astuce pour tricher et lier les rangs au groupe de la personne à la demande de Darkius.

Plus précisément, cette astuce remplace le rang et l'image de rang par un "faux titre de rang" et une "fausse image de rang" et un javascript va "regarder la couleur du pseudo de la personne", trouvera le rang et l'image de rang associés à ce groupe (à cette couleur) et le mettra dans l'espace du "faux titre de rang" et de la "fausse image de rang".

Attention :
- Si une personne fait partie de plusieurs groupes, le groupe qui apparaîtra sera celui dont elle a la couleur, pas les autres.
- Cela agit seulement dans les messages, pas pour le rang dans les profils. Je recommande de tout simplement supprimer les rangs pour qu'ils ne s'affichent nul part. Comme ça, les seuls rangs qui s'afficheront seront les faux.


Ce LS est en trois parties.
  • Tout d'abord, nous allons créer l'espace pour les faux rangs dans le template des messages.
  • Puis, nous allons ajouter le javascript qui permet de faire fonctionner cette astuce.
  • Enfin, nous allons voir comment mettre vos propres rangs et groupes dans le javascript.


- La version du forum est PhpBB2.
- Il est possible (mais pas toujours) que l'astuce ne fonctionne pas si votre template a déjà été modifié. Si c'est le cas, vous pouvez aller dans "personnalisations" ou "problème avec mon code" pour recevoir de l'aide
Mettre un crédit vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



1. Ajouter l'espace des "faux rangs" (Template Viewtopic_Body)


Nous allons commencer par aller dans les templates, plus précisément dans le template "viewtopic_body".

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > VIEWTOPIC_BODY

Puis, on chercher cette variable :
Code:
{postrow.displayed.POSTER_RANK}


Qu'on va remplacer par ceci :
Code:
<span class="rangtitre"></span>



Et on va trouver cette variable :
Code:
{postrow.displayed.RANK_IMAGE}


Qu'on va remplacer par ceci :
Code:
<span class="rangimg"></span>




2. Ajouter le javascript


Maintenant que les rangs normaux ont été remplacés par les faux rangs, on va aller ajouter le javascript.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Système de faux rangs".
On choisit le placement "Sur les sujets" (c'est super important).

Enfin, on met le javascript suivant et on enregistre :
Code:
$(function () {
  var groupcouleur = [
  "rgb(144, 55, 199)",
  "rgb(162, 176, 102)",
  "rgb(133, 199, 194)",
  "rgb(67, 145, 181)",
  "rgb(10, 163, 97)",
  ];

  var group1 = [
  "Élèves",
  "Professeurs",
  "Personnel",
  "Habitants",
  "PNJ",
  ];

  var group2 = [
  "http://img11.hostingpics.net/pics/215624jaime.png",
  "http://illiweb.com/fa/subsilver/icon_pm.gif",
  "http://illiweb.com/fa/subsilver/icon_email.gif",
  "http://illiweb.com/fa/subsilver/icon_www.gif",
  "http://illiweb.com/fa/subsilver/icon_online_fr.gif",
  ];

  var nbgroup = groupcouleur.length;
  $('tr.post > td span.name > strong > a > span > strong').each(function () {
    var rang1 = $(this).closest('tr.post').find('td:first').find('.rangtitre');
    var rang2 = $(this).closest('tr.post').find('td:first').find('.rangimg');
    var uncolor = $(this).css('color');
    for (i=0; i < nbgroup; i++) {
      if (uncolor == groupcouleur[i]) {
        $(rang1).html(group1[i]);
        $(rang1).css('color', groupcouleur[i]);
        $(rang2).html('<img src="'+group2[i]+'" alt="Image à remplacer" />');
      }
    }
  });
});




3. Adapter le javascript à vos propres groupes et rangs


Voici le fonctionnement du javascript :
Il va aller "regarder la couleur du pseudo". Ensuite, il consulte une liste des couleurs des groupes (que vous allez devoir mettre vous-même) pour savoir le groupe auquel la couleur du nom correspond. Puis, il regarde la liste de rang (que vous devrez faire vous-même) et il ajoute le titre du rang et l'image du rang qui correspond au groupe.

On va décortiquer le javascript pour savoir où on doit modifier quoi Wink





Partie des couleurs des groupes qui ont des rangs

Si on décortique le javascript, la première partie, "groupcouleur", comporte la couleur de chacun des groupes en mode "rgb":
Code:
$(function () {
  var groupcouleur = [
  "rgb(144, 55, 199)", /*Couleur du 1er groupe*/
  "rgb(162, 176, 102)", /*Couleur du 2e groupe*/
  "rgb(133, 199, 194)", /*Couleur du 3e groupe*/
  "rgb(67, 145, 181)", /*Couleur du 4e groupe*/
  "rgb(10, 163, 97)", /*Couleur du 5e groupe*/
  ];


Vous devez aller dans chacun de vos groupes et copier/coller exactement la couleur qui appartient à chaque groupe. Vous verrez que la couleur est en mode "hex", soit quelque chose comme "#AD8H46". Or, le javascript utilise uniquement les codes en mode "rgb", tel que "rgb(173, 8, 70)", ce qui donne la même couleur.

Pour transférer vos codes de couleur "hex" en codes de couleur "rgb", vous pouvez utiliser ce site : http://www.javascripter.net/faq/hextorgb.htm . Bref, une fois que vous avez la couleur en "rgb", vous la mettez dans la partie "groupcouleur" pour chacun de vos groupes.





Partie des "faux titres de rang"

Ensuite, la deuxième partie, "group1", sert à mettre le titre de chacun des rangs : :
Code:
 var group1 = [
  "Élèves", /*Titre du 1er groupe*/
  "Professeurs", /*Titre du 2e groupe*/
  "Personnel", /*Titre du 3e groupe*/
  "Habitants", /*Titre du 4e groupe*/
  "PNJ", /*Titre du 5e groupe*/
  ];


À noter que le premier rang doit correspondre à la couleur du premier groupe que vous avez mis dans la section précédente et ainsi de suite.

D'ailleurs, si vous voulez personnaliser chacun des rangs, vous pouvez facilement mettre quelque chose comme :
Code:
 var group1 = [
  "<span style='color: red;'>Élèves</span>",
  "<span style='color: blue;'>Professeurs</span>",
  "<span style='color: orange;'>Personnel</span>",
  "<span style='color: purple;'>Habitants</span>",
  "<span style='color: green;'>PNJ</span>",
  ];


Ou encore :
Code:
 var group1 = [
  "<span class='nom_de_class1'>Élèves</span>",
  "<span class='nom_de_class2'>Professeurs</span>",
  "<span class='nom_de_class3'>Personnel</span>",
  "<span class='nom_de_class4'>Habitants</span>",
  "<span class='nom_de_class5'>PNJ</span>",
  ];






Partie des "fausses images de rang"

La troisième partie, "group2", sert à mettre l'url des images de rang pour chacun des groupes :
Code:
 var group2 = [
  "http://img11.hostingpics.net/pics/215624jaime.png", /*Image du 1er groupe*/
  "http://illiweb.com/fa/subsilver/icon_pm.gif", /*Image du 2e groupe*/
  "http://illiweb.com/fa/subsilver/icon_email.gif", /*Image du 3e groupe*/
  "http://illiweb.com/fa/subsilver/icon_www.gif", /*Image du 4e groupe*/
  "http://illiweb.com/fa/subsilver/icon_online_fr.gif", /*Image du 5e groupe*/
  ];


À noter que la première url d'image doit correspondre au premier titre du rang de la section précédente et à la couleur du premier groupe que tu as mis dans la section d'avant et ainsi de suite.





La partie où le javascript fait actuellement quelque chose

La dernière partie du javascript, soit le reste, sert à repérer la couleur du nom de l'utilisateur, de la comparer avec le groupcouleur et d'appliquer le titre de rang et l'image de rang qui correspond :
Code:
 /*On calcule le nombre de couleurs au total*/
  var nbgroup = groupcouleur.length;

  /*On va chercher chaque nom pour chaque message posté pour appliquer le reste du javascript. On répète le processus à chaque fois qu'on trouve un nom*/
  $('tr.post > td span.name > strong > a > span > strong').each(function ()

    /*On sélectionne le l'espance du "faux titre de rang" dans le template*/
    var rang1 = $(this).closest('tr.post').find('td:first').find('.rangtitre');

    /*On sélectionne l'espace de "fausse image de rang" dans le template*/
    var rang2 = $(this).closest('tr.post').find('td:first').find('.rangimg');

    /*On prend la couleur du pseudo*/
    var uncolor = $(this).css('color');

    /*On va aller comparer la couleur de pseudo à chaque couleur de groupe*/
    for (i=0; i < nbgroup; i++) {

      /*Si la couleur du pseudo = la couleur du groupe, on va faire les modifications*/
      if (uncolor == groupcouleur[i]) {

        /*On ajoute le titre de rang qui correspond à la couleur du groupe dans l'espace du "faux titre de rang"*/
        $(rang1).html(group1[i]);

        /*On donne la même couleur au titre de rang que la couleur du groupe*/
        $(rang1).css('color', groupcouleur[i]);

        /*On ajoute l'image de rang qui correspond à la couleur du groupe dans l'espace de la "fausse image de rang"*/
        $(rang2).html('<img src="'+group2[i]+'" alt="Image à remplacer" />');
      }
    }
  });
});


Ce bout n'a absolument pas à être modifié pour fonctionner. Sérieux, pas touche, à moins d'être sûr de savoir ce que vous faites, ok?





Personnaliser le titre de rang et l'image de rang

On a déjà vu précédemment qu'on pouvait entourer d'un span avec une classe différente chaque titre de rang, donc vous pouvez vous servir de ces classes pour personnaliser chaque rang.

Pour personnaliser tous les titres de rang à la fois, vous pouvez mettre ceci dans votre CSS :
Code:
/*Titres des rangs*/
.rangtitre {
  propriété: valeur;
}


Pour personnaliser tous les images de rang à la fois, vous pouvez mettre ceci dans votre CSS :
Code:
/*Images des rangs*/
.rangimg img {
  propriété: valeur;
}


Quant à personnaliser les images de rang individuellement, vous pouvez mettre ceci dans votre CSS et remplacer le URL par le lien de l'image de rang à modifier :
Code:
.rangimg img[src="URL"] {
  propriété: valeur;
}






Partie des rangs dans le reste du forum

À ma connaissance, les rangs apparaîssent à un seul autre endroit dans le forum, soit le profil.

Le hic, c'est que puisque le profil (à moins que vous ayez la version simplifié du profil) ne peut pas être modifié entièrement dans un template, on peut difficilement remplacer le rang par le faux rang.

Donc, si la personne change de groupe, le rang se changera automatiquement dans les messages (grace aux "faux rang"), mais restera pareil dans le profil. Alors si quelqu'un va voir, il sera genre "WTF?". Pas trop joyeux ><

Ce que je vous conseille, une fois que vous avez installé le javascript comme il faut et vérifié qu'il fonctionne bien, c'est d'aller carrément supprimer les rangs qui ne sont plus nécessaire (dans le panneau d'administrateur, dans les utilisateurs, dans les rangs, vous les supprimez tous).

Comme ça, les rangs ne seront simplement pas affichés sur le profil (ce qui n'est vraiment pas un drame, on s'entend) et ne contraseront donc plus avec le faux rang des messages. Perfect!





C'est tout! Si jamais vous avez des problèmes avec cette astuce, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez modifier le fonctionnement de l'astuce et que vous avez besoin d'aide.

À plus !

Cheshire Cat

Affichage des messages sobre - Mar 29 Mar 2016 - 17:52



Bonjour à tous !  :bwaha:
Aujourd'hui, on est là pour dur lourd, car je vous propose un affichage complet de vos messages ! Si c'est pas beau tout ça ? :star:
Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.

Rendu en image:



Optimisé pour tous les navigateurs - Version PHPBB2

Pour commencer à installer ce nouvel affichage pour vos sujets, nous allons faire cette manœuvre
Panneau d'administration > Affichage > Templates > Général > viewtopic_body
Maintenant on va remplacer le template de base par celui qui va suivre.
Code:
<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){

    if(typeof(_atc) == "undefined") {
        _atc = { };
    }
   
    _atc.cwait = 0;
    $('.addthis_button').mouseup(function(){
        if ($('#at15s').css('display') == 'block') {
            addthis_close();
        }
    });
});

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
       
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
         {
            if( $(this).is(":visible") )
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            }
            else
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
         });
        }
    }
    catch(e) { }
   
   return false;
};

//]]>
</script>

<link href='https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web|Yanone+Kaffeesatz|Roboto' rel='stylesheet' type='text/css' />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="left" valign="middle">
         <span class="nav">
         <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
         <!-- END switch_user_authpost -->
         <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
         <!-- END switch_user_authreply -->
         </span>
      </td>   
          </tr>
          <tr>
      <td class="nav" valign="middle" width="100%">
      </td>
   </tr>
</table>

<table class="affichagesujet" width="100%" border="0" cellspacing="0" cellpadding="0" >
   <tr>
             <td colspan="3">
                     <h1 class="sujettitre">
                          {TOPIC_TITLE}<br />
           <span class="nav" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                      <a class="nav" href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a>
                      <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}" itemprop="url"><span itemprop="title">{L_ALBUM}</span></a>-->
                      {NAV_CAT_DESC_SECOND}
                    </span>
                     </h1>
      </td>
   </tr>
   <!-- BEGIN topicpagination -->
   <tr>
             <td colspan="2" align="right" valign="top">
                     <div class="paginationsujet">{PAGINATION}</div>
             </td>
   </tr>
   <!-- END topicpagination -->
   {POLL_DISPLAY}
   <!-- BEGIN postrow -->
   <!-- BEGIN hidden -->
   <tr>
      <td class="postdetails" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
   </tr>
   <!-- END hidden -->
   <!-- BEGIN displayed -->
   <tr class="post--{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}">
          <td valign="top">
            <div class="profilmodif">
              <h1 class="pseudo">{postrow.displayed.POSTER_NAME}</h1>
              <div class="profavatar">
                <div class="infos">
                    <!-- BEGIN profile_field -->
                    {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}
                    <!-- END profile_field -->
                    {postrow.displayed.POSTER_RPG}
                </div>
                <div class="profil_avatar">{postrow.displayed.POSTER_AVATAR}</div>
              </div>
              <div class="rang">
                {postrow.displayed.POSTER_RANK}<br />
                {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
                <!-- BEGIN contact_field -->{postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
              </div>
            </div>
            </td>
                <td valign="top" colspan="2">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr class="heureedit">
                                     <td class="heureedit">
                                          <div class="on">{postrow.displayed.ONLINE_IMG}</div>
                                          <div class="heure">{postrow.displayed.POST_DATE}</div>
                                     </td>
            </tr>
            <tr>
               <td colspan="2">
                  <!-- BEGIN switch_vote_active -->
                  <div class="vote gensmall">
                     <!-- BEGIN switch_vote -->
                     <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                     <!-- END switch_vote -->

                     <!-- BEGIN switch_bar -->
                     <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                        <!-- BEGIN switch_vote_plus -->
                        <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                        <!-- END switch_vote_plus -->

                        <!-- BEGIN switch_vote_minus -->
                        <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                        <!-- END switch_vote_minus -->
                     </div>
                     <!-- END switch_bar -->

                     <!-- BEGIN switch_no_bar -->
                     <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                     <!-- END switch_no_bar -->

                     <!-- BEGIN switch_vote -->
                     <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                     <!-- END switch_vote -->
                  </div>
                  <!-- END switch_vote_active -->

                  <div class="affichmess">
                                                  <div class="imagesedit">{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}</div>
                    <div>{postrow.displayed.MESSAGE}</div>

                     <!-- BEGIN switch_attachments -->
                     <dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd>
                           <!-- BEGIN switch_post_attachments -->
                           <dl class="file">
                              <dt>
                                 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

                                 <!-- BEGIN switch_dl_att -->
                                 <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_dl_att -->

                                 <!-- BEGIN switch_no_dl_att -->
                                 {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_no_dl_att -->
                              </dt>

                              <!-- BEGIN switch_no_comment -->
                              <dd>
                                 <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                              </dd>
                              <!-- END switch_no_comment -->

                              <!-- BEGIN switch_no_dl_att -->
                              <dd>
                                 <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                              </dd>
                              <!-- END switch_no_dl_att -->

                              <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                           </dl>
                           <!-- END switch_post_attachments -->
                        </dd>
                     </dl>
                     <!-- END switch_attachments -->

                  </div>
                                  </td>
                          </tr>
                  </table>
          </td>
        </tr>
        <!-- BEGIN switch_signature -->
     <tr>
          <td colspan="3">
            <div class="signmss">
              {postrow.displayed.SIGNATURE}
            </div>
          </td>
     </tr>
        <!-- END switch_signature -->
   <!-- BEGIN first_post_br -->
</table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <!-- END first_post_br -->
   <!-- END displayed -->
   <!-- END postrow -->
   <!-- BEGIN no_post -->
   <tr align="center">
      <td colspan="3" height="28">
         <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
   </tr>
   <!-- END no_post -->
</table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td class="paginationsujet" valign="top" {COLSPAN_PAGINATION}>{PAGE_NUMBER}</td>
      <!-- BEGIN topicpagination -->
      <td class="paginationsujet" align="right" valign="top" >{PAGINATION}</td>
      <!-- END topicpagination -->
   </tr>
   <!-- BEGIN switch_user_logged_in -->
   <!-- BEGIN watchtopic -->
   <tr>
      <td class="paginationsujet" colspan="2" align="right" valign="top">{S_WATCH_TOPIC}</td>
   </tr>
   <!-- END watchtopic -->
   <!-- END switch_user_logged_in -->
</table>

<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td colspan="2" align="center">
         <!-- BEGIN switch_user_logged_in -->
         <a name="quickreply"></a>
         {QUICK_REPLY_FORM}<br />
         <!-- END switch_user_logged_in -->
      </td>
   </tr>
   <tr>
      <td style="margin:0; padding: 0;" colspan="2">
         <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
            <tbody>
      <!-- BEGIN show_permissions -->
      <tr>
         <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
         <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
      </tr>
      <!-- END show_permissions -->
   </tbody>
         </table>
      </td>
   </tr>
</table>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
         <span class="nav">
            <!-- BEGIN switch_user_authpost -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authreply -->
         </span>
      </td>

      <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>

      <!-- BEGIN moderation_panel -->
      <td align="center">
         <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
      </td>
      <!-- END moderation_panel -->
   </tr>
</table>
</form>

<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
         <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
            <input type="hidden" name="t" value="{TOPIC_ID}" />

            <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
            <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

            <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
         </form>
      </td>
   </tr>
</table>
<!-- END viewtopic_bottom -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>


Ensuite, nous allons ajouter le CSS pour donner forme à notre code.
Code:
/*Affichage des sujets par Cheshire Cat*/
/*Message du posteur*/
.affichagesujet{
  margin:10px 0;
  background-color:#BAC49C;
}
.sujettitre{
  margin:0 0 10px;
  padding:5px;
  background-color:#E2DFED;
  color:#8665AB;
  font-family: 'Amaranth', sans-serif;
  font-size:24px;
  text-transform:uppercase;
  text-align:center;
  font-weight:normal;
  letter-spacing:2px;
}
.sujettitre .nav{
  font-size:0;
}
.sujettitre .nav a{
  color:#8665AB!important;
  font-size:12px;
  font-weight:normal;
}
.sujettitre .nav a:not(:last-of-type):after{
  content:"-";
  margin:0 2px;
}
.paginationsujet{
  font-size:12px;
  padding:0 10px;
  color:#504254;
}
.paginationsujet a{
  color:#504254!important;
}
.paginationsujet img{
  height:10px;
  opacity:0.8;
}
.heureedit{
  height:20px;
  padding:10px 10px 0 0;
}
.on{
  float:left;
}
.heure{
  float:right;
  font-family: 'Titillium Web', sans-serif;
  font-size:12px;
  font-weight:bold;
  color:#794F82;
  text-transform:uppercase;
}
.imagesedit{
  text-align:right;
}
.imagesedit img{
  height:20px;
  opacity:0.8;
  margin:0 3px;
}
.affichmess{
  width:480px;
  min-height:357px;
  margin:10px;
  padding:10px;
  background-color:#929a79;
  font-size:12px;
  color:#504254;
  text-align:justify;
  font-family:Roboto;
  line-height:18px;
}
.signmss{
  min-height:100px;
  max-height:200px;
  margin:0 10px 10px;
  padding:10px;
  color:#504254;
  background-color:#E2DFED;
  overflow:auto;
  font-size:12px;
  font-family: 'Roboto', sans-serif;
}
.signmss br:first-of-type,
.signmss br:nth-of-type(2){
  display:none;
}
/*Profil du posteur*/
.profilmodif{
  z-index:1;
  width:200px;
  background-color:#E2DFED;
  margin:0 0 10px 10px;
}
.pseudo{
  margin:0;
  padding:7px 0 5px;
  text-align:center;
  font-family:Yanone Kaffeesatz;
  font-size:23px;
}
.pseudo strong{
  font-weight:normal;
}
.pseudo a{
  text-decoration:none !important;
}
.pseudo a:hover{
  text-decoration:none !important;
}
.profavatar{
  position:relative;
  width:200px;
  height:320px;
  overflow:hidden;
}
.profil_avatar img{
  position:absolute;
  top:-15px;
  left:0px;
  height:320px;
  width:200px;
  margin-top:15px;
  transition: all 600ms;
}
.profavatar:hover .profil_avatar img {
  -webkit-transform:translatex(-200px);
  transform:translatex(-200px);
}
.infos{
  position:absolute;
  top:0px;
  left:0px;
  width:190px;
  height:310px;
  overflow:auto;
  padding:5px;
  text-align:left;
  letter-spacing:0px;
  color:#504254;
  font-size:12px;
  font-family: 'Roboto', sans-serif;
  background-color:#f4ecea;
}
.rang{
  overflow:hidden;
  color:#504254;
  text-align:center;
  font-size:20px;
  letter-spacing:-2px;
  font-family: 'Titillium Web', sans-serif;
}
.rang img{
  height:20px;
  opacity:0.8;
  margin:0 2px;
}

/* empeche certaines infos du profil de depasser*/
.profavatar .infos img,
.profavatar .infos textarea {
  max-width: 100%;
  box-sizing: border-box;
}


N'oubliez pas de bien valider vos templates et votre CSS, et tout est bon ! Very Happy

Elocha

Message RP multi perso - Lun 21 Déc 2015 - 15:09



Bonjour,

Je me lance dans l'univers incroyable du codage, et vous propose à la suite ma première réalisation personnelle. Il s'agit d'un code qui va faire apparaitre sur le forum, en plus du message RP à proprement parlé, un profil qui n'est pas le votre, par dessus votre profil de compte. J'utilise ça pour jouer des PNJ sur un forum où je suis animatrice. J'ai bidouillé ça sur une idée de Okhmhaka [ICI] qui a changé ma vie de MJ \o/ (maitre du jeu). Du coup, j'ai préparé autant de "code" que de PNJ, chacun le sien, et je n'ai plus qu'à insérer le texte du RP.
 
Je le propose ici parce que je mélange encore un peu le BBcode et le HTML et qu'avant de le mettre en LS je me dis qu'il faut le nettoyer un peu.


A quoi ça ressembleuuu ?
Voilà l'aperçu : Ce qu'on fait est qu'on crée une mise en page qui va aller "par-dessus" la colone du profil et qui va aller le cacher avec votre faux profil. Du coup, dépendement de la largeur/hauteur de votre propre profil, vous devrez sans doute modifier un peu le code pour qu'il corresponde à votre forum.


Il faut poster à la suite pour le voir ^^. Merci de garder le "copyright" au moins pour le forum ici.

Le Code


Pour un profil à gauche
Code:
<table style="position: relative; z-index: 15; margin-left:-210px; margin-top:-37px; width:770px"><tr><td style="vertical-align: top; height: 400px;"><img style="border:4px solid #BB9600;" src="http://i66.tinypic.com/14iz7te.png"/></td><td rowspan="2"; valign="top"><div style="border-right:4px solid #BB9600; padding: 10px; height:800px; overflow: scroll"><span style="font-family: Time New Roman; font-size:34px; letter-spacing: -3px;font-variant: small-caps; text-shadow: 3px 3px 3px grey; color: #BB9600;">Titre du Rp.</span><br/>
<p style="text-align: justify;">
TEXTE DU RP TEXTE DU RP TEXTE DU RP TEXTE DU RP
</p>
</div></td></tr><tr><td style="vertical-align: top; width: 200px; height: 400px; color: #BB9600;">
<span style="font-size:200%">Prénom<br/>NOM</span><br/><span style="font-size:100%">
<p align="justify">âge, civilités etc<br/>taille ~poids<br/><br/><br/>
Petite bio jolie pour ceux qui aime ça, ou bien compétences et statistiques quand vous en avez. Il y a largement la place de mettre du texte comme vous voulez.<br/><br/></p></span>
</td></tr></table>
<p style="text-align:right";><strong>Réponse attendue pour le XX-XX-XX au plus tard</strong></p>
<div style="texte-align:center; color:#cccccc; font-size:75%;">Code par Elocha sur <a href="url=http://www.never-utopia.com/">Nerver-Utopia</a></div>


Pour un profil à droite :
Code:
<table style="margin-right:-210px; margin-top:-40px; width:800px"><tr><td rowspan="2"; valign="top"><div style="border-right:4px solid #BB9600; padding: 10px; height:800px; overflow: scroll"><span style="font-family: Time New Roman; font-size:34px; letter-spacing: -3px;font-variant: small-caps; text-shadow: 3px 3px 3px grey; color: #BB9600;">Titre du Rp.</span><br/>
  <p style="text-align: justify;">
TEXT Du RPTEXT Du RP TEXT Du RP TEXT Du RP TEXT Du RP TEXT Du RP TEXT Du RP
  </p>
</div></td>
  <td style="height: 400px; vertical-align: top;"><img style="border:4px solid #BB9600;" src="http://i66.tinypic.com/14iz7te.png"/></td></tr><tr><td style="height: 400px; width: 200px; vertical-align: top; color: #BB9600;"><span style="font-size:200%">Prénom<br/>NOM</span><br/><span style="font-size:100%">
  <p style="text-align: justify;">âge, civilités etc<br/>taille ~poids<br/><br/><br/>
Petite bio jolie pour ceux qui aime ça, ou bien compétences et statistiques quand vous en avez. Il y a largement la place de mettre du texte comme vous voulez.<br/><br/></p></span>
  </td></tr></table>
  <p style="text-align:right; font-size:100%;">Réponse attendue pour le XX-XX-XX au plus tard</p>
<div style="texte-align:center; color:#cccccc; font-size:75%;">Code par Elocha sur <a href="url=http://www.never-utopia.com/">Nerver-Utopia</a></div>


Usage


Structure : Évidement ici c'est un dessin avec la colonne de profil à gauche...
le tableau tout nu

  • Il faudra jouer sur les positions en début de code ainsi que sur la largeur des colonnes pour bien superposer le profil et le message sur ce que fait le forum normalement.
  • J'ai gardé deux lignes dans la première colonne parce que, ainsi, je peux gérer la partie basse du profil selon mes besoin séparément de la partie haute (avatar du PNJ).
  • Pour ceux qui affichent la colonne de profil à droite il suffit d'inverser l'ordre des colonnes dans le code et de changer l'alignement des marges (je vous propose les deux codes).
  • Sur cette version, les avatars sur ce forum font 200*400 et ne sont pas "resized".
  • Pour chaque personnage il faut changer l'avatar, la couleur éventuellement, et bien sûr le petit texte de présentation de votre PNJ.
  • Astuce : les couleurs du cadre sont celle du groupe en fait, ce qui permet aux joueurs d'identifier le PNJ rapidement -et pratiquement inconsciemment-

Hiro'

Affichage du profil au survol de l'avatar - Sam 21 Sep 2013 - 21:52



Bonjour tout le monde !
Nouveau tutoriel, certainement plus utile que le précédent. Il s'agît ici de cacher assez simplement le profil à l'intérieur de votre avatar. Mystérieux, isn't it ? Mystérieux, peut-être mais relativement simple.


Ce tuto nécessite la modification des templates et de la fiche de style CSS. Vous devez donc être administrateur fondateur.
Ce tuto est valable pour un forum avec des avatars aux dimensions 200*400. Il est cependant assez simple à personnaliser. Tout est expliqué Wink


Merci à Sparrow à qui j'ai subtilisé le code CSS qu'il utilise ici.

Un petit merci pour voir le tutoriel ?


Revenir en haut

La date/heure actuelle est Mer 22 Nov 2017 - 15:57