Avatar auteur blog
2 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
Avatar auteur blog
Bonjour.
Je suis nouvelle sur le forum, j'espère ne pas me tromper d'endroit où poster.
Je cherche à savoir s'il serait possible d'insérer l'avatar de l'auteur d'un blog dans la liste des blogs. Je voudrais qu'il soit positionné juste à gauche du titre du blog (là où se trouve normalement l'icône du calendrier que j'ai retiré du template de mon forum).
Merci d'avance pour vos réponses.
Je suis nouvelle sur le forum, j'espère ne pas me tromper d'endroit où poster.
Je cherche à savoir s'il serait possible d'insérer l'avatar de l'auteur d'un blog dans la liste des blogs. Je voudrais qu'il soit positionné juste à gauche du titre du blog (là où se trouve normalement l'icône du calendrier que j'ai retiré du template de mon forum).
- Spoiler:
Merci d'avance pour vos réponses.
Dernière édition par Kumo le Jeu 17 Mar 2016 - 13:16, édité 1 fois
Re: Avatar auteur blog
Up.
Si vous avez ne serait-ce qu'une piste pour le code je suis preneuse, je pense trouver où le placer après
Si vous avez ne serait-ce qu'une piste pour le code je suis preneuse, je pense trouver où le placer après
Re: Avatar auteur blog
Up.
Est ce que c'est seulement possible selon vous ?
Est ce que c'est seulement possible selon vous ?
Re: Avatar auteur blog
Coucou
Comme tu as modifié le template, tu pourrais nous le montrer stp ?
Comme tu as modifié le template, tu pourrais nous le montrer stp ?
Re: Avatar auteur blog
Bonjour Miettes !
Alors voici mon template topics_blog_box:
Alors voici mon template topics_blog_box:
- Code:
<!-- BEGIN topics_blog_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
<!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_blog_box.row.header_table.BOX_ID}()
{
alert('MAIN');
var all_checked = true;
for (i = 0; (i < document.{topics_blog_box.FORMNAME}.elements.length) && all_checked; i++)
{
if (document.{topics_blog_box.FORMNAME}.elements[i].name == '{topics_blog_box.FIELDNAME}[]{topics_blog_box.row.header_table.BOX_ID}')
{
all_checked = document.{topics_blog_box.FORMNAME}.elements[i].checked;
}
}
document.{topics_blog_box.FORMNAME}.all_mark_{topics_blog_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_blog_box.row.header_table.BOX_ID}()
{
alert('ALL');
for (i = 0; i < document.{topics_blog_box.FORMNAME}.length; i++)
{
if (document.{topics_blog_box.FORMNAME}.elements[i].name == '{topics_blog_box.FIELDNAME}[]{topics_blog_box.row.header_table.BOX_ID}')
{
document.{topics_blog_box.FORMNAME}.elements[i].checked = document.{topics_blog_box.FORMNAME}.all_mark_{topics_blog_box.row.header_table.BOX_ID}.checked;
}
}
}
</script>
<!-- END multi_selection -->
<div class="forumbg announcement">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist topics">
<li class="header">
<dl class="icon">
<dt>
<!-- BEGIN multi_selection -->
<input onclick="check_uncheck_all_{topics_blog_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_blog_box.row.header_table.BOX_ID}" value="0" />
<!-- END multi_selection -->
<div class="Sujets {topics_blog_box.row.L_TITLE}" sytle="display: none;">
</dt>
</dl>
</li>
</ul>
<ul class="topiclist topics bg_none">
<!-- END header_table -->
<!-- BEGIN header_row -->
<strong>{topics_blog_box.row.L_TITLE}</strong>
<!-- END header_row -->
<!-- BEGIN topic -->
<!-- BEGIN table_sticky -->
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
<div class="forumbg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist topics">
<li class="header">
<dl class="icon">
<dd class="dterm" style="padding-left:0">
<!-- BEGIN multi_selection -->
<input onclick="check_uncheck_all_{topics_blog_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_blog_box.row.header_table.BOX_ID}" value="0" />
<!-- END multi_selection -->
{topics_blog_box.row.topic.table_sticky.L_TITLE}
</dd>
</dl>
</li>
</ul>
<ul class="topiclist topics bg_none">
<!-- END table_sticky -->
<li class="row {topics_blog_box.row.ROW_ALT_CLASS}" style="margin-top:<!-- BEGIN line_sticky -->5px<!-- END line_sticky --> ;">
<dl class="blog icon" style="background-image:url('{topics_blog_box.row.TOPIC_FOLDER_IMG}')">
<dd class="blog dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}" {topics_blog_box.row.ICON}>
<!-- BEGIN single_selection -->
<input type="radio" name="{topics_blog_box.FIELDNAME}" value="{topics_blog_box.row.FID}" {topics_blog_box.row.L_SELECT} />
<!-- END single_selection -->
<div class="blog_cal-border" style="display: none;">
<div class="blog_cal-content">
<span class="blog_cal-{topics_blog_box.row.FIRST_POST_DMY_CLASS0}">{topics_blog_box.row.FIRST_POST_DMY_VALUE0}</span>
<span class="blog_cal-{topics_blog_box.row.FIRST_POST_DMY_CLASS1}">{topics_blog_box.row.FIRST_POST_DMY_VALUE1}</span>
<span class="blog_cal-{topics_blog_box.row.FIRST_POST_DMY_CLASS2}">{topics_blog_box.row.FIRST_POST_DMY_VALUE2}</span>
</div>
</div>
<div class="blog_title">
{topics_blog_box.row.NEWEST_POST_IMG}
{topics_blog_box.row.PARTICIPATE_POST_IMG}
{topics_blog_box.row.TOPIC_TYPE}
<div class="topic-title-container">
<h2 class="topic-title hierarchy"><a class="topictitle" href="{topics_blog_box.row.U_VIEW_TOPIC}">{topics_blog_box.row.TOPIC_TITLE}</a></h2>
</div>
<!-- BEGIN switch_description -->
<span class="genmed">
<br />
{topics_blog_box.row.topic.switch_description.TOPIC_DESCRIPTION}
</span>
<!-- END switch_description -->
</div>
<div class="clear"></div>
<div class="blog_message">
{topics_blog_box.row.FIRST_POST_TEXT}
</div>
<br />
<!-- BEGIN nav_tree -->{topics_blog_box.row.TOPIC_NAV_TREE_NEW}<!-- END nav_tree -->
<div class="blog_comments">
<span class="span-tab">{topics_blog_box.row.L_BY} <strong>{topics_blog_box.row.TOPIC_AUTHOR}</strong> -
<a href="{topics_blog_box.row.U_VIEW_TOPIC}#comments">{L_COMMENTS}</a>: {topics_blog_box.row.REPLIES} -
{L_VIEWS}: {topics_blog_box.row.VIEWS}</span>
</div>
</dd>
<!-- BEGIN multi_selection -->
<input onclick="check_uncheck_main_{topics_blog_box.row.BOX_ID}();" type="checkbox" name="{topics_blog_box.FIELDNAME}[]{topics_blog_box.row.BOX_ID}" value="{topics_blog_box.row.FID}" {topics_blog_box.row.L_SELECT} />
<!-- END multi_selection -->
</dl>
</li>
<!-- END topic -->
<!-- BEGIN no_topics -->
<li class="row row1">
<dl>
<dt><strong>{topics_blog_box.row.L_NO_TOPICS}</strong></dt>
</dl>
</li>
<!-- END no_topics -->
<!-- BEGIN bottom -->
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_blog_box -->
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.blog_message', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
Re: Avatar auteur blog
Coucou
J'ai donc la solution. Dans le template, on va ajouter un élement html "receptacle" de l'avatar.
On va remplacer ça :
Ensuite, on va ajouter du javascript pour récupérer l'avatar du posteur :
Et enfin, j'ai ajouté un peu de CSS à adapter selon tes besoins
J'ai donc la solution. Dans le template, on va ajouter un élement html "receptacle" de l'avatar.
On va remplacer ça :
- Code:
<div class="blog_title">
{topics_blog_box.row.NEWEST_POST_IMG}
{topics_blog_box.row.PARTICIPATE_POST_IMG}
{topics_blog_box.row.TOPIC_TYPE}
<div class="topic-title-container">
<h2 class="topic-title hierarchy"><a class="topictitle" href="{topics_blog_box.row.U_VIEW_TOPIC}">{topics_blog_box.row.TOPIC_TITLE}</a></h2>
</div>
<!-- BEGIN switch_description -->
<span class="genmed">
<br />
{topics_blog_box.row.topic.switch_description.TOPIC_DESCRIPTION}
</span>
<!-- END switch_description -->
</div>
- Code:
<div class="blog_title">
{topics_blog_box.row.NEWEST_POST_IMG}
{topics_blog_box.row.PARTICIPATE_POST_IMG}
{topics_blog_box.row.TOPIC_TYPE}
<figure class="posteur-avatar"></figure>
<div class="topic-title-container">
<h2 class="topic-title hierarchy"><a class="topictitle" href="{topics_blog_box.row.U_VIEW_TOPIC}">{topics_blog_box.row.TOPIC_TITLE}</a></h2>
</div>
<!-- BEGIN switch_description -->
<span class="genmed">
<br />
{topics_blog_box.row.topic.switch_description.TOPIC_DESCRIPTION}
</span>
<!-- END switch_description -->
</div>
Ensuite, on va ajouter du javascript pour récupérer l'avatar du posteur :
- Code:
$(function () {
// On parcourt chaque blog pour récupérer le lien vers le profil du posteur
$('.blog_comments .span-tab > strong:first-child a').each( function(){
var receptacle = $(this).parents('.blog').find('.blog_title .posteur-avatar')
, link = $(this).attr('href')
, recup_info = document.createElement('div')
, url_avatar ;
// On va sur le profil du membre pour récupérer l'avatar
$(recup_info).load(''+ link +' #profile-advanced-right .module .h3 + div > img:first-child', function(){
url_avatar = this.innerHTML;
// On ajoute l'avatar dans notre balise "réceptacle"
receptacle.html(url_avatar);
});
});
});
Et enfin, j'ai ajouté un peu de CSS à adapter selon tes besoins
- Code:
.blog .blog_title .posteur-avatar,
.blog .blog_title .topic-title-container{
display: inline-block;
}
.blog .blog_title .posteur-avatar img{
height: 50px;
display: block;
}
Re: Avatar auteur blog
Merci beaucoup de m'aider !
Après avoir suivie toutes les instructions, aucune modification.
Dans le doute voilà mon CSS:
J'ai bien publié les modifs du template et appliqué le javascript sur toutes les pages.
Après avoir suivie toutes les instructions, aucune modification.
Dans le doute voilà mon CSS:
- Code:
/***Pied de page***/
#page-footer ul.linklist li.rightside { float:none; }
ul.linklist li.footer-home { float:none; }
ul.linklist li.footer-home:after { content:" | "; }
#page-footer, div.navbar, div.navbar ul.linklist {text-align:center;}
.bouhautbas {
bottom: 10px;
right: 5px;
position: fixed;
z-index: 100;
}
/***NavBar***/
.navbar ul{ border-bottom:none; }
#search-box{ display:none; }
.topic-actions .search-box { display:none }
.header { text-align: center!important; font-size: 10pt; }
/***Redimension des images***/
div.postbody img { max-width: 800px; max-height: 1000px; }
/***Colonne profil***/
.postprofile { width:210px; }
.postprofile strong a { font-size:13px; }
.postprofile img { margin-bottom: 5px; }
/***Corps des sujets***/
.postbody
{
clear: both;
background-color: #ffffff;
float: right;
line-height: 1.48em;
padding-top: 20pt;
padding-right: 8pt;
padding-bottom: 20pt;
padding-left: 8pt;
width: 78%;
}
.postbody img { vertical-align: bottom; }
.signature_div img { max-height:200px; }
.doublepost { border-top: 3px dotted #E4EFF5; margin-top: 25px; }
/***Marge entre post***/
div.post{ margin: 10px; padding-top: 6px; }
/***Chatbox***/
.chatbox_row_1,
.chatbox_row_2,
.chatbox_row_3,
.chatbox_row_1 a,
.chatbox_row_2 a,
.chatbox_row_3 a { background-color: #ffffff; }
#chatbox_members .cb-avatar > img { height:30px; width:30px; vertical-align: middle; }
/***Boutons***/
a.button1,
input.button1,
a.button2,
input.button2,
button.button2 { font-size: 8.5pt }
/***Blog***/
.blog_message {display: none}
.blog .blog_title .posteur-avatar,
.blog .blog_title .topic-title-container{
display: inline-block;
}
.blog .blog_title .posteur-avatar img{
height: 50px;
display: block;
}
/***Index***/
dd.posts, dd.topics, dd.views { display: none!important; }
.forabg dd.dterm { width: 80%! important; }
.forabg dd.lastpost { width: 17%! important; }
span.color-groups {float:none!important;}
.lastpost {text-align:center!important;}
.lastpost span {display:inherit!important;}
J'ai bien publié les modifs du template et appliqué le javascript sur toutes les pages.
Re: Avatar auteur blog
Tu aurais un compte de test à me passer ? Je pense que c'est ici que ça pose souci dans le javacript :
En fait, il faut qu'on arrive à cibler ce qui correspond à l'avatar dans le profil. Mais là, j'ai l'impression qu'on ne le trouve pas
- Code:
$(recup_info).load(''+ link +' #profile-advanced-right .module .h3 + div > img:first-child', function(){
En fait, il faut qu'on arrive à cibler ce qui correspond à l'avatar dans le profil. Mais là, j'ai l'impression qu'on ne le trouve pas
Re: Avatar auteur blog
Je t'envoie ça par mp ^^
Re: Avatar auteur blog
Ah donc effectivement, c'est bien ça le problème
J'ai regardé avec une mauvaise version. Voici le bon js :
(je te laisse le modifier dans ton pa ^^ J'avais juste besoin de voir la page )
J'ai regardé avec une mauvaise version. Voici le bon js :
- Code:
$(function () {
// On parcourt chaque blog pour récupérer le lien vers le profil du posteur
$('.blog_comments .span-tab > strong:first-child a').each( function(){
var receptacle = $(this).parents('.blog').find('.blog_title .posteur-avatar')
, link = $(this).attr('href')
, recup_info = document.createElement('div')
, url_avatar ;
// On va sur le profil du membre pour récupérer l'avatar
$(recup_info).load(''+ link +' .column1 .h3 + .left-box.details > dd > img', function(){
url_avatar = this.innerHTML;
// On ajoute l'avatar dans notre balise "réceptacle"
receptacle.html(url_avatar);
});
});
});
(je te laisse le modifier dans ton pa ^^ J'avais juste besoin de voir la page )
Re: Avatar auteur blog
Ca marche \o/ merci énormément à toi, je met le sujet comme résolu !
Sujets similaires
» L'avatar à coté de l'auteur
» Bug colonne auteur, caractères sous avatar en couleurs !!!
» Taille de l'avatar de l'auteur du message
» Avatar et nom de l'auteur qui ne restent pas en haut du message
» Nouveauté "Avatar du dernier posteur dans les derniers messages''.. réduire la grosseur de l'avatar...
» Bug colonne auteur, caractères sous avatar en couleurs !!!
» Taille de l'avatar de l'auteur du message
» Avatar et nom de l'auteur qui ne restent pas en haut du message
» Nouveauté "Avatar du dernier posteur dans les derniers messages''.. réduire la grosseur de 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