- PêpêcheMascotte
- Messages : 4428
Mise en page du profil dans les messages (infos au survol de l'avatar)
Mer 30 Oct 2019 - 15:07
Toutes versions
Mise en page du profil dans les messages (infos au survol de l'avatar)
Bonjour
Dans ce LS, je te propose une mise en page de profil dans les messages ^^ Voici le rendu :
Ce LS est utilisable sur toutes les versions de forum.
Ce LS s'inspire fortement d'une commande.
Commençons par le plus simple : la feuille de style à déposer dans Panneau d'administration > Affichage > Images & couleurs > Couleurs > feuille de style CSS.
Celle-ci est commentée. Mais en cas de souci, n'hésite pas à venir nous poser des questions ^^
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.
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).
Je pars du template par défaut.
Remplacer :
Ne pas oublier de sauvegarder et publier.
Remplacer :
Ne pas oublier de sauvegarder et publier.
Remplacer :
Ne pas oublier de sauvegarder et publier.
Remplacer :
Ne pas oublier de sauvegarder et publier.
Remplacer :
Il faut également supprimer ce js dans le template
Ne pas oublier de sauvegarder et publier.
Remplacer :
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 : )
Dans ce LS, je te propose une mise en page de profil dans les messages ^^ Voici le rendu :
- Spoiler:
Ce LS est utilisable sur toutes les versions de forum.
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;
}
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).
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>
- 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>
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>
- 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>
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>
- 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>
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>
- 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>
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>
- 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());
}
});
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>
- 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>
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 : )
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum