AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


9 résultats trouvés pour profil

Un seul compte, plusieurs personnages : Choix déroulant (2 versions) - Dim 21 Avr 2019 - 16:46

Un seul compte, plusieurs personnages : Choix déroulant




Alors, le multicompte !

Okhmakala avait déjà pensé à cela et avait proposé une astuce juste ici.

Puis, j'ai découvert Esquisse où j'ai réalisé qu'il y avait un système très intéressant où les joueurs ajoutaient une toute petite ligne de code (différente pour chaque personnage) sur leurs messages RP. Ensuite, un javascript repérait cette merveilleuse ligne de code et modifiait le pseudo et l'avatar du joueur pour ceux du personnage dans ce message.

Je reprends ces deux idées et je vais un pas plus loin.


De ce que j'ai pu voir, les principales oppositions à l'idée de Okhmhaka étaient les suivantes :
- Il va falloir que je change des choses
- Oui, logique, un changement implique des changements. Si cela complique la vis des gens, cela passe très mal. Si cela leur facilite la vie, cela passe très bien. On va essayer d'être dans la deuxième catégorie ^^

- Le codage est trop compliqué pour certains de mes membres.
Plus maintenant ! La seule chose que votre membre aura besoin de faire, c'est de sélectionner son personnage, rien d'autre. Le membre n'a pas à toucher à une miette de code ^^

- Les gens doivent toujours copier/coller leur fiche rp, c'est frustrant.
Nope ! Les gens n'auront qu'à sélectionner leur personnage dans un choix déroulant et la magie s'opérera. Leur fiche rp personnalisée apparaîtra comme par magie et leur rp se met lui-même au bon endroit. Il ne reste plus qu'à poster ^^

- C'est louche... Ça fonctionne comment exactement?
Oui, oui, ça s'en vient XD Allez, je vous présente les deux versions.


Version 1


1. Choisir dans un menu déroulant le personnage souhaité lorsque vous postez votre RP.


Le javascript vous propose vos personnages dans un choix déroulant.
Voir un exemple de choix de personnages.

Une fois le choix fait, un petite ligne de code magique qui fait tout fonctionner s'ajoute à votre message.
Voir un exemple de ce qui ce passe une fois le choix fait.
Note : Cela ne fonctionne pas sur les réponses rapides. Il faut cliquer sur "Prévisualiser", puis choisir son personnage.
Note 2 : Ce LS semble incompatible avec le javascript du Sauvegarde des messages en cours de Manumanu. Faut choisir l'un ou l'autre, désolée.

2. Avoir les informations du personnage choisi qui remplacent les vôtres


Dans les sujets où vous avez choisi un personnage avant de poster, vous verrez votre avatar, votre pseudo, la couleur de votre groupe, votre rang et votre image de rang seront remplacés par ceux du personnage.
Votre pseudo en tant que joueur sera déplacé ailleurs (en dessous du pseudo du personnage sur l'exemple), mais restera quand même là pour dire qui est le propriétaire de ce personnage.
Voir un exemple de plusieurs personnages.

3. Avoir des champs personnalisables selon les personnages avec mise en forme personnalisée


Toujours selon le même principe, il peut y avoir des champs personnalisés supplémentaires et il est possible de personnaliser l'apparence de chacun des champs personnalisés.
Voir un exemple.
Note : Sur l'exemple, on ne voit pas les champs "normaux" du joueur parce que je ne voulais pas les voir en même temps que les champs personnalisés. Je les ai cachés pour qu'ils apparaissent seulement au survol de l'avatar. Il y a un tas de LS sur ça, je vous laisse fouiller si ça vous intéresse.

4. Avoir 2 profils distincts si vous préférez cette option


Disons que, à la place d'avoir les informations sur personnage qui remplace celles du joueur, vous préférez avoir un profil joueur et un profil personnage, puis voir les 2 apparaître en même temps, c'est aussi une option qui vous sera proposée.
Si les instructions mentionnent "2 profils distincts", cela s'adresse à vous.
Voir un exemple.
Par contre, ce LS est uniquement pour faire fonctionner le système et mettre en forme la partie personnage. Pour la partie profil du joueur, c'est à vous de le faire, quitte à aller voir les autres LS de profil. Je vous conseille de prendre un LS de profil où le profil joueur est très discret, tel que le Mini-profil en bandeau de Okhmhaka (qui est 100% compatible, je m'en suis assurée :ange:)

5. Modifier les données des personnages avec une Google Sheet


Vous pouvez utilisez une Google Sheet (les instructions seront données plus bas) pour enregistrer toutes les données pour chaque personnage et le javascript va y chercher l'information qu'il a besoin pour son travail.
L'avantage, c'est que plusieurs personnes peuvent modifier le fichier en même temps sans nuire aux autres et que les membres peuvent eux-mêmes modifier leurs informations.
Vous avez une option qui vous permet de "protéger" certains plages de la Google Sheet pour s'assurer que vos membres puissent modifier seulement ce qu'ils ont le droit de modifier, ce qui évite que X efface les données de Y par accident.
S'il y a un accident ou une bêtise, il est possible de reculer en arrière en restaurant des données antérieures.

6. Modifier les données des personnages directement dans le javascript


Disons que vous avez une haine profonde de Google Sheet et que vous voulez une autre option pour où mettre les données des personnages, cette option est pour vous.
L'information est enregistrée directement dans le javascript lui-même pour chaque personnage et le javascript va y chercher l'information qu'il a besoin pour son travail.
L'avantage, c'est que seuls les Admins pourront le modifier.
Le désavantage, c'est que seuls les Admins pourront le modifier (dépendamment du nombre de membres et de modifications à faire, cela peut rapidement devenir ardu).
Si vous n'aimez pas utiliser Google Sheet ou des sites externes, c'est une solution comme une autre.


Version 2


Contrairement à la Version 1, il n'y a pas de ligne de code magique qui s'ajoute à votre message et les informations de votre personnage ne vont pas remplacer celles de votre profil.
Le principe de cette version, c'est qu'on veut voir la progression du personnage dans le temps.
Or, dans la Version 1, dès qu'on change une information dans la Google Sheet, les informations se modifient partout (bref, selon le même principe que les champs du profil FA habituels).

Par conséquent, voilà ce que cette version vous permettra de faire :

1. Choisir dans un menu déroulant le personnage qui doit poster lorsque vous postez votre RP.


Bref, le javascript va regarder dans la base de données quels sont vos personnages et vous les propose.
Voir un exemple de choix de personnages.
Note : Ce LS semble incompatible avec le javascript du Sauvegarde des messages en cours de Manumanu. Faut choisir l'un ou l'autre, désolée.

2. Mettre toutes les informations de votre personnage dans une feuille RP avant de poster


Lorsque vous choisissez un personnage, le javascript magique crée une feuille RP qui contient les informations de vos personnages et y glisse le message que vous venez d'écrire.
Voir un exemple de ce qui se passe quand on choisit un personnage.
Voir un exemple du résultat une fois le message posté.

3. Avoir des champs personnalisables selon les personnages avec mise en forme personnalisée


Toujours selon le même principe, il peut y avoir des champs personnalisés supplémentaires qui sont inclus dans la feuille rp et il est possible de personnaliser l'apparence de chacun des champs personnalisés, tel que vu dans l'exemple précédent (l'inventaire était différents des autres champs).

4. Apparence avec 2 profils


Dans vos messages normaux, vous verrez votre profil joueur et votre message.
Dans vos messages RP, vous verrez votre profil joueur, votre profil personnage et votre message.
C'est un tout inclus !
Je vous conseille de prendre un LS de profil où le profil joueur est très discret, tel que le Mini-profil en bandeau de Okhmhaka.

5. Modifier les données des personnages avec une Google Sheet


Vous utilisez une Google Sheet (les instructions seront données plus bas) pour enregistrer toutes les données pour chaque personnage et le javascript va y chercher l'information qu'il a besoin pour son travail.
L'avantage, c'est que plusieurs personnes peuvent modifier le fichier en même temps sans nuire aux autres et que les membres peuvent eux-mêmes modifier leurs informations.
Vous avez une option qui vous permet de "protéger" certains plages de la Google Sheet pour s'assurer que vos membres puissent modifier seulement ce qu'ils ont le droit de modifier, ce qui évite que X efface les données de Y par accident.
S'il y a un accident ou une bêtise, il est possible de reculer en arrière en restaurant des données antérieures.


Donc en gros


La Version 1 est plutôt pour ceux d'entre vous qui auraient des profils assez stables qui ne changent pas beaucoup. Ou, si les informations changent, il faut qu'elles changent partout sur le forum.
La mise en place se fait assez facilement et cela ne dérange pas du tout le codage de votre forum. Vous pourriez avoir un profil ou un message totalement codé et quand même installer ce système sans difficultés.

La Version 2 est plutôt pour ceux d'entre vous qui auraient des profils personnages dont les informations changeraient beaucoup et/ou qui préféreraient suivre la progression du personnage à travers le RP. Par exemple, s'il y a une barre d'expérience, une barre de vie, un inventaire, etc., cette version est plus pour vous.
La mise en place se met relativement facilement, mais je suggère que vous ayez quelques connaissances en codage pour mieux personnaliser la fiche de RP.

Dans les 2 cas, l'action à poser par le membre est extrêmement simple, il suffit de sélectionner son personnage et de mettre à jour la Google Sheet si c'est nécessaire.


Je peux mettre quoi comme champ personnalisé exactement?

N'importe quoi. Littéralement.

Vous voulez mettre des badges?
On mettrait ceci dans la Google Sheet dans le champ "Badges" :
Code:
<img src="lien Badge1" /><img src="lien Badge2" /><img src="lien Badge3" />


Vous voulez mettre des pokéballs avec des infobulles? Pourquoi pas !
On mettrait ceci dans la Google Sheet dans le champ "Pokéballs" :
Code:
<span class="infobulle_poke"><img src="image pokéball 1" /><span class="poke">Pikachu</span></span> <span class="infobulle_poke"><img src="image pokéball 2" /><span class="poke">Rattata</span></span>

Et un petit CSS pour faire fonctionner l'infobulle.

Vous voulez une barre de vie?
On mettrait ceci dans la Google Sheet dans le champ "PV" :
Code:
<span class="barrepv"><span class="width: 43%;"></span></span> 43/100

Et on mettrait ceci dans le CSS :
Code:
/*La barre de vie*/
.barrepv {
  display: inline-block;
  width: 100px;
  height: 10px;
  border: 1px solid #fff;
  border-radius: 2px;
}
/*La partie remplie de la barre de vie*/
.barrepv > span {
  display: inline-block;
  background-color: red;
}


Tant que vous avez de l'imagination, vous devriez vous débrouiller Razz

Sur ce, je vous présente les Version 1 et Version 2 dans les deux prochains messages Wink

Enjoy \o/

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://2img.net/i/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
Tag profil sur Never Utopia - graphisme, codage et game design Bac408486e

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 :hudada:

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://2img.net/i/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://2img.net/i/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 "https://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://2img.net/i/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;
}


Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Si vous avez des problèmes avec ce LS, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

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 = [
  "https://2img.net/r/hpimg11/pics/215624jaime.png",
  "https://2img.net/i/fa/subsilver/icon_pm.gif",
  "https://2img.net/i/fa/subsilver/icon_email.gif",
  "https://illiweb.com/fa/subsilver/icon_www.gif",
  "https://2img.net/i/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 = [
  "https://2img.net/r/hpimg11/pics/215624jaime.png", /*Image du 1er groupe*/
  "https://2img.net/i/fa/subsilver/icon_pm.gif", /*Image du 2e groupe*/
  "https://2img.net/i/fa/subsilver/icon_email.gif", /*Image du 3e groupe*/
  "https://illiweb.com/fa/subsilver/icon_www.gif", /*Image du 4e groupe*/
  "https://2img.net/i/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

Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

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.

Tag profil sur Never Utopia - graphisme, codage et game design ZEG3qYu

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.


Première partie : Templates.

Elles font peur, elles inquiètent, elles en imposent et font les fières avec leurs grands airs qui font que vous les trouvez totalement hors de votre portée. Pourtant, il va bien falloir y toucher ! Alors retroussez vos manches, et rendez-vous sur le template viewtopic_body.

Cernons la partie qui nous intéresse.

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}"></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>


Que de variables ! Cependant, quand on regarde bien, on remarque que leur utilité est parfois quasi-transparente.

Kézako ?

  • {postrow.displayed.POSTER_NAME}. Celle-ci est très importante. Il s'agît du nom du posteur. Ne me dîtes pas que vous ne l'aviez pas deviné.
  • {postrow.displayed.POSTER_RANK}. Le rang du membre, si rang il y a. Juste en dessous, on a l'image associée à ce rang.
  • {postrow.displayed.POSTER_AVATAR}. Voilà celle qui nous intéresse particulièrement : l'avatar.
  • {postrow.displayed.POSTER_JOINED}. C'est la date d'inscription du membre.



Certaines variables importantes n'apparaissent pas, car englobées dans une autre.
On devinera cependant assez facilement que :

  • Le nombre de messages du membre est {postrow.displayed.POSTER_POSTS}
  • La date d'inscription du membre est {postrow.displayed.POSTER_JOINED}

Ce sont les deux qui nous intéresseront ici.

Bon, il est temps de le modifier ce template. Alors pour commencer, nous allons supprimer du code !
Vous pouvez donc supprimer tout ce qui est inclut entre :


Code:
<span class="postdetails poster-profile">

et
Code:
</span><br />



Qu'est-ce que j'ai supprimé ?
Tout le profil qui s'affichait à côté de votre message. C'est malin ! Il ne reste plus que votre pseudo. Heureusement que je suis là pour rattraper tout ça.


Voilà par quoi vous allez remplacer tout ça :

Code:
<div class="description4"><div style="display: block; text-align: center; width: 200px; height:400px; overflow:visible;">{postrow.displayed.POSTER_AVATAR}<div class="description4_contenu" style="margin-top:-400px;"><div style="OVERFLOW: auto; width: 190px; height: 390px; padding: 5px;font-variant:small-caps; text-shadow:1px 1px 1px white; font-size:14px;"><br /><div style="text-align:center; font-size:17px;">{postrow.displayed.POSTER_NAME}.</div><center><i>{postrow.displayed.POSTER_RANK}</i></center><br /><br />{postrow.displayed.POSTER_POSTS} messages.<br />Inscrit le {postrow.displayed.POSTER_JOINED}.</div></div></div></div>
<br /><br />
{postrow.displayed.POSTER_RPG}


Une petite explication s'impose.

Kézako ?

  • description4 est un cadre. Dans ce cadre, vous avez affiché l'avatar du membre avec la variable { postrow.displayed.POSTER_AVATAR }.
  • Par dessus ce magnifique cadre vous avez rajouté un cadre nommé description4_contenu. C'est là que s'afficheront les éléments que vous aurez décidé d'afficher.



Personnaliser

  • La taille de l'avatar. Il suffit de repérer tous les 400 et les remplacer par votre hauteur, et tous les 200 et les remplacer par votre largeur. Attention ! Il y en a dans le HTML et dans le CSS. Il y a également un endroit où les dimensions ont perdus 10 px, vous devrez également enlever 10px à vos dimensions. Pourquoi ? Cela est du a un padding, une marge intérieure.
  • Le contenu caché. Dans cet exemple, il correspond à ceci :

    Code:
    {postrow.displayed.POSTER_NAME}.</div><center><i>{postrow.displayed.POSTER_RANK}</i></center><br /><br />{postrow.displayed.POSTER_POSTS} messages.<br />Inscrit le {postrow.displayed.POSTER_JOINED}.


    Pour savoir ce que veulent dire ces variables, il faut lire le début du tutoriel.


  • Vous pouvez tout naturellement modifier les différentes variables de templates, le texte et la mise en forme appliquée.



Le template est modifié. Enregistrez-le et validez-le. Allez voir : le texte est superposé sur l'avatar. Le CSS peut entrer en piste !

Deuxième partie : CSS.

Bon, après le détail que j'ai fait pendant la première partie, vous devriez comprendre facilement ce code sans plus d'explications. Je le répète encore une fois : n'oubliez pas de modifier les dimensions de l'avatar pour qu'ils correspondent à ceux de votre forum.
Et le code fut.

Code:
.description4 {
  display: block;
  width: 200px;
  margin: auto;
  height: 400px;
  overflow: hidden;
  transition:0.4s ease;
}

.description4:hover {
  display: block;
  width: 200px;
  margin: auto;
  height: 400px;
  overflow: hidden;
}

.description4_contenu {
  position: absolute;
  width: 200px;
  height: 400px;
  overflow: 400px;
  background-color: #EFE9DD;
  font-size: 11.5px;
  font-family:'Georgia';
  color: #3E352E;
  text-align: justify;
  padding:0px;
  opacity: 0;
  transform: all;
  transition: 1s;
}

.description4_contenu:hover {
  opacity: 0.8;
  transform: all;
  transition: 1s;
}

Pour l'explication du code, je vous envoie à mon précédent tutoriel.
Et, c'est terminé !
Si vous vous êtes paumé en route ou si vous êtes un gros flemmard qui n'a pas tout lu, voici une dernière partie pour pouvoir voir le code tout beau tout propre.

Troisième partie : Pour les flemmards et les paumés. (patapey ?)

CSS :

Code:
.description4 {
  display: block;
  width: 200px;
  margin: auto;
  height: 400px;
  overflow: hidden;
  transition:0.4s ease;
}

.description4:hover {
  display: block;
  width: 200px;
  margin: auto;
  height: 400px;
  overflow: hidden;
}

.description4_contenu {
  position: absolute;
  width: 200px;
  height: 400px;
  overflow: 400px;
  background-color: #EFE9DD;
  font-size: 11.5px;
  font-family:'Georgia';
  color: #3E352E;
  text-align: justify;
  padding:0px;
  opacity: 0;
  transform: all;
  transition: 1s;
}

.description4_contenu:hover {
  opacity: 0.8;
  transform: all;
  transition: 1s;
}


Template viewtopic_body :

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(){
 _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>

<table width="100%" border="0" cellspacing="2" cellpadding="0">
 <tr>
 <td align="left" valign="middle" nowrap="nowrap">
 <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>
 <td align="left" valign="middle" nowrap="nowrap">
 <!-- BEGIN switch_twitter_btn -->
 <span id="twitter_btn" style="margin-left: 6px; ">
 <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
 <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 </span>
 <!-- END switch_twitter_btn -->
 <!-- BEGIN switch_fb_likebtn -->
 <span id="fb_likebtn" style="margin-left: 6px; ">
 <iframe src="http://www.facebook.com/plugins/like.php?href={FORUM_URL}{TOPIC_URL}&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
 </span>
 <!-- END switch_fb_likebtn -->
 </td>
 <td class="nav" valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
 <td align="right" valign="bottom" nowrap="nowrap" width="100%">
 <span class="gensmall bold">
 <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>
 <!-- BEGIN switch_plus_menu -->
  | .
 <script type="text/javascript">//<![CDATA[
 var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
 var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
 var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
 var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
 var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
 var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
 insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
 //]]>
 </script>
 <!-- END switch_plus_menu -->
 </span>
 </td>
 </tr>
</table>

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" >
 <tr align="right">
 <td class="catHead" colspan="3" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="9%" class="noprint"> </td>
 <td align="center" class="t-title">
 <h1 class="cattitle"> {TOPIC_TITLE}</h1>
 </td>
 <td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td>
 </tr>
 </table>
 </td>
 </tr>
 <!-- BEGIN topicpagination -->
 <tr>
 <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
 </tr>
 <!-- END topicpagination -->
 {POLL_DISPLAY}
 <tr>
 <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
 <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
 </tr>
 <!-- BEGIN postrow -->
 <!-- BEGIN hidden -->
 <tr>
 <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
 </tr>
 <!-- END hidden -->
 <!-- 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"><div style="font-size:20px;text-align:center; margin-bottom:-20px;z-index:150;letter-spacing:2px;"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></div></span><br />
 <span class="postdetails poster-profile">
 
                                  
                                  <div class="description4"><div style="display: block; text-align: center; width: 200px; height:400px; overflow:visible;">{postrow.displayed.POSTER_AVATAR}<div class="description4_contenu" style="margin-top:-400px;"><div style="OVERFLOW: auto; width: 190px; height: 390px; padding: 5px;font-variant:small-caps; text-shadow:1px 1px 1px white; font-size:14px;"><br /><div style="text-align:center; font-size:17px;">{postrow.displayed.POSTER_NAME}.</div><center><i>{postrow.displayed.POSTER_RANK}</i></center><br /><br />{postrow.displayed.POSTER_POSTS} messages.<br />Inscrit le {postrow.displayed.POSTER_JOINED}.</div></div></div></div>
                                  
                                  <br /><br />
 
 {postrow.displayed.POSTER_RPG}
 </span><br />
 <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
 </td>
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
 <td valign="top" nowrap="nowrap" class="post-options">
 {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}
 </td>
 </tr>
 <tr>
 <td colspan="2" class="hr">
 <hr />
 </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="postbody">

 <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 class="clear"></div>
 <!-- BEGIN switch_signature -->
 <div class="signature_div">
 {postrow.displayed.SIGNATURE}
 </div>
 <!-- END switch_signature -->

 </div>
 <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
 </td>
 </tr>
 </table>
 </td>
 </tr>
 <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
 <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
 <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
 </td>
 <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>
 </tr>
 <!-- BEGIN first_post_br -->
</table>
<hr />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <tr>
 <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
 <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
 </tr>
 <!-- END first_post_br -->
 <!-- END displayed -->
 <!-- END postrow -->
 <!-- BEGIN no_post -->
 <tr align="center">
 <td class="row1" colspan="3" height="28">
 <span class="genmed">{no_post.L_NO_POST}</span>
 </td>
 </tr>
 <!-- END no_post -->
 <tr align="right">
 <td class="catBottom" colspan="3" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="9%" class="noprint"> </td>
 <td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
 <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
 </tr>
 </table>
 </td>
 </tr>
</table>
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
 <tr>
 <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
 <!-- BEGIN topicpagination -->
 <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
 <!-- END topicpagination -->
 </tr>
 <!-- BEGIN switch_user_logged_in -->
 <!-- BEGIN watchtopic -->
 <tr>
 <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
 </tr>
 <!-- END watchtopic -->
 <!-- END switch_user_logged_in -->
</table>

<!-- BEGIN promot_trafic -->
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
 <tr>
 <td class="catBottom" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
 <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
 </tr>
 </table>
 </td>
 </tr>
</table>

<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
 <tr>
 <td class="catBottom" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
 <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td class="row2 postbody" valign="top">
 <!-- BEGIN link -->
 » <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}">{promot_trafic.link.TITLE}</a><br />
 <!-- END link -->
 </td>
 </tr>
</table>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
 <tbody>
 <tr>
 <td class="catBottom">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tbody>
 <tr>
 <td valign="top">
 <h1 class="cattitle"> {L_FORUM_RULES}</h1>
 </td>
 </tr>
 </tbody>
 </table>
 </td>
 </tr>
 <tr>
 <td class="row1 clearfix">
 <table>
 <tr>
 <!-- BEGIN switch_forum_rule_image -->
 <td class="logo">
 <img src="{RULE_IMG_URL}" alt="" />
 </td>
 <!-- END switch_forum_rule_image -->
 <td class="rules postbody">
 {RULE_MSG}
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </tbody>
</table>
<!-- END switch_forum_rules -->

<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td class="row2" colspan="2" align="center" style="padding:0px">
 <!-- 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 -->
 <tr>
 <td class="catBottom" colspan="2" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
 <!-- BEGIN show_permissions -->
 <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
 <!-- END show_permissions -->
 </tr>
 </table>
 </td>
 </tr>
 </tbody>
 </table>
 </td>
 </tr>
 <tr>
 <td style="margin:0; padding: 0;" colspan="2">
 <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
 <tbody>
 <tr>
 <td class="catBottom" colspan="2" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
 <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
 </tr>
 </table>
 </td>
 </tr>
 </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>

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

 <!-- BEGIN moderation_panel -->
 <td align="center">
 <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
 </td>
 <td align="center" width="250">
 <span class="gensmall"> </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>


Voilà, j'espère avoir été clair. Merci d'avoir lu ce tutoriel et à beintôw Wink


Revenir en haut

La date/heure actuelle est Mar 19 Mar 2024 - 9:24