Image de rang sous avatar
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Image de rang sous avatar
Détails techniques
Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : 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 : 02/04/2023
Lien du forum : https://royalemasquerade.forumactif.com
Description du problème
Bonjour,Je voudrais mettre sous mon avatar une image de rang. Malheureusement, cela ne s'affiche pas comme je le voudrais. L'image apparaît dans la fiche personnage mais c'est tout.
Je voudrais, si possible, que l'image soit placée sous l'avatar dans les messages de cette façon : https://zupimages.net/up/23/13/nkx2.jpg
Je vous remercie
Dernière édition par Argimpasa le Dim 2 Avr 2023 - 19:30, édité 1 fois
Re: Image de rang sous avatar
Bonjour,
Pouvez-vous fournir, entre balises code, le contenu de votre template viewtopic_body ?
Pouvez-vous fournir, entre balises code, le contenu de votre template viewtopic_body ?
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Image de rang sous avatar
Bonjour,
Vous le trouverez ci-dessous
Vous le trouverez ci-dessous
- Code:
<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){
if(typeof(_atc) == "undefined") {
_atc = { };
}
});
var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id) {
try {
var regId = parseInt(id, 10);
if( isNaN(regId) ) { regId = 0; }
if( regId > 0) {
$('.post--' + id).toggle(0, function() {
if( $(this).is(":visible") ) {
$('#hidden-title--' + id).html(hiddenMsgLabel.visible);
} else {
$('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
}
});
}
} catch(e) { }
return false;
};
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(window).ready(function(){
$('.header-message span').each(function() {
var color = $(this).css("color");
$(this).closest('.header-message').css('background-color', color);
});
});
//]]>
</script>
<div id="wrap-topic">
<div id="header-topic">
<a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
<a href="{U_INDEX}"><span>{L_INDEX}</span></a>
{NAV_CAT_DESC}
<script type="text/javascript">
//<![CDATA[
$('#header-topic').html($('#header-topic').html().replace(/\:\:/g,'|'));
//]]>
</script>
</div>
<div class="new-reply-topic">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authreply -->
</div>
<div class="topic-pagination">
<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
</div>
{POLL_DISPLAY}
<!-- BEGIN postrow -->
<!-- BEGIN displayed -->
<div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
<div class="header-message">
{postrow.displayed.POSTER_NAME}
{postrow.displayed.POSTER_RANK_NEW}
<div>
{postrow.displayed.QUOTE_IMG}
{postrow.displayed.EDIT_IMG}
{postrow.displayed.DELETE_IMG}
{postrow.displayed.IP_IMG}
</div>
</div>
<!-- BEGIN switch_vote_active -->
<div class="vote">
<!-- BEGIN switch_vote -->
<a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="ion-thumbsup"></a>
<!-- END switch_vote -->
<!-- BEGIN switch_vote -->
<a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="ion-thumbsdown"></a>
<!-- END switch_vote -->
<!-- BEGIN switch_bar -->
<div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
<div class="vote-bar-desc">
{postrow.displayed.switch_vote_active.L_VOTE_TITLE}
</div>
<div class="vote-bars">
<!-- BEGIN switch_vote_plus -->
<div class="vote-bar-plus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
<!-- END switch_vote_plus -->
<!-- BEGIN switch_vote_minus -->
<div class="vote-bar-minus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
<!-- END switch_vote_minus -->
</div>
</div>
<!-- END switch_bar -->
<!-- BEGIN switch_no_bar -->
<div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>
<!-- END switch_no_bar -->
</div>
<!-- END switch_vote_active -->
<div class="wrap-topic-content">
<div class="topic-content">
<a href="{postrow.displayed.POST_URL}"># {postrow.displayed.POST_SUBJECT}</a>
{postrow.displayed.POST_DATE_NEW}
<div>{postrow.displayed.MESSAGE}</div>
</div>
<div class="topic-avatar">
{postrow.displayed.POSTER_AVATAR}
<div>
<span class="title-profil">en bref</span>
<!-- BEGIN contact_field -->
{postrow.displayed.contact_field.CONTENT}
<!-- END contact_field --><br />
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL}
{postrow.displayed.profile_field.CONTENT}
{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
<br />
<span class="feuille-de-perso" id="feuilleperso">{postrow.displayed.POSTER_RPG}</span>
<script type="text/javascript">
//<![CDATA[
var profilrpg = document.getElementById("feuilleperso");
profilrpg.innerHTML = profilrpg.innerHTML
.replace(/(NomDeTon1erChamp)/g, '<span class="label">$1</span>')
.replace(/(NomDeTon2emeChamp)/g, '<span class="label">$1</span>')
.replace(/(NomDeTon3emeChamp)/g, '<span class="label">$1</span>');
profilrpg.removeAttribute("id");
//]]>
</script>
<div class="contact_link_p">
{postrow.displayed.PROFILE_IMG}
{postrow.displayed.PM_IMG}
</div>
</div>
</div>
<!-- BEGIN switch_signature -->
<div class="separation"></div>
<div class="signature-topic" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
<!-- END switch_signature -->
</div>
<!-- BEGIN first_post_br -->
<hr id="first-post-br" />
<!-- END first_post_br -->
<!-- END displayed -->
<!-- END postrow -->
<div class="new-reply-topic" style="height: 77px;">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authreply -->
</div>
<div class="topic-pagination" style="text-align: right; display: block;">
<div>
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
{S_WATCH_TOPIC}
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
</div>
<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
</div>
<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->
<!-- BEGIN viewtopic_bottom -->
<form method="get" action="{S_FORM_MOD_ACTION}" id="topic-form">
<fieldset class="quickmod">
<input type="hidden" name="t" value="{TOPIC_ID}" />
<!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
<input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
<label>{L_MOD_TOOLS}:</label>
{S_SELECT_MOD}
<input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>
<form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}" style="margin-left: auto;" id="topic-form">
<fieldset class="jumpbox">
<label>{L_JUMP_TO}:</label>
{S_JUMPBOX_SELECT}
<input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>
<!-- END viewtopic_bottom -->
<!-- BEGIN show_permissions -->
<div class="permissions">
<div class="h3">{L_TABS_PERMISSIONS}</div>
{S_AUTH_LIST}
</div>
<!-- END show_permissions -->
</div>
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github-gist.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script>
<script>
$(document).ready(function() {
$('pre, code').each(function(i, block) {
hljs.highlightBlock(block);
});
$('.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());
}
});
});
</script>
Re: Image de rang sous avatar
Est-ce que ceci règle le problème ?
J'ai rajouté {postrow.displayed.RANK_IMAGE} sous {postrow.displayed.POSTER_AVATAR}, comme ceci :
- Code:
<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){
if(typeof(_atc) == "undefined") {
_atc = { };
}
});
var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id) {
try {
var regId = parseInt(id, 10);
if( isNaN(regId) ) { regId = 0; }
if( regId > 0) {
$('.post--' + id).toggle(0, function() {
if( $(this).is(":visible") ) {
$('#hidden-title--' + id).html(hiddenMsgLabel.visible);
} else {
$('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
}
});
}
} catch(e) { }
return false;
};
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(window).ready(function(){
$('.header-message span').each(function() {
var color = $(this).css("color");
$(this).closest('.header-message').css('background-color', color);
});
});
//]]>
</script>
<div id="wrap-topic">
<div id="header-topic">
<a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
<a href="{U_INDEX}"><span>{L_INDEX}</span></a>
{NAV_CAT_DESC}
<script type="text/javascript">
//<![CDATA[
$('#header-topic').html($('#header-topic').html().replace(/\:\:/g,'|'));
//]]>
</script>
</div>
<div class="new-reply-topic">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authreply -->
</div>
<div class="topic-pagination">
<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
</div>
{POLL_DISPLAY}
<!-- BEGIN postrow -->
<!-- BEGIN displayed -->
<div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
<div class="header-message">
{postrow.displayed.POSTER_NAME}
{postrow.displayed.POSTER_RANK_NEW}
<div>
{postrow.displayed.QUOTE_IMG}
{postrow.displayed.EDIT_IMG}
{postrow.displayed.DELETE_IMG}
{postrow.displayed.IP_IMG}
</div>
</div>
<!-- BEGIN switch_vote_active -->
<div class="vote">
<!-- BEGIN switch_vote -->
<a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="ion-thumbsup"></a>
<!-- END switch_vote -->
<!-- BEGIN switch_vote -->
<a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="ion-thumbsdown"></a>
<!-- END switch_vote -->
<!-- BEGIN switch_bar -->
<div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
<div class="vote-bar-desc">
{postrow.displayed.switch_vote_active.L_VOTE_TITLE}
</div>
<div class="vote-bars">
<!-- BEGIN switch_vote_plus -->
<div class="vote-bar-plus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
<!-- END switch_vote_plus -->
<!-- BEGIN switch_vote_minus -->
<div class="vote-bar-minus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
<!-- END switch_vote_minus -->
</div>
</div>
<!-- END switch_bar -->
<!-- BEGIN switch_no_bar -->
<div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>
<!-- END switch_no_bar -->
</div>
<!-- END switch_vote_active -->
<div class="wrap-topic-content">
<div class="topic-content">
<a href="{postrow.displayed.POST_URL}"># {postrow.displayed.POST_SUBJECT}</a>
{postrow.displayed.POST_DATE_NEW}
<div>{postrow.displayed.MESSAGE}</div>
</div>
<div class="topic-avatar">
{postrow.displayed.POSTER_AVATAR}<br />
{postrow.displayed.RANK_IMAGE}
<div>
<span class="title-profil">en bref</span>
<!-- BEGIN contact_field -->
{postrow.displayed.contact_field.CONTENT}
<!-- END contact_field --><br />
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL}
{postrow.displayed.profile_field.CONTENT}
{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
<br />
<span class="feuille-de-perso" id="feuilleperso">{postrow.displayed.POSTER_RPG}</span>
<script type="text/javascript">
//<![CDATA[
var profilrpg = document.getElementById("feuilleperso");
profilrpg.innerHTML = profilrpg.innerHTML
.replace(/(NomDeTon1erChamp)/g, '<span class="label">$1</span>')
.replace(/(NomDeTon2emeChamp)/g, '<span class="label">$1</span>')
.replace(/(NomDeTon3emeChamp)/g, '<span class="label">$1</span>');
profilrpg.removeAttribute("id");
//]]>
</script>
<div class="contact_link_p">
{postrow.displayed.PROFILE_IMG}
{postrow.displayed.PM_IMG}
</div>
</div>
</div>
<!-- BEGIN switch_signature -->
<div class="separation"></div>
<div class="signature-topic" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
<!-- END switch_signature -->
</div>
<!-- BEGIN first_post_br -->
<hr id="first-post-br" />
<!-- END first_post_br -->
<!-- END displayed -->
<!-- END postrow -->
<div class="new-reply-topic" style="height: 77px;">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authreply -->
</div>
<div class="topic-pagination" style="text-align: right; display: block;">
<div>
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
{S_WATCH_TOPIC}
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
</div>
<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
</div>
<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->
<!-- BEGIN viewtopic_bottom -->
<form method="get" action="{S_FORM_MOD_ACTION}" id="topic-form">
<fieldset class="quickmod">
<input type="hidden" name="t" value="{TOPIC_ID}" />
<!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
<input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
<label>{L_MOD_TOOLS}:</label>
{S_SELECT_MOD}
<input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>
<form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}" style="margin-left: auto;" id="topic-form">
<fieldset class="jumpbox">
<label>{L_JUMP_TO}:</label>
{S_JUMPBOX_SELECT}
<input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>
<!-- END viewtopic_bottom -->
<!-- BEGIN show_permissions -->
<div class="permissions">
<div class="h3">{L_TABS_PERMISSIONS}</div>
{S_AUTH_LIST}
</div>
<!-- END show_permissions -->
</div>
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github-gist.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script>
<script>
$(document).ready(function() {
$('pre, code').each(function(i, block) {
hljs.highlightBlock(block);
});
$('.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());
}
});
});
</script>
J'ai rajouté {postrow.displayed.RANK_IMAGE} sous {postrow.displayed.POSTER_AVATAR}, comme ceci :
<div class="topic-avatar">
{postrow.displayed.POSTER_AVATAR}<br />
{postrow.displayed.RANK_IMAGE}
<div>
<span class="title-profil">en bref</span>
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Image de rang sous avatar
Non, l'image n'apparaît toujours pas.
Re: Image de rang sous avatar
Bonjour,
Pour information, le template proposé par Lixir fonctionne bien sur mon forum de test: l'image du rang s'affiche sous l'avatar.
Mais il me semble que dans votre css, la hauteur du bloc du profil est limitée à celle de l'avatar, et celle du rang étant plus bas, elle est peut être juste non visible.
Et pour que les infos du profil coulissent seulement par dessus l'avatar et pas par dessus l'image du rang également, je pense que le plus simple sera d'ajouter une div.
Pourriez-vous fournir le code css de l'affichage des sujets s'il vous plait ?
Pour information, le template proposé par Lixir fonctionne bien sur mon forum de test: l'image du rang s'affiche sous l'avatar.
Mais il me semble que dans votre css, la hauteur du bloc du profil est limitée à celle de l'avatar, et celle du rang étant plus bas, elle est peut être juste non visible.
Et pour que les infos du profil coulissent seulement par dessus l'avatar et pas par dessus l'image du rang également, je pense que le plus simple sera d'ajouter une div.
Pourriez-vous fournir le code css de l'affichage des sujets s'il vous plait ?
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Image de rang sous avatar
D'accord, je suis vraiment désolée de vous ennuyer.
Voilà le CSS
Voilà le CSS
- Code:
* --------- AFFICHAGES MESSAGES (C) SUNHAE --------- */
#wrap-topic {
width: 800px;
margin: auto;
display: flex;
flex-flow: wrap;
}
#header-topic {
background-color: #f1f0f4;
width: 100%;
color: #c07c59;
font-size: 11px;
font-style: italic;
line-height: 27px;
height: 80px;
display: flex;
align-content: center;
flex-flow: wrap;
justify-content: center;
}
#header-topic .sousligne {
font: 11px 'Roboto', sans-serif;
font-style: italic;
padding: 0;
margin: 0;
text-transform: uppercase;
display: inline-block;
}
#header-topic a:not(:first-of-type) {
color: #c07c59;
font-family: 'Roboto', sans-serif;
font-weight: lighter;
text-transform: uppercase;
font-size: 11px;
letter-spacing: -0.5px;
}
#header-topic a:first-of-type {
color: #262929;
font-family: 'DM Serif Display', serif;
font-size: 23px;
text-transform: uppercase;
font-style: normal;
line-height: 30px;
width: 100%;
text-align: center;
}
.new-reply-topic,
.topic-pagination {
display: flex;
align-content: center;
flex-flow: wrap;
}
.topic-pagination,
#pagination_memberlist {
margin-left: auto;
text-transform: uppercase;
font-family: initial;
font: 11px 'Roboto', sans-serif;
letter-spacing: -1px;
color: transparent;
}
.topic-pagination>div,
#pagination_memberlist>div {
margin: 20px 0 5px;
}
.topic-pagination>div a,
#pagination_memberlist>div a {
color: #c07c59;
font-family: 'Roboto', sans-serif;
font-weight: lighter;
text-transform: lowercase;
font-style: italic;
letter-spacing: -0.5px;
}
.new-reply-topic a {
padding: 28px 17px 28px 25px;
}
.topic-pagination span strong,
#pagination_memberlist strong {
padding: 0 0 0 5px;
}
.topic-pagination span,
#pagination_memberlist span {
color: #262929;
}
.topic-pagination strong,
#pagination_memberlist strong {
color: #c07c59;
padding: 0 2px;
}
.topic-pagination .pag-img,
#pagination_memberlist .pag-img {
display: none;
}
.header-message {
width: 100%;
height: 86px;
display: flex;
flex-flow: wrap;
justify-content: flex-end;
align-content: center;
position: relative;
padding: 0 50px 0 0;
color: #f6f5f8;
font: 10px 'Roboto', sans-serif;
font-weight: lighter;
font-style: italic;
background-color: #262929;
}
.header-message div {
position: absolute;
left: 35px;
bottom: 22px;
}
.header-message span,
.header-message a[href*="/u"] {
width: 100%;
text-align: right;
}
.header-message span {
font: 20px 'DM Serif Display', serif;
font-style: normal;
margin-right: -20px;
}
.header-message span,
.header-message>a {
width: 100%;
}
.header-message strong {
color: #f6f5f8;
font-weight: 100;
}
.header-message>div img {
padding: 0 2px;
}
.wrap-topic-content {
background-color: #F1F0F4;
display: flex;
flex-flow: wrap;
justify-content: space-evenly;
width: 100%;
padding: 19px 0;
}
.topic-content {
width: 538px;
display: flex;
flex-flow: wrap;
justify-content: space-between;
align-content: flex-start;
padding-top: 6px;
}
.topic-content,
.topic-content>a {
color: #C3C3C3;
font: 10px 'Roboto', sans-serif;
font-weight: lighter;
font-style: italic;
}
.topic-content>div a {
font-weight: bold !important;
}
.topic-content>div {
color: #262929;
font-style: normal;
text-align: justify;
font-weight: normal;
font-size: 12px;
border-top: 1px solid #C3C3C3;
padding: 18px 0;
margin-top: 8px;
width: 100%;
}
.topic-content>div img {
max-width: 100%;
}
.topic-avatar {
border: 2px solid #F6F5F8;
overflow: hidden;
width: 200px;
height: 320px;
position: relative;
}
.topic-avatar>div img {
max-width: 100%;
}
.topic-avatar>a img {
width: 200px;
}
.topic-avatar>div {
position: absolute;
top: 396px;
background-color: #ffffffe0;
width: 200px;
height: 320px;
transition: all 1s;
padding: 5px 20px 10px;
font: 11px 'Roboto', sans-serif;
letter-spacing: -0.5px;
overflow-y: auto;
overflow-x: hidden;
}
.topic-avatar:hover>div {
top: 0;
}
.feuille-de-perso a[href*="/u"],
.title-profil {
font: 30px 'Hamilton', cursive;
color: #c07c59;
text-align: right;
display: block;
height: 32px;
text-transform: lowercase;
white-space: nowrap;
}
.topic-avatar .label {
text-transform: uppercase;
font-weight: bold;
line-height: 15px;
color: #262929
}
.topic-avatar>div .label span,
.feuille-de-perso {
color: #262929 !important;
}
.feuille-de-perso textarea {
min-width: 100%;
max-width: 100%;
display: block;
height: 50px;
background-color: #F6F5F8;
padding: 6px;
overflow: auto;
margin-bottom: 10px;
font-size: 10px;
text-align: justify;
line-height: 12px;
}
/*.feuille-de-perso br { display: none; }*/
.topic-avatar .contact_link_p {
position: sticky;
bottom: 5px;
margin: 10px -10px 0 0;
font-size: 0;
text-align: right;
}
.topic-avatar .contact_link_p a:first-child {
padding-right: 7px;
}
.separation {
width: 555px;
margin: auto;
height: 1px;
background-color: #C3C3C3;
margin: 15px 0 2px;
}
.signature-topic {
width: 100%;
max-height: 280px;
padding: 5px;
overflow: auto;
}
.signature-topic img {
max-width: 100%;
}
#wrap-topic a[name="quickreply"]+.h3 {
display: none;
}
#wrap-topic form#quick_reply {
width: 100%;
}
#wrap-topic .sceditor-container,
#wrap-topic .sceditor-container iframe,
#wrap-topic .sceditor-container textarea,
#wrap-topic .sceditor-toolbar {
background-color: #F1F0F4 !important;
width: 100% !important;
font-family: 'Roboto', sans-serif;
}
#wrap-topic #quick_reply #textarea_content {
box-shadow: none;
}
#wrap-topic #quick_reply #textarea_content+div input {
background-color: #ECEBF0;
box-shadow: none;
border-radius: 0;
font: 15px 'DM Serif Display', serif;
color: #c07c59;
text-transform: uppercase;
margin: 0px 10px 10px 10px;
height: 35px;
padding: 0 15px;
}
#topic-form label {
font-size: 0;
}
#topic-form select {
background-color: #F1F0F4;
border: none;
font-size: 10px;
padding: 3px 5px;
}
#topic-form fieldset {
margin: 55px 0 28px;
}
#topic-form input {
background-color: #ECEBF0;
box-shadow: none;
border-radius: 0;
font: 12px 'DM Serif Display', serif;
color: #c07c59;
text-transform: uppercase;
margin: 0 5px;
height: 21px;
padding: 0 5px;
}
/* Affichage du bloc des permissions */
.permissions {
width: 100%;
background-color: #F1F0F4;
padding: 20px 25px;
font: 11px 'Roboto', sans-serif;
}
.permissions a {
color: #c07c59;
}
.permissions .h3 {
border: none;
font: 13px 'DM Serif Display', serif;
text-transform: uppercase;
margin-bottom: 5px;
}
/** CITATION CODE SPOILER **/
blockquote,
dl.codebox {
margin: 0 0 20px;
background: none;
font: 12px 'Roboto', sans-serif;
padding: 0;
border: none;
}
blockquote {
padding: 10px 30px;
}
dl.codebox code,
.spoiler dd,
.hidecode {
background-color: #F6F5F8 !important;
padding: 10px 30px !important;
}
.hidecode dt,
dl.codebox::before,
blockquote::before {
display: none !important;
}
dl.codebox dt,
cite {
border: none;
color: #C38567;
font: 11px 'Roboto', sans-serif;
text-transform: uppercase;
margin: 5px 0 8px 11px;
font-weight: 500;
}
.spoiler dt {
margin-bottom: 3px !important;
}
dl.codebox code {
font-size: 12px;
}
/* --------- FIN AFFICHAGE MESSAGES --------- */
Re: Image de rang sous avatar
Essayez ceci :
J'ai ajouté le bloc "topic-profil" pour englober le "topic-avatar" ainsi que le nouveau "topic-rank"
- Code:
<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){
if(typeof(_atc) == "undefined") {
_atc = { };
}
});
var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id) {
try {
var regId = parseInt(id, 10);
if( isNaN(regId) ) { regId = 0; }
if( regId > 0) {
$('.post--' + id).toggle(0, function() {
if( $(this).is(":visible") ) {
$('#hidden-title--' + id).html(hiddenMsgLabel.visible);
} else {
$('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
}
});
}
} catch(e) { }
return false;
};
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(window).ready(function(){
$('.header-message span').each(function() {
var color = $(this).css("color");
$(this).closest('.header-message').css('background-color', color);
});
});
//]]>
</script>
<div id="wrap-topic">
<div id="header-topic">
<a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
<a href="{U_INDEX}"><span>{L_INDEX}</span></a>
{NAV_CAT_DESC}
<script type="text/javascript">
//<![CDATA[
$('#header-topic').html($('#header-topic').html().replace(/\:\:/g,'|'));
//]]>
</script>
</div>
<div class="new-reply-topic">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authreply -->
</div>
<div class="topic-pagination">
<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
</div>
{POLL_DISPLAY}
<!-- BEGIN postrow -->
<!-- BEGIN displayed -->
<div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
<div class="header-message">
{postrow.displayed.POSTER_NAME}
{postrow.displayed.POSTER_RANK_NEW}
<div>
{postrow.displayed.QUOTE_IMG}
{postrow.displayed.EDIT_IMG}
{postrow.displayed.DELETE_IMG}
{postrow.displayed.IP_IMG}
</div>
</div>
<!-- BEGIN switch_vote_active -->
<div class="vote">
<!-- BEGIN switch_vote -->
<a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="ion-thumbsup"></a>
<!-- END switch_vote -->
<!-- BEGIN switch_vote -->
<a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="ion-thumbsdown"></a>
<!-- END switch_vote -->
<!-- BEGIN switch_bar -->
<div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
<div class="vote-bar-desc">
{postrow.displayed.switch_vote_active.L_VOTE_TITLE}
</div>
<div class="vote-bars">
<!-- BEGIN switch_vote_plus -->
<div class="vote-bar-plus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
<!-- END switch_vote_plus -->
<!-- BEGIN switch_vote_minus -->
<div class="vote-bar-minus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
<!-- END switch_vote_minus -->
</div>
</div>
<!-- END switch_bar -->
<!-- BEGIN switch_no_bar -->
<div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>
<!-- END switch_no_bar -->
</div>
<!-- END switch_vote_active -->
<div class="wrap-topic-content">
<div class="topic-content">
<a href="{postrow.displayed.POST_URL}"># {postrow.displayed.POST_SUBJECT}</a>
{postrow.displayed.POST_DATE_NEW}
<div>{postrow.displayed.MESSAGE}</div>
</div>
<div class="topic-profil">
<div class="topic-avatar">
{postrow.displayed.POSTER_AVATAR}
<div>
<span class="title-profil">en bref</span>
<!-- BEGIN contact_field -->
{postrow.displayed.contact_field.CONTENT}
<!-- END contact_field --><br />
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL}
{postrow.displayed.profile_field.CONTENT}
{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
<br />
<span class="feuille-de-perso" id="feuilleperso">{postrow.displayed.POSTER_RPG}</span>
<script type="text/javascript">
//<![CDATA[
var profilrpg = document.getElementById("feuilleperso");
profilrpg.innerHTML = profilrpg.innerHTML
.replace(/(NomDeTon1erChamp)/g, '<span class="label">$1</span>')
.replace(/(NomDeTon2emeChamp)/g, '<span class="label">$1</span>')
.replace(/(NomDeTon3emeChamp)/g, '<span class="label">$1</span>');
profilrpg.removeAttribute("id");
//]]>
</script>
<div class="contact_link_p">
{postrow.displayed.PROFILE_IMG}
{postrow.displayed.PM_IMG}
</div>
</div>
</div>
<div class="topic-rank">{postrow.displayed.RANK_IMAGE}</div>
</div>
<!-- BEGIN switch_signature -->
<div class="separation"></div>
<div class="signature-topic" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
<!-- END switch_signature -->
</div>
<!-- BEGIN first_post_br -->
<hr id="first-post-br" />
<!-- END first_post_br -->
<!-- END displayed -->
<!-- END postrow -->
<div class="new-reply-topic" style="height: 77px;">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authreply -->
</div>
<div class="topic-pagination" style="text-align: right; display: block;">
<div>
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
{S_WATCH_TOPIC}
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
</div>
<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
</div>
<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->
<!-- BEGIN viewtopic_bottom -->
<form method="get" action="{S_FORM_MOD_ACTION}" id="topic-form">
<fieldset class="quickmod">
<input type="hidden" name="t" value="{TOPIC_ID}" />
<!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
<input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
<label>{L_MOD_TOOLS}:</label>
{S_SELECT_MOD}
<input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>
<form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}" style="margin-left: auto;" id="topic-form">
<fieldset class="jumpbox">
<label>{L_JUMP_TO}:</label>
{S_JUMPBOX_SELECT}
<input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>
<!-- END viewtopic_bottom -->
<!-- BEGIN show_permissions -->
<div class="permissions">
<div class="h3">{L_TABS_PERMISSIONS}</div>
{S_AUTH_LIST}
</div>
<!-- END show_permissions -->
</div>
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github-gist.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script>
<script>
$(document).ready(function() {
$('pre, code').each(function(i, block) {
hljs.highlightBlock(block);
});
$('.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());
}
});
});
</script>
J'ai ajouté le bloc "topic-profil" pour englober le "topic-avatar" ainsi que le nouveau "topic-rank"
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Image de rang sous avatar
Du coup ça fonctionne. Je vous remercie
Sujets similaires
» Rang et image de rang sous l'avatar
» Image du rang sous l'avatar
» Image de rang seule sous l'avatar
» mettre le rang (et son image ) sous l'avatar
» Rang et pseudo sous l'avatar.
» Image du rang sous l'avatar
» Image de rang seule sous l'avatar
» mettre le rang (et son image ) sous l'avatar
» Rang et pseudo sous l'avatar.
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum