SOS-FORUM
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
SOS-FORUM

Derniers sujets

» Silence Inside Me - Ouverture
par Solitude 3/3/2018, 12:36

» ATLANTIC CITY - rpg city
par Solitude 15/3/2017, 10:41

» Bonne Année 2015
par Yoda 5/3/2017, 20:12

» Rio de Janeiro
par Solitude 14/9/2015, 15:34

» Bon Anniversaire Zeco
par Laurent 29/5/2015, 06:29

-39%
Le deal à ne pas rater :
Ordinateur portable ASUS Chromebook Vibe CX34 Flip
399 € 649 €
Voir le deal

Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

SOS-FORUM » Entraide » Apparence & Structure » Archives » effet slide du profil des membres sur sos forum

Voir le sujet précédent Voir le sujet suivant Aller en bas  Message [Page 1 sur 1]

demeter
demeter
(Membre)
http://altitudetropicale.forums-actifs.com/forum.htm
Bonjour à tous,
Me revoila encore avec une question scratch encore. Embarassed

Je suis trés intrigué par le système de pop up que vous avez mis sur les avatars afin de voir apparaître le profil d'un membre. Serait il possible d'obtenir la même chose pour la feuille de personnage en passant le curseur sur un lien ou une image ?

Zeco
Zeco
Administrateur absent
http://digs.forumactif.com/forum
Hello...

Je pense bien que oui, ça serait faisable.
Cependant, j'ai quelques questions :
> Es tu en phpbb2 ou punBB ?
> As tu déjà modifié le template "viewtopic_body" ?
> Ou devrait se trouver l'image ?

demeter
demeter
(Membre)
http://altitudetropicale.forums-actifs.com/forum.htm
Bonjour Zeco,
Décidément, je te donne un boulot monstre en ce moment Embarassed

Je suis en PHpbb2

l'image devrait se trouver au niveau du lien nommé "les échanges" cad en fin du profil.

Avant de t'abassourdir avec toutes les explications pouvant te donner des indications sur les modifications apportées sur ce template, je tiens à te remercier pour l'aide que tu m'apportes ces derniers temps. J'ai un peu honte tout de même de te monopoliser ainsi.Crying or Very sad

Mon template view topic à été remanié pour obtenir :
un encadrement des avatars et des profils
effet slide du profil des membres sur sos forum Captur11

et un système de popup pour afficher la feuille de personnage. Il est fonctionnel mais largement moins esthétique que celui que vous avez sur le forum.

effet slide du profil des membres sur sos forum Captur12


POur l'encadrement , j'ai posé une division correspondant au fond du pseudo
Code:
<div id="profil_head">

à ce niveau
Code:
<!-- BEGIN displayed -->
  <tr class="post">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" max-width="170">

puis je l'ai refermé juste après ceci
Code:
name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong>

par
Code:
</div>



J'ai rajouté une autre division pour entourer le pseudo des membres
Pour cela j'ai mis
Code:
<div id="name">

juste avant
Code:
<a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong>

et voici la fin des divsions
Code:
<div id="profil_body"><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>
</div>
<div id="profil_foot"></div>

le tout est géré via css
Code:
#profil_head
{
background-image: url(http://i15.servimg.com/u/f14/35/70/13/barre_13.png);
background-repeat:no- repeat;
width:200px;
height: 64px;
margin-bottom:-25px;
}

#name
{
padding-top:-6px;
padding-left:0px;
font-size: 16px;
}

#profil_body
{
background-image: url(http://i15.servimg.com/u/f15/35/70/13/barre_14.png);
background-repeat: repeat-y;
width: 200px;
max-height: 400px;

}



#profil_foot
{
background-image: url(http://i15.servimg.com/u/f15/14/35/70/13/bas_du13.png);
background-repeat: no-repeat;
width: 200px;
height: 64px;

}


POur le pop up de la feuille de personnage

J'ai remplacé
Code:
{postrow.displayed.POSTER_RPG}

par
Code:
<span id="rpg-sheet">
  <span id="label">Feuille de personnage</span>
  <span id="fiche">{postrow.displayed.POSTER_RPG}</span>
</span>
<script type="text/javascript">
  if($('#rpg-sheet #fiche').html()!='')
  {
    $('#rpg-sheet #label').click(function(){ $(this).next().toggle();}).attr('class','label').attr('id','');
    $('#rpg-sheet #fiche').attr('class','fiche').attr('id','');
    $('#rpg-sheet').attr('class','rpg-sheet').attr('id','');
   
  }
  else
  {
      $('#rpg-sheet').remove();
  }
</script>

le pop up est géré via css

Code:
.rpg-sheet {
  position: relative;
}
.rpg-sheet .label {
  cursor:pointer;
}
.rpg-sheet .fiche {
  display:none;
  position: absolute;
  left: 20px;
  top: 20px;
  background: red;
  border: 2px solid #000;
}

Voici mon template

Spoiler:



Dernière édition par demeter le 10/4/2010, 20:42, édité 1 fois

Zeco
Zeco
Administrateur absent
http://digs.forumactif.com/forum
Mais non, y a pas de soucis.

Donc si j'ai bien compris, c'est ceci qui qui fait apparaître la pop up ?
Code:
<span id="rpg-sheet">
  <span id="label">Feuille de
personnage</span>
  <span
id="fiche">{postrow.displayed.POSTER_RPG}</span>
</span>
<script
 type="text/javascript">
  if($('#rpg-sheet #fiche').html()!='')
 
 {
    $('#rpg-sheet #label').click(function(){
$(this).next().toggle();}).attr('class','label').attr('id','');
   
$('#rpg-sheet #fiche').attr('class','fiche').attr('id','');
   
$('#rpg-sheet').attr('class','rpg-sheet').attr('id','');
   
  }
 
 else
  {
      $('#rpg-sheet').remove();
  }
</script>

Ok, essaye de remplacer toute cette partie par ceci :
Code:
<span class="rpgzone">
  <span class="rpgbutton">Feuille de
personnage</span>
  <spanclass="rpghidden" >{postrow.displayed.POSTER_RPG}</span>
</span>

Et dans le CSS, tu ajoutes :
.rpgzone .rpghidden {visibilty: hidden; display: none;}
.rpgzone :hover .rpghidden {visibilty: visible; display: block; position: absolute;}

.rpgbutton { style du bouton }
.rpghidden { style de la pop up }

demeter
demeter
(Membre)
http://altitudetropicale.forums-actifs.com/forum.htm
Merci Zeco. Voici ce que j'obtiens

effet slide du profil des membres sur sos forum Captur13

POur le css , il vient bien en remplacement du css initial ou en complément ?

Voici le template modifié
Spoiler:

Zeco
Zeco
Administrateur absent
http://digs.forumactif.com/forum
C'est en remplacement. Cependant, il y a encore quelques trucs à corriger, j'ai fait des erreurs.

A la place de ceci :
Code:
<spanclass="rpghidden">{postrow.displayed.POSTER_RPG}</span>

Mets plutôt :
Code:
<div class="rpghidden"><div class="rpgcontent">{postrow.displayed.POSTER_RPG}</div></div>

En dans le CSS, rempalce par ceci :
.rpgzone .rpghidden {visibilty: hidden; display: none;}
.rpgzone:hover .rpghidden {visibilty: visible; display: block; position: absolute; width: auto!important;}
.rpgcontent { position: relative; top: -150px; max-width: 250px; }

.rpgbutton { style du bouton }
.rpgcontent { style de la pop up }

demeter
demeter
(Membre)
http://altitudetropicale.forums-actifs.com/forum.htm
Zeco cheers tu es tout bonnement génial. J'ai juste remplacé absolute par relative et voila le résultat de ton superbe boulot.

effet slide du profil des membres sur sos forum Captur14


effet slide du profil des membres sur sos forum 309335 effet slide du profil des membres sur sos forum 309335 MERCI, MERCI,MERCI pour cette aide , pour ta patience et pour ce superbe résultat. Il est plus que certain que mes membres vont apprécier.

Zeco
Zeco
Administrateur absent
http://digs.forumactif.com/forum
D'accord, Ok, je suis content que tu l'aie arrangé comme tu le voulais. Smile

Contenu sponsorisé

Voir le sujet précédent Voir le sujet suivant Revenir en haut  Message [Page 1 sur 1]

SOS-FORUM » Entraide » Apparence & Structure » Archives » effet slide du profil des membres sur sos forum

Sujets similaires

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

 
  •  

Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit

Ne ratez plus aucun deal !
Abonnez-vous pour recevoir par notification une sélection des meilleurs deals chaque jour.
IgnorerAutoriser