Idea Les Râleuses sont absentes.. Idea
Le forum est en vacances mais toutes nos ressources restent disponibles. (En savoir +)

Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4860

Mise en page du profil dans les messages (infos au survol de l'avatar) Empty Mise en page du profil dans les messages (infos au survol de l'avatar)

le Mer 30 Oct 2019 - 15:07

Toutes versions

Mise en page du profil dans les messages (infos au survol de l'avatar)

Bonjour Smile

Dans ce LS, je te propose une mise en page de profil dans les messages ^^ Voici le rendu :
Spoiler:

- De base :
Mise en page du profil dans les messages (infos au survol de l'avatar) Rendu13

- Au survol de l'avatar :
Mise en page du profil dans les messages (infos au survol de l'avatar) Rendu-46

- Au clic sur "afficher les boutons de contact" :
Mise en page du profil dans les messages (infos au survol de l'avatar) Rendu-45

Idea Ce LS est utilisable sur toutes les versions de forum.

Idea Ce LS s'inspire fortement d'une commande.

Les codes

De la CSS

Commençons par le plus simple : la feuille de style à déposer dans Panneau d'administration > Affichage > Images & couleurs > Couleurs > feuille de style CSS.

Code:
/*********************************************/
/*            Dans les messages            */
/*            Mise en page posteur          */
/*            CODAGE :copyright:Miettes                */
/* http://tambouille-raleuses.forumactif.com */
/*********************************************/

/*** --- Pseudo --- ***/
.m-pseudo-posteur{
   background: #e7ceb5; /* couleur de fond du pseudo */
    border-color: #790000; /* couleur de la bordure du bloc pseudo */
    border-style: solid;
    border-width: 1px 4px;
    box-sizing: border-box;
    font-size: 1.1rem; /* Taille du pseudo */
    margin: 10px auto;
    padding: 10px;
    text-align: center;
    width: 80%;  
}

.m-pos-r-avatar{
   height: 320px; /* Hauteur de l'avatar */
   margin: 5px auto;
   position: relative;
   overflow: hidden;
   width: 200px; /* Largeur de l'avatar */
}

.m-pos-r-avatar .postprofile-avatar img{
   border: 0;
    border-radius: 0;
    box-shadow: inherit;
    height: 320px; /* Hauteur de l'avatar */
    width: 200px; /* Largeur de l'avatar */
}

/*** --- Bloc informations --- ***/
.m-pos-r-avatar  .m-infos-posteur{
   background: rgba(231, 206, 181, 0.8); /* Couleur de fond du bloc au survol de l'avatar en opacité à 80% */
   bottom: -100%;
   box-sizing: border-box;
   left: 1px;
   padding: 10px;
   position: absolute;
   right: 1px;
   top: 100%;
   transition: all linear 1s;
}

.m-pos-r-avatar:hover .m-infos-posteur{
   bottom: 1px;
   top: 1px;
   transition: all linear 1s;
}

.m-pos-r-avatar .m-infos-posteur:hover{
   bottom: 1px;
   top: 1px;
}

/*** Champs du profil ***/
.m-pos-r-avatar .m-infos-posteur .m-champ-profil{
   font-size: .7rem; /* Taille des textes des champs du profil au survol de l'avatar */
   margin: 5px auto;
   width: 90%;
}

.m-pos-r-avatar .m-infos-posteur .m-champ-profil .label{
   border-left: 2px solid #790000; /* Bordure à gauche des champs du profil */
   display:  block;
   font-size: 0;
   font-weight: bold;
   margin-bottom: 2px;
   padding-left: 4px; /* Espace entre la bordure et le texte */
}

.m-pos-r-avatar .m-infos-posteur .m-champ-profil .label > span{
   font-size: .8rem; /* Taille des intitulés des champs du profil */
}

.m-pos-r-avatar .m-infos-posteur .m-champ-profil,
.m-pos-r-avatar .m-infos-posteur .m-champ-profil .label > span{
   color: #790000 !important; /* Couleur de texte des champs du profil */
}

.m-pos-r-avatar .m-infos-posteur .m-champ-profil hr{
    border: 0 none #790000;
    border-top: 1px solid #790000; /* Couleur des barres de séparation horizontale des champs de profil */
    margin: 10px 0;
}

/*** Rangs ***/
.m-rang{
   color: #790000; /* Couleur du rang */
   font-size: .6rem; /* Taille du texte du rang */
   font-style: italic;
   text-align: center;
}

.m-rang img{
   display: block;
   margin: 5px auto;
}

/*** Contact ***/
.m-contact{
   margin: 10px auto;
   width: 80%;  
}

.m-contact .m-titre-contact{
   border-left: 2px solid #790000; /* Bordure à gauche du texte des boutons de contact */
   color: #790000; /* Couleur du texte des boutons de contact */
   cursor: pointer;
   font-size: .7rem; /* Taille du texte des boutons de contact */
   font-weight: bold;
   margin-bottom: 5px;
   padding-left: 4px; /* Espace entre la bordure et le texte */
}

.m-contact .m-titre-contact > span[data-visible="false"],
.m-contact.js-m-show .m-titre-contact > span[data-visible="true"]{
   display: none;
}

.m-contact.js-m-show .m-titre-contact > span[data-visible="false"],
.m-contact .m-titre-contact > span[data-visible="true"]{
   display: inline-block;
}

.m-contact .m-content-contact{
   background: rgba(231, 206, 181, 0.8); /* Couleur de fond du bloc des boutons en opacité à 80% */
   border: 1px solid #790000; /* Bordure du bloc des boutons */
   display: none;
   font-size: 0;
   padding: 4px;
}

Idea Celle-ci est commentée. Mais en cas de souci, n'hésite pas à venir nous poser des questions ^^

Du javascript

Pour dynamiquer la partie d'affichage/masquage des boutons de contact, il a fallu un peu de js. Pour cela, on va aller dans  Panneau d'administration > Modules > HTML & Javascript > Gestion des codes Javascript et on va mettre ce code dans un nouveau javascript qu'on ne va afficher que sur les sujets.

Code:
$(function(){

    $('body')
        // Au clic sur "Afficher/Masquer les boutons de contact"
        .on('click', '.m-contact .m-titre-contact', function(){
            // On change le texte
            $(this).parent().toggleClass('js-m-show');
            // On affiche ou masque les boutons
            $(this).next('.m-content-contact').slideToggle();
        });

});

Le template

Pour finir, il ne nous reste plus que le template a édité. Quelle que soit la version de ton forum, le template à modifier est viewtopic_body (Panneau d'administration > Affichage > Templates > Général).

Idea Je pars du template par défaut.

Forum en PhpBB2

Remplacer :
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="https://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
    </td>
par :
Code:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
      <div class="m-pseudo-posteur">
        {postrow.displayed.POSTER_NAME}
      </div>
      <div class="m-pos-r-avatar">
        {postrow.displayed.POSTER_AVATAR}
        <div class="m-infos-posteur">
            <!-- BEGIN profile_field -->
            <div class="m-champ-profil">
              {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            </div>
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}
        </div>
      </div>
      <div class="m-rang">
        {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
      </div>
      <div class="m-contact">
        <div class="m-titre-contact">
          <span data-visible="true">Afficher</span><span data-visible="false">Masquer</span> les boutons de contact
        </div>
        <div class="m-content-contact">
          {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>

Idea Ne pas oublier de sauvegarder et publier.

Forum en PhpBB3

Remplacer :
Code:
<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
 <!-- div class="online2"></div-->
 <dl>
 <dt>
 {postrow.displayed.POSTER_AVATAR}
 <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
 </dt>
 <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
 <dd><br /></dd>
 <dd>
 <!-- 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}
 </dd>
 <dd><br /></dd>
 <dd>
 {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
 </dd>
 </dl>
 </div>
par :
Code:
<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
        <!-- div class="online2"></div-->
        <div class="m-pseudo-posteur">
          {postrow.displayed.POSTER_NAME}
        </div>
        <div class="m-pos-r-avatar">
          {postrow.displayed.POSTER_AVATAR}
          <div class="m-infos-posteur">
              <!-- BEGIN profile_field -->
              <div class="m-champ-profil">
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
              </div>
              <!-- END profile_field -->
              {postrow.displayed.POSTER_RPG}
          </div>
        </div>
        <div class="m-rang">
          {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
        </div>
        <div class="m-contact">
          <div class="m-titre-contact">
            <span data-visible="true">Afficher</span><span data-visible="false">Masquer</span> les boutons de contact
          </div>
          <div class="m-content-contact">
             {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>
      </div>

Idea Ne pas oublier de sauvegarder et publier.

Forum en PunBB

Remplacer :
Code:
<div class="user">
              <div class="user-ident">
                <h4 class="username">{postrow.displayed.POSTER_NAME}</h4>
                <div class="user-basic-info">
                  {postrow.displayed.POSTER_AVATAR}<br />
                  {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
                </div>
              </div>
              <div class="user-info">
                {postrow.displayed.ONLINE_IMG}
                <!-- 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}
              </div>
            </div>
par :
Code:
<div class="postbody"{postrow.displayed.THANK_BGCOLOR}>
            <div class="user">
              <div class="m-pseudo-posteur">
                {postrow.displayed.POSTER_NAME}
              </div>
              <div class="m-pos-r-avatar">
                {postrow.displayed.POSTER_AVATAR}
                <div class="m-infos-posteur">
                    <!-- BEGIN profile_field -->
                    <div class="m-champ-profil">
                      {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                    </div>
                    <!-- END profile_field -->
                    {postrow.displayed.POSTER_RPG}
                </div>
              </div>
              <div class="m-rang">
                {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
              </div>
              <div class="m-contact">
                <div class="m-titre-contact">
                  <span data-visible="true">Afficher</span><span data-visible="false">Masquer</span> les boutons de contact
                </div>
                <div class="m-content-contact">
                  {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>
            </div>

Idea Ne pas oublier de sauvegarder et publier.

Forum en Invision

Remplacer :
Code:
<dl class="postprofile-details postdetails">
            <dt>
              {postrow.displayed.POSTER_AVATAR}<br />
              {postrow.displayed.POSTER_NAME}
            </dt>
            <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
            <dd><br /></dd>
            <dd>
              <!-- 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}
            </dd>
          </dl>
par :
Code:
<div class="postprofile-details postdetails">
            <div class="m-pseudo-posteur">
              {postrow.displayed.POSTER_NAME}
            </div>
            <div class="m-pos-r-avatar">
              {postrow.displayed.POSTER_AVATAR}
              <div class="m-infos-posteur">
                  <!-- BEGIN profile_field -->
                  <div class="m-champ-profil">
                    {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                  </div>
                  <!-- END profile_field -->
                  {postrow.displayed.POSTER_RPG}
              </div>
            </div>
            <div class="m-rang">
              {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
            </div>
            <div class="m-contact">
              <div class="m-titre-contact">
                <span data-visible="true">Afficher</span><span data-visible="false">Masquer</span> les boutons de contact
              </div>
              <div class="m-content-contact">
                {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>

Idea Ne pas oublier de sauvegarder et publier.

Forum en ModernBB

Remplacer :
Code:
<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
        <!-- div class="online2"></div-->
        <dl>
          <dt>
            <div class="postprofile-avatar">
              {postrow.displayed.POSTER_AVATAR}
            </div>
            <div class="postprofile-name">
              {postrow.displayed.POSTER_NAME}
            </div>
            <div class="postprofile-rank">
              {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
            </div>
          </dt>
          <dd class="postprofile-info">
            <!-- 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}
          </dd>
          <dd class="postprofile-contact">
            {postrow.displayed.PROFILE_IMG}
            {postrow.displayed.PM_IMG}
            {postrow.displayed.EMAIL_IMG}
            <!-- BEGIN contact_field -->
              {postrow.displayed.contact_field.CONTENT}
            <!-- END contact_field -->
          </dd>
        </dl>
      </div>
par :
Code:
<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
        <!-- div class="online2"></div-->
        <div class="m-pseudo-posteur">
          {postrow.displayed.POSTER_NAME}
        </div>
        <div class="m-pos-r-avatar">
          {postrow.displayed.POSTER_AVATAR}
          <div class="m-infos-posteur">
              <!-- BEGIN profile_field -->
              <div class="m-champ-profil">
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
              </div>
              <!-- END profile_field -->
              {postrow.displayed.POSTER_RPG}
          </div>
        </div>
        <div class="m-rang">
          {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
        </div>
        <div class="m-contact">
          <div class="m-titre-contact">
            <span data-visible="true">Afficher</span><span data-visible="false">Masquer</span> les boutons de contact
          </div>
          <div class="m-content-contact">
            {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>
      </div>

Il faut également supprimer ce js dans le template
Code:
$('.post').each(function() {
    if (!$(this).find('.postprofile-avatar').html().length) {
      $(this).find('.postprofile-rank').css('border-bottom', 'none');
      $(this).find('.postprofile > dl > dt').css('min-height', $(this).find('.post-head').innerHeight());
    }
  });

Idea Ne pas oublier de sauvegarder et publier.

Forum en AwesomeBB

Remplacer :
Code:
<aside class="post-aside">
                                <div class="post-author-status"></div>
                                <div class="post-author">
                                <span class="post-author-name">
                                  {postrow.displayed.POSTER_NAME}
                                </span>
                                                      <span class="post-author-title">
                                  {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
                                </span>
                                </div>
                                <div class="post-author-avatar">
                                    <div class="avatar-big">
                                        {postrow.displayed.POSTER_AVATAR}
                                    </div>
                                </div>
                                <dl class="post-author-details">
                                    <!-- BEGIN profile_field -->
                                    <dt>{postrow.displayed.profile_field.LABEL}</dt>
                                    <dd>{postrow.displayed.profile_field.CONTENT}</dd>
                                    <!-- END profile_field -->
                                </dl>
                                <div class="post-author-rpg">
                                    {postrow.displayed.POSTER_RPG}
                                </div>
                                <div class="post-author-contact dropdown">
                                    <i class="material-icons">keyboard_arrow_down</i>
                                    <div class="dropdown-box">
                                        {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>
                            </aside>
par :
Code:
<aside class="post-aside">
                                <div class="post-author-status"></div>
                                <div class="m-pseudo-posteur">
  {postrow.displayed.POSTER_NAME}
</div>
<div class="m-pos-r-avatar ">
  {postrow.displayed.POSTER_AVATAR}
  <div class="m-infos-posteur">
      <!-- BEGIN profile_field -->
      <div class="m-champ-profil">
        {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
      </div>
      <!-- END profile_field -->
      {postrow.displayed.POSTER_RPG}
  </div>
</div>
<div class="m-rang">
  {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
</div>
<div class="m-contact">
  <div class="m-titre-contact">
    <span data-visible="true">Afficher</span><span data-visible="false">Masquer</span> les boutons de contact
  </div>
  <div class="m-content-contact">
    {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>

                            </aside>

Idea Ne pas oublier de sauvegarder et publier.



   
Si tu te sers de ce code, merci de mettre un petit lien vers La Tambouille quelque part sur ton forum, pas trop caché, pour que tes membres puissent venir chercher de l'aide ou des codes par ici aussi : )

       

   

_________________
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Post-It des Râleuses