Affichage info membre sur le haut

[Ejayremy]

Bonjour à tous,

Désolé pour le titre bizarre lais je n'en ai pas trouvé d'autres ...
Ma question est donc de savoir comment faire afficher au dessus du messages de topic les informations membres sur les topic qui sont actuellement à droite ou à gauche selon les préférences de l'admin. Comme maintenant sur PHPBB3 les modifications de template sont autorisés et disponibles, il doit bien y avoir moyen de mettre en forme comme je souhaite faire ici.

J'aimerais bien que l'avatar et les diverses informations (ville, date de naissance, etc.) soient affiché au dessus de la zone de texte plutôt que sur la droite comme cela :

Merci à vous.

[Ejayremy]

UP

[demeter1]

Bonjour Ejayremy,
Vois si quelque chose de ce style te conviendrait

Sans sondage
http://crevettes-passion.forumgratuit.org/t1-abusus-enim-multitudine-hominum-quam-tranquillis-in-rebus-diutius-rexi#1

et lorsqu'un sondage est en cours
http://crevettes-passion.forumgratuit.org/t2-abusus-enim-multitudine-hominum-quam-tranquillis-in-rebus-diutius-rexit

Tout est paramétré en css donc pas de bidouillage improbable à faire dans les templates.

Si tu sais te servir des outils d'analyse de ton navigateur, tu pourras paramétrer les choses à ta convenance.

[demeter1]

Vu qu'il me faut partir, je te donne le css.

Code:


  body .post .postprofile dd + dd + dd{max-height: 88px;
overflow: auto;
margin-top: 0px;}

.postprofile {
  border: 1px solid #F5F3F3;
  border-bottom: 1px solid #B4B4B4;
  height: 99px;
  margin-left: -10px;
  margin-top: 19px;
  padding: 5px;
  position: absolute;
  width: 1000px;
  }
  .post {
  border: 1px solid #D0D2D3;
  }
  .post span.corners-top {
  display: none;
  }
  .postbody {
  width: 102%;
  margin-top: 130px;
  margin-right: -10px;
  }
  .postbody ul.profile-icons {
  margin-bottom: 2px;
  margin-right: 16px;
  margin-top: 19px;
  }

  .postbody .topic-title a {
    font: 11px Arial, Helvetica, sans-serif;
  font-weight: bold;
    position: relative;
    top: 20px!important;
    }
 
  p.author {
  background: #1F2F35 url(http://i.imgur.com/xkjbF.gif) repeat-x 0 -5px;
  color: #D5EAC2;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 11px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  margin-top: -150px!important;
  padding: 5px;
  position: absolute;
  width: 968px;
  }
  .postbody .content {
  margin: 10px;
  min-height: 100px;
  }
 
  .postprofile dd + dd + dd {
  float: right;
  margin-right: 10px;
  margin-top: -15px;
  }
  .postprofile dt strong a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  margin-left: 120px;
  position: absolute!important;
  top: 5px;
  }
  .postprofile dd + dd + dd + dd + dd {
  right: 0px;
  display: block;
  position: absolute!important;
  bottom: 5px;
  margin-right: 10px;}

  .postprofile dl dt a img {
  border: 1px solid #474747;
  box-shadow: 0 0 4px black;
  height: 90px;
  width: 90px;
  }
  .postprofile dl dd {
  float: left;
  padding-left: 20px;
  padding-top: 15px;
  }
  .postprofile dl dt {
  float: left;
  }
 
  .postprofile dt img {
  max-width: 90px;
  max-height: 90px;
  }
  .panel .postprofile {
  margin-top: 3px;
  }
  .postprofile dt img, .postprofile dd img {
  max-width: 90px;
  max-height: 90px;
  float: left;
  }
  .postprofile dt a {
  float: right;
  }
  .panel {
  margin-top: 15px;
  background: #F0F0F0;
  border: 1px solid #D0D2D3;}
 

[Ejayremy]

Merci, c'est déjà pas mal mais la largeur déborde.
Comment la mettre en "automatique" et le haut de couleur dépasse par "dessus". Comment modifier au mieux ?

Merci

[demeter1]

Bonjour ,
On va changer le déjà pas mal en parfait   

Le css qui régit cette partie c'est celui ci

Code:

p.author {
background: url("http://i.imgur.com/xkjbF.gif") 0px -5px repeat-x #1F2F35;
color: #D5EAC2;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 11px;
font-style: normal;
font-variant: normal;
font-weight: 400;
margin-top: -150px !important;
padding: 5px;
position: absolute;
width: 968px;
}

Pour modifier la taille, tu modifies le width
Pour modifier le positionnement, tu modifies le margin top. Le débordement était juste un petit effet de style voulu. Si à la limite tu souhaites retirer cette barre, tu supprimes le css associé.

[Ejayremy]

Un Grand merci à toi. Avec quelques modifications et personnalisation ça rends super bien.
Merci pour ton aide et explications.