Lien vers la feuille de personnage dans le rang

[Elwing]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : /
Lien du forum : http://ewietest.forumactif.org/

Description du problème

Bonjour ! Aujourd'hui dans la rubrique "je charcute mon Profil", comment ajouter un lien vers la feuille de personnage dans le rang.

Je détaille un peu plus ^^" : comme vous le voyez, je tente désespéramment de modifier le profil sur ce forum RPG (du moins le fow test). Mon problème, c'est que l'ensemble des admins a voté pour l'élimination pure et simple du titre "Personnage" pour la feuille de personnage. A la place, on aimerait que ce soit le rang qui apparaisse.
(Idéalement on y aurait placé la réponse au champ "statut dans la guilde", mais je doute que ce soit possible et surtout j'ai peur que ça le soit, et de façon trop complexe).
Donc, j'ai pensé qu'il serait plus simple de remplacer le rang par une image, et de placer cette image à la place de "Personnage".

Mais en pratique je me heurte à ces problèmes :
- Si je rends invisible le lien de "Personnage", ça ne l'enlève pas vraiment sans pour autant qu'on puisse cliquer dessus aisément.
- Si j'enlève "Personnage" on ne peut plus accéder en un clic à la feuille perso complète.

Je pourrais m'amuser à ajouter individuellement les liens dans une image/rang pour chaque membre mais... non, vraiment ça ne m'amuserait pas du tout et bonjour l'invasion de rang dans le PA !

Je me doute que la fonction "redirection automatique vers la feuille perso du membre" se trouve dans les templates, niveau rpg_sheet dans

Code:

{L_ROLEPLAY_MANAGE_TITLE}

Finalement, ma question est : est-ce possible d'extraire cette "redirection automatique" et de l'appliquer au rang plutôt qu'au titre de la feuille (que je vais supprimer) ??

D'avance un grand merci à qui comprendra cette demande farfelue et saura y trouver une réponse =D

Très bonne soirée,
Elwing

[Miettes]

Coucou

Avec du js ça serait possible, mais peut etre un poil lourd.

Par contre, on peut bidouiller ça en CSS (plus léger, peut etre un poil crade, mais pas forcément compliqué). Je m'explique

1) Dans le template "viewtopic_body" , on met le texte de la fiche ainsi que l'image du rang dans un même bloc et on entoure d'un span avec une class le rang:

Code:

<div class="link-perso">{postrow.displayed.POSTER_RPG}
<span class="rank">{postrow.displayed.POSTER_RANK}<br />
        {postrow.displayed.RANK_IMAGE}</span></div>

2) Dans la CSS, on va :
a] Mettre ce bloc en position relative (il nous servira de référence pour placer nos 2 élements)

Code:


.link-perso{
    position: relative;
}


b] On va mettre le lien en display block et lui donner les mêmes dimensions que notre rang et on cache le texte :

Code:


.link-perso > a{
    display: block; 
    height: 40px;
    font-size: 0;
    position: relative;
    width: 150px;
    z-index: 20;
}


C] On place l'image du rang en position absolue, superposer au lien mais en dessous de celui-ci (pour qu'il soit cliquable) :

Code:

.link-perso .rank{
    display: block;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 10;
}

> Rendu : http://miettes.lebonforum.com/t1-votre-1er-sujet

[Elwing]

Merci pour ta réponse Miettes !
Je reviens dès que j'ai pu tenter tout ça bien comme il faut =)

[Miettes]

Coucou

ça marche ^^

[Elwing]

Hi ! un petit passage pour ne pas archiver la demande x)
Je suis encore dessus, (j'ai du faire des modifs) et j'ai pas eu le temps de finaliser X_X Mais c'est toujours d'actu et à première vue ça devrait aller, dès que j'aurais réussi à tout caler bien parce que j'ai des soucis de marges ou de padding etc.

Là on peut voir où ça en est : http://ewietest.forumactif.org/t54-new#406 (après bien sûr je rendrais le "PERSONNAGE" invisible, c'est juste pour bien tout aligner ^^)

Un morceau du templates viewtopic_body :

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">
                      <div class="profilmembre"><div class="pseudo"><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><div class="flecheprofil"></div></div>
                <span class="postdetails poster-profile">
                  <div class="avatar_cadre">{postrow.displayed.POSTER_AVATAR}</div>
                                      <div class="rang">{postrow.displayed.POSTER_RANK}</div>
                <div class="infoprofil"><!-- BEGIN profile_field -->
                                      {postrow.displayed.profile_field.LABEL} <span class="infoprofilrep">{postrow.displayed.profile_field.CONTENT}</span>{postrow.displayed.profile_field.SEPARATOR}
                                      <!-- END profile_field --></div>
                  <div class="cadre_rpg"><div class="link_perso"><div class="rang_image">{postrow.displayed.RANK_IMAGE}</div>
                    <span class="rpg_perso">{postrow.displayed.POSTER_RPG}</span></div></div>
                                          </span></div>
          </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>

Et le CSS qui va avec :

Code:

.rang{
        display: block;
        position: relative;
        z-index: 10;
      width:177px;
      height:50px;
  top: 0px;
  text-align: center;
  margin: auto;
  background: rgba(243, 170, 145, 0.75);
      font: 10px Josefin Slab, Georgia;
      line-height:95%;
      text-transform: uppercase;
      color:#636363;
  -moz-box-shadow: 0px 0px 8px 0px #ECF18A;
      -webkit-box-shadow: 0px 0px 8px 0px #ECF18A;
      -o-box-shadow: 0px 0px 8px 0px #ECF18A;
      box-shadow: 0px 0px 8px 0px #ECF18A; /*#656565;*/
      filter:progid:DXImageTransform.Microsoft.Shadow(color=#9883B1, Direction=NaN, Strength=8);
    }


.cadre_rpg {
width: 228px;
height: auto;
background-color: #ABC9B3; 
text-align : justify;
border-radius: 50px 0 50px 0 ;
padding: 11px;
  margin-top: 15px;
}
 
   
    .link_perso{
        position: relative;
      }
   
    .link_perso .rpg_perso a{
        display: block;
  background: grey;
        width: 177px;
        height: 50px;
        font-size: 30px;
  font-color: white !important;
        position: absolute;
        z-index: 20;
  margin: auto;
  top: -30px;
}

.rang_image{
  display: block;
  width: 177px;
  height: 50px;
  position: relative;
  z-index: 10;
  margin: auto;
  top: -20px;
 }
 
.rpg_perso span {
  color: #EFE9DC !important;
  font-family: Verdana;
font-size: 12px;
}

Voilà, ce qui me perturbe pour l'instant c'est tout l'espace en trop sous l'image du rang. Ça doit pas être grand chose en plus mais ça me tracasse x)

Si tu sais où ça plante... c'est volontiers
Encore merci !

[Elwing]

Bonjour/soir !

C'est bon tout est réglé c'est impecc' ^^ Je te remercie encore pour ton aide !

J'édite en résolu