[PHPBB3] Mise en forme du widget derniers sujets

Coucou Roza,

pour avoir cet affichage,
il est impératif d'avoir des groupes avec des couleurs définies dans ton P.A.
Est-ce le cas ?

Bonsoir Phil.

J'ai bien des groupes de membres, en effet, avec une couleur spécifique appartenant à chacun, couleur attribuée aux pseudos du groupe.
Les groupes sont hiérarchisés => une couleur est donc dominante pour chaque pseudo qui appartient à plusieurs groupes.
Exemple : j’appartiens à tous les groupes, mais mon pseudo a la couleur dominante du groupe Admin.

Est-ce de cela dont tu veux parler ?

Mais, ce qui m'intéresse surtout, ce ne sont pas les couleurs différentes, mais plus simplement, la ligne/espace entre les sujets, le pseudo de l'auteur, la date et l'heure (conserver l'infobulle, bien sûr).

Bonne nuit.
@+

Coucou Roza,

Est-ce de cela dont tu veux parler ?
Mais, ce qui m'intéresse surtout, ce ne sont pas les couleurs différentes,

Vi et j'étais persuadé que tu voulais l'identique et j'avais anticipé sur le fofo de tests d’où l'importance de bien préciser lors de la demande tes souhaits exacts Roza.

Alors on va déjà écarter la date dans le bloc de droite avec une balise span afin d'être sur de récupérer cette valeur.

Dans le template search_results_topics:
Affichage/Templates/Général/search_results_topics

Recherches cette variable:

Code:

{searchresults.LAST_POST_TIME}

Remplaces par:

Code:

  <span class="M14_search_time">{searchresults.LAST_POST_TIME}</span>

Penses a enregistrer puis à valider en cliquant respectivement sur puis

Ensuite on va modifier le script afin d'insérer une div et non plus le lien du sujet:

Chaque lien, auteur et date sera entouré donc par une balise div ayant la class:

M14_ligne

On lui donne une hauteur:

Code:

/*CHAQUE LIGNE DU WIDGET*/
#M14_load_widget .M14_ligne
{
height:30px;
}

On garde donc la class topictitle pour chaque lien.
L'auteur et la date dans le script sont entourés par une balise span.
Donc la css sera ainsi:

Code:


/*LE PSEUDO ET LA DATE*/
#M14_load_widget .M14_ligne span
{
  font-size:10px;
}


Comme on donne une taille de police a 10 px
il faudra mettre l'équivalent sur la class topictitle.

Je te donne deux scripts:
Le premier sans les couleurs du groupe
Le deuxième avec les couleurs ( comme sur ce forum).


Sans couleur:

Code:

$(function(){
if(!_userdata["session_logged_in"])return;
$(function(){
var u=_userdata["user_id"];
if(u==1||u==4||u==5||u==6||u==10||u==11)
$('table.portal').each(function(){
//modifier le texte du titre ici
  var a="Titre du widget";
$(this).find('td.column').last().find('div.module').first().before('<div class="Widget_portail">
<div class="module"><div class="h3">'+a+'</div>
<div id="M14_load_widget"class="inner"></div></div></div>');
var $this=$('#M14_load_widget');
$.get('/latest' , function(data){
$(data).find('a.topictitle:lt(10)').each(function(){
var auteur=$(this).closest('li').find('.span-tab a[href^="/u"]').text();
var date=$(this).closest('li').find('dd.lastpost').find('.M14_search_time').text();
var link=$(this).attr('href');
var text=$(this).text();
  $this.append('<div class="M14_ligne"><a class="topictitle info" href="'+link+'" title="'+text+'">'+text+'</a><span>par '+auteur+'</span><span style="float:right;">'+date+'</span></div><hr/>');
$('.topictitle.info').tooltipster({
          animation : 'fade',
          arrow : true,
          speed : 300,
          delay : 300,
          onlyOne : true,
          theme : 'tooltipster-default'
}); 
});

});                                                               
}); 
})});


La css:

Code:

#M14_load_widget a.topictitle
{
display:list-item;
list-style:none;
 overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 max-width:98%; 
  font-size:10px;
}
/*CHAQUE LIGNE DU WIDGET*/
#M14_load_widget .M14_ligne
{
height:30px;
}
/*LE PSEUDO ET LA DATE*/
#M14_load_widget .M14_ligne span
{
  font-size:10px;
}

Avec couleur:

Code:

$(function(){
if(!_userdata["session_logged_in"])return;
$(function(){
var u=_userdata["user_id"];
if(u==1||u==4||u==5||u==6||u==10||u==11)
$('table.portal').each(function(){
//modifier le texte du titre ici
  var a="Titre du widget";
$(this).find('td.column').last().find('div.module').first().before('<div class="Widget_portail">
<div class="module"><div class="h3">'+a+'</div>
<div id="M14_load_widget"class="inner"></div></div></div>');
var $this=$('#M14_load_widget');
$.get('/latest' , function(data){
$(data).find('a.topictitle:lt(10)').each(function(){
var color=$(this).closest('li').find('.lastpost a[href^="/u"] span').css('color');
var auteur=$(this).closest('li').find('.span-tab a[href^="/u"]').text();
var date=$(this).closest('li').find('dd.lastpost').find('.M14_search_time').text();
var link=$(this).attr('href');
var text=$(this).text();
  $this.append('<div class="M14_ligne" style="color:'+color+'"><a class="topictitle info" href="'+link+'" title="'+text+'"style="color:'+color+'">'+text+'</a><span>par '+auteur+'</span><span style="float:right;">'+date+'</span></div><hr/>');
$('.topictitle.info').tooltipster({
          animation : 'fade',
          arrow : true,
          speed : 300,
          delay : 300,
          onlyOne : true,
          theme : 'tooltipster-default'
}); 
});

});                                                               
}); 
})});

La css est identique mais tu peux ajouter un background pour la div comme ceci:

Code:

/*CHAQUE LIGNE DU WIDGET*/
#M14_load_widget .M14_ligne
{
background:white;
height:30px;
}

Et voilou.

Bonjour Phil.
Merci beaucoup pour ta réactivité toujours égale à elle-même.

Je vais tester les deux solutions et je reviens vers toi pour les résultats.

Bonne journée à toi.
@+

De rien Roza,
j'avais un peu de temps devant moi ce matin .

A plus tard alors .

Re...

Merci pour tes explications ! Il faut que je note tout ça, afin d'y comprendre quelque chose dans ce langage de codage... C'est pas gagné!

J'ai donc testé les deux, avec ou sans couleurs.
C'est beaucoup plus aéré que la version première, il y a bien le lien/titre du sujet, un pseudo, la date et l'heure, la "belle" infobulle, la séparation. C'est

Je préfère la version sans les couleurs.
Par contre, si on pouvait avoir la couleur uniquement pour les pseudos, ce serait super, et ressemblerait davantage à la mise en forme qui existe dans le widget prédéfini.
Question PSEUDO, je préfèrerais avoir le pseudo de la personne qui a posté le dernier message (à la place du pseudo du créateur du sujet). Est-ce possible ?

Cependant, comme tu peux le constater "en direct", quelques soucis d'affichage :
- Le widget "Derniers sujets" est bien présent, en haut, à droite avec son titre, mais... il est vide.
- Les nouveaux sujets avec leur nouvelle et belle mise en forme, se sont "invités" dans le widget des MP, à gauche, à la suite de la liste des MP.
Encore merci Phil ! Que ferais-je sans toi ??? Probablement ceci...


Bonne journée et @+

Re Roza,

alors remplaces le script par celui-ci pour afficher la couleur seulement sur les pseudos et afficher le dernier posteur:

Code:

$(function(){
if(!_userdata["session_logged_in"])return;
$(function(){
var u=_userdata["user_id"];
if(u==1||u==4||u==5||u==6||u==10||u==11)
$('table.portal').each(function(){
//modifier le texte du titre ici
  var a="Titre du widget";
$(this).find('td.column').last().find('div.module').first().before('<div class="Widget_portail">
<div class="module"><div class="h3">'+a+'</div>
<div id="M14_load_widget"class="inner"></div></div></div>');
var $this=$('#M14_load_widget');
$.get('/latest' , function(data){
$(data).find('a.topictitle:lt(10)').each(function(){
var color=$(this).closest('li').find('.lastpost a[href^="/u"] span').css('color');
var auteur=$(this).closest('li').find('.lastpost a[href^="/u"]').text();
var date=$(this).closest('li').find('dd.lastpost').find('.M14_search_time').text();
var link=$(this).attr('href');
var text=$(this).text();
  $this.append('<div class="M14_ligne"><a class="topictitle info" href="'+link+'" title="'+text+'">'+text+'</a><span style="color:'+color+'">par '+auteur+'</span><span style="float:right;">'+date+'</span></div><hr/>');
$('.topictitle.info').tooltipster({
          animation : 'fade',
          arrow : true,
          speed : 300,
          delay : 300,
          onlyOne : true,
          theme : 'tooltipster-default'
}); 
});

});                                                               
}); 
})});


Pour le reste , je ne sais pas ce que tu as fais depuis alors , je ne peux te répondre Roza.

Re...

Phil a écrit:Pour le reste , je ne sais pas ce que tu as fais depuis alors , je ne peux te répondre Roza.

Ce que j'ai fait ???
En tout cas, des bêtises c'est sûr    puisque maintenant, tout est rentré dans l'ordre !!!

Le widget "derniers sujets" est en bonne place avec ses sujets.
J'ai bien les pseudos voulus, en couleurs.
Juste encore un petit détail : pourraient-ils être écrits en gras ?

Questions subsidiaire : peut-on faire la même mise en forme pour le Widget MPs ?
Mais, il est peut-être préférable que j'ouvre un autre sujet pour ce dernier point ?

et à toi !

Rhooooooo Roza,
mentionnes le dès le départ s'il te plait, je ne suis pas devin!!

Alors pour être en gras, remplaces le script par celui-ci:

Code:

$(function(){
if(!_userdata["session_logged_in"])return;
$(function(){
var u=_userdata["user_id"];
if(u==1||u==4||u==5||u==6||u==10||u==11)
$('table.portal').each(function(){
//modifier le texte du titre ici
  var a="Titre du widget";
$(this).find('td.column').last().find('div.module').first().before('<div class="Widget_portail">
<div class="module"><div class="h3">'+a+'</div>
<div id="M14_load_widget"class="inner"></div></div></div>');
var $this=$('#M14_load_widget');
$.get('/latest' , function(data){
$(data).find('a.topictitle:lt(10)').each(function(){
var color=$(this).closest('li').find('.lastpost a[href^="/u"] span').css('color');
var auteur=$(this).closest('li').find('.lastpost a[href^="/u"]').text();
var date=$(this).closest('li').find('dd.lastpost').find('.M14_search_time').text();
var link=$(this).attr('href');
var text=$(this).text();
  $this.append('<div class="M14_ligne"><a class="topictitle info" href="'+link+'" title="'+text+'">'+text+'</a><span style="color:'+color+';font-weight:bold;">par '+auteur+'</span><span style="float:right;">'+date+'</span></div><hr/>');
$('.topictitle.info').tooltipster({
          animation : 'fade',
          arrow : true,
          speed : 300,
          delay : 300,
          onlyOne : true,
          theme : 'tooltipster-default'
}); 
});

});                                                               
}); 
})});

Pour le MP, oui je préfère chère ami en fonction du titre de ton sujet, c'est préférable pour d'éventuelles recherches

Re...

Tu n'es pas devin ?
Ah bon, j'aurais cru... dommage !!!

OK pour les pseudos en gras. C'est bon  
Encore une chose et après, je ne t'embête plus... promis !!!

Je viens de remarquer qu'ici, sur ce forum, les liens (Widget derniers sujets) pointent sur le dernier message qui a été posté dans le sujet concerné.
Ce n'est pas les cas, pour les miens : ils pointent sur le premier message du sujet.
Est-ce modifiable ???

Bonne soirée.

Coucou Roza,

Encore une chose et après, je ne t'embête plus... promis !!!

Tu ne m'embêtes pas Roza,
c'est que surtout j'ai une sainte horreur de perdre mon temps et revenir sur des trucs tout simplement.
Lorsque tu as un projet il faut le mettre en place avant et ensuite, c'est à moi de bosser   .

Je viens de remarquer qu'ici, sur ce forum, les liens (Widget derniers sujets) pointent sur le dernier message qui a été posté dans le sujet concerné.
Ce n'est pas les cas, pour les miens : ils pointent sur le premier message du sujet.
Est-ce modifiable ???

Ah vi effectivement, il faut remplacer le script par celui-ci:

Code:

$(function(){
if(!_userdata["session_logged_in"])return;
$(function(){
var u=_userdata["user_id"];
if(u==1||u==4||u==5||u==6||u==10||u==11)
$('table.portal').each(function(){
//modifier le texte du titre ici
  var a="Titre du widget";
$(this).find('td.column').last().find('div.module').first().before('<div class="Widget_portail">
<div class="module"><div class="h3">'+a+'</div>
<div id="M14_load_widget"class="inner"></div></div></div>');
var $this=$('#M14_load_widget');
$.get('/latest' , function(data){
$(data).find('a.topictitle:lt(10)').each(function(){
var color=$(this).closest('li').find('.lastpost a[href^="/u"] span').css('color');
var auteur=$(this).closest('li').find('.lastpost a[href^="/u"]').text();
var date=$(this).closest('li').find('dd.lastpost').find('.M14_search_time').text();
var link=$(this).closest('li').find('.lastpost a[href^="/t"]').attr('href');
var text=$(this).text();
  $this.append('<div class="M14_ligne"><a class="topictitle info" href="'+link+'" title="'+text+'">'+text+'</a><span style="color:'+color+';font-weight:bold;">par '+auteur+'</span><span style="float:right;">'+date+'</span></div><hr/>');
$('.topictitle.info').tooltipster({animation : 'fade',arrow : true,speed : 300,delay : 300,onlyOne : true,
theme : 'tooltipster-default'});});});});})});

Bonjour Phil.

Phil a écrit:Tu ne m'embêtes pas Roza,
c'est que surtout j'ai une sainte horreur de perdre mon temps et revenir sur des trucs tout simplement.
Lorsque tu as un projet il faut le mettre en place avant et ensuite, c'est à moi de bosser   .

OK !
C'est noté !

Avec ce dernier script, le widget "Sujets récents" est maintenant au TOP !!  

Je passe donc ce sujet en résolu.

à toi et bonne journée.
@+

De rien Roza,