[PHPBB3] Remplacer les backgrounds image natifs par des images

Coucou Roza,

les petites images indiquant des nouveaux messages dans les sujets (pas pour les MP) ne clignotent pas.

Effectivement, on cherche plus le background mais l'image désormais.


Remplaces le script donné par celui-ci:

Code:

$(function(){

$('img[class="sprite-icon_topic_newest"]').each(function(){
 $(this).closest('dl').find('dd.M14_folder_img img').addClass('M14_blink ');
});});

Et ajoutes ceci dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:


.M14_blink  {
  /*on anime toute les 1 seconde*/
   animation-duration: 1s;
   animation-name: clignote;
   animation-iteration-count: infinite;
   transition: none;
}
@keyframes clignote {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }}


Penser a cliquer sur le bouton

La css est bien moins gourmande que le script précédent Roza.




Alors effectivement je n'avais pas pensé aux sous forums, je viens de corriger l'astuce.

Il suffit de trouver dans le template Index_box  cette ligne:

Code:

<div style="display: block; margin-left:5px;">

Et la remplacer par:

Code:

<div class="M14_margin"style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">

Il y aura un décalage effectif sur les sous forums.

Ensuite suivant la marge donnée dans ton PA:


Général/Configuration/Structure des pages

Largeur de la cellule image catégorie/forum :

La valeur par défaut est de 45px, si tu la même valeur, le style ci dessous sera correcte.


Tu peux ajuster en réduisant la marge avec ce style:

Code:

/*LES FORUMS*/
div.M14_margin[style*="margin : 0 0px 0 45px;"]{margin-left:5px!important;}
/*LES SOUS FORUMS*/
div.M14_margin[style*="margin : 0 0px 0 90px;"]{margin-left:45px!important;}


Si toutefois elle est différente il faut aussi modifier cette dernière.
Exemple avec 80px
On la retrouve sur la première ligne et pour la deuxième( sous forums), on multiplie par 2

Tu peux ajuster en réduisant la marge avec ce style:

Code:

/*LES FORUMS*/
div.M14_margin[style*="margin : 0 0px 0 80px;"]{margin-left:5px!important;}
/*LES SOUS FORUMS*/
div.M14_margin[style*="margin : 0 0px 0 160px;"]{margin-left:45px!important;}


Re...

Merci beaucoup Phil !

Je m'y colle et je reviens vers toi.

Bonne soirée.

Bonne soirée à toi aussi .
A demain.

RE...

Pour les sous-forums, c'est OK !

Par contre toujours pas de clignotement...

Les JS et CSS que tu indiques plus haut sont bien ceux que j'avais déjà mis en place.
Je les ai malgré tout remplacés, au cas où il y aurait une modif que je n'aurais pas su détecter.
Mais cela ne change rien.

Allez, bonne nuit.
A demain.

Encore moi...

Eh bien....! Ca n'a pas duré longtemps !

Les sous-forums ont repris leur place, sans décalage avec les forums !!! 

J'avais en outre constaté que la modif avait fonctionné (un moment) pour Google Chrome, mais pas pour Mozilla Firefox!!!
J'avais pourtant vidé le cache, supprimé cookies et historique, mais rien n'y a fait.

Allez, bonne nuit et à demain.

Coucou Roza,
n'aurais tu pas joué avec la compression de l'index:

Affichage/Page d'acceuil/ Structure et hiérarchie/Niveau de compression de l'index

Est-ce toujours coché sur "Aucun"?

Je vois que sur le forum de ton profil que la div n'a toujours pas de class alors qu'elle doit en avoir:

Code:

<div class="M14_margin"style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">


Sur ton fofo on a encore l'ancienne l'ancienne:

Coucou Phil !

Côté compression, j'ai actuellement ceci :



Et pour l'index_box actuellement (copie d'écran):



N'aurais-je pas mis ce code au bon endroit ???

Merci et bonne journée ensoleillée !
____________________________________________
Edit : j'avais "simplement" oublié de "Publier"   la dernière modif du template !!!!
N'importe quoi !

Bon, c'est OK pour les sous-forums.
Par contre, toujours pas de clignotement...

Ahh tite tête ,

Pour le clignotement aurais tu un compte utilisateur à me donner en MP ?

OK !

Je vais en créer un.

A tout  de suite...

Merci pour le compte par compte, ce membre n'a aucun message , je viens de cliquer pour suivre ce sujet:
https://ami-ma.forumactif.com/t46-anniversaires-50-ans-de-mariage-aujourd-hui
Peux tu mettre un message stp afin que je puisse avoir une notification .

Il faut supprimer ce script sur les sous forums Roza:

Code:

$(function(){$('.topic-title').each(function(){var M14_linK=$(this).find('a[href^="/t"]').attr('href');var M14_texT=$(this).find('a[href^="/t"]').text();$(this).closest('dd').attr('title',M14_texT).wrap('<a href="'+M14_linK+'"></a>')})});

C’est fait !

Merci, mais tu as aussi ce script qui doit être sur toutes les pages:

Code:

$(function(){$('img#i_icon_mini_new_message').closest('a.mainmenu').addClass('M14_Blink');$('img[alt^="Voir le message le plus"]').closest('a').addClass('M14_Blink');$('.M14_Blink').each(function(){var elem=$(this);setInterval(function(){if(elem.css('visibility')=='hidden'){elem.css('visibility','visible')}else{elem.css('visibility','hidden')}},800)})});





Il faut le supprimer.
Il va supprimer l'effet sur les mps etc mais on verra plus tard Roza.

Bonne soirée, je verrais cela demain matin désormais .

Re..

Voilà, c'est fait, j'ai désactivé les deux JS que tu as indiqués.

Excuse-moi de te "monopoliser un peu" !!!
Mais, que veux-tu, quand on a affaire à un PRO, on abuse de ses compétences !!!

Allez, bonne soirée et bonne nuit.
@ demain.

Coucou Roza,

Excuse-moi de te "monopoliser un peu" !!!
Mais, que veux-tu, quand on a affaire à un PRO, on abuse de ses compétences !!

tu as bien raison .

Alors le script fait bien son travail, ensuite c'est la C.S.S qui ne réagit pas,
ta feuille de style est donc optimisée :

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Optimiser votre CSS ==> cocher "Non" .

Coucou Phil !

Vu l'heure de ton message... je me pose une question : t'arrive-t-il de dormir, parfois ????  

Bon... c'est bien ce que je disais... "Quand on a affaire à un PRO ..."

Un simple petit clic là où tu l'as dit, et Hop !
Miracle... les petites images signalant un nouveau message (sauf MP)  clignotent !!
C'est GENIAL !

Un très grand à toi !!!

Bonne journée.

Coucou Roza,
Hum vi je dors un peu mais comme je me lève très tôt pour le taf (3h30), je poste généralement dans ces heures....
Parfait alors Roza et de rien

Pour faire l'identique sur les messages privés:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher sur toutes les pages.


Déposer ceci:

Code:


$(function(){
$('img[id="i_icon_mini_new_message"]').parent().addClass('M14_blink ');
});



Penser a cliquer sur le bouton


Facultatif, tu peux aussi personnaliser le bouton MP ainsi:


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:


a.mainmenu.M14_blink
{
color:darkorange!important; 
background:black;
  padding:3px;
  border:2px solid darkorange;
}





Penser a cliquer sur le bouton

Re...

MP nouveau clignote. J'ai personnalisé le bouton à mon goût.
C'est parfait !

Il reste un tout petit détail : dans la boîte de réception la petite image nouveau MP apparaît bien, mais là, elle ne clignote pas.
Mais, comme je le dis, c'est un détail, et il peut être négligé.
Si tu n'as pas le temps, laisse tomber. C'est déjà presque parfait comme ça.

Tu peux envoyer un MP au membre "Essais" stp.
Je vois cela plus tard Roza .

Si tu ne veux que l'image du mp clignotante , il faut remplacer le script par celui-ci:

Code:

$(function(){
$('img[id="i_icon_mini_new_message"]').addClass('M14_blink ');
});

Le style pourra être supprimé dans ce cas:

Code:

a.mainmenu.M14_blink
{
color:darkorange!important;
background:black;
  padding:3px;
  border:2px solid darkorange;
}




Re...

MP envoyé.

Je voudrais les deux, si c'est possible.

Dans la barre de navigation, c'est parfait. Rien à changer.

C'est dans la boîte de RECEPTION qu'il n'y a pas de clignotement sur la ligne du nouveau MP.
Mais franchement, ne te prends pas la tête avec ça !!!
Ce n'est qu'un petit détail.

@+

OK je suis avec mon Android, je vois cela dans la soirée.
Pour le script des MPS, tu as bien coché sur toutes les pages comme mentionné dans mon message ?

Milouze14 a écrit:Pour le script des MPS, tu as bien coché sur toutes les pages comme mentionné dans mon message ?

Absolument...



@+

Alors pour faire clignoter l'image et avoir un bouton, ce sera ce script:

Code:


$(function(){
  $('img[id="i_icon_mini_new_message"]').each(function(){
    $(this).parent().addClass('M14_blink ');
    $(this).addClass('M14_blink ');
});});


C'est dans la boîte de RECEPTION qu'il n'y a pas de clignotement sur la ligne du nouveau MP.

Je comprend ce que tu désires, tu parles de la liste des mps.

Faut il le faire car il faut revoir le template de la liste des MPS dans ce cas Roza.

Et me donner le lien de l'image correspondant au nouveau message que tu trouveras dans ton P.A ici:
Affichage/Images et couleurs/Gestion des images/Mode avançé


Icônes des sujets

Sujet - Nouveau :

Re...

Oui, c'est bien cela.
Mais, comme je te disais, ce n'est qu'un petit détail.

Donc, on ne va pas en faire une usine à gaz : on laisse tomber.

En tout cas, beaucoup à toi, pour tout !

Bonne soirée.

Ho, on ne connait pas assez le tit Milouze   .


Alors j'ai quelque peu travailler avant de me sauver concernant la liste des MPS.


J'ai trouvé le lien de l'image, tu pourras le changer dans le script si un jour tu désires modifier cette image.



Dans le template privmsgs_body:
Affichage/Templates/Poster et messages privés/privmsgs_body

Remplaces tout le contenu du template par celui-ci:

Code:

<!-- BEGIN switch_user_logged_in --><p class="right rightside">{LAST_VISIT_DATE}</p><!-- END switch_user_logged_in -->
<p>{CURRENT_TIME}</p>

<ul id="privmsgs-menu">
 <li>{INBOX_IMG} {INBOX}</li>
 <li>{SENTBOX_IMG} {SENTBOX}</li>
 <li>{OUTBOX_IMG} {OUTBOX}</li>
 <li>{SAVEBOX_IMG} {SAVEBOX}</li>
</ul>

<form action="{S_PRIVMSGS_ACTION}" method="post" name="privmsg_list">

<div class="topic-actions">
 <div class="buttons">
 <div class="post-icon">{POST_PM_IMG}</div>
 </div>
</div>
<div class="clear"></div>

<div class="panel">
 <div class="inner"><span class="corners-top"><span></span></span>
 <!-- BEGIN switch_box_size_notice -->
 <p class="left-box">{BOX_SIZE_STATUS}</p>
 <!-- END switch_box_size_notice -->
 <p class="right-box">
 {L_DISPLAY_MESSAGES}: <select name="msgdays">
 {S_SELECT_MSG_DAYS}
 </select> <input class="button2" type="submit" name="submit_msgdays" value="{L_GO}" />
 </p>
 <div class="clear"></div>
 <span class="corners-bottom"><span></span></span></div>
</div>

<div class="forabg">
 <div class="inner"><span class="corners-top"><span></span></span>

 <ul class="topiclist">
 <li class="header">
 <dl>
 <dt>{L_SUBJECT}</dt>
 <dd class="mark">{L_MARK}</dd>
 </dl>
 </li>
 </ul>

 <ul class="topiclist pmlist bg_none">
 <!-- BEGIN listrow -->
 <li class="row {listrow.ROW_CLASS}">

 

 <dl class="icon">
           <dd class="M14_folder_img">
   <div  align="center" valign="middle"><img src="{listrow.PRIVMSG_FOLDER_IMG}"/>  </div>
                                          </dd>
 <dt>
 <a href="{listrow.U_READ}" class="topictitle">{listrow.SUBJECT}</a><br />
 <span style="margin: 0 5px"><em>{listrow.FROM} - {listrow.DATE}</em></span>
 </dt>
 <dd class="mark"><input type="checkbox" name="mark[]2" value="{listrow.S_MARK_ID}" /></dd>
 </dl>
 </li>
 <!-- END listrow -->
 <!-- BEGIN switch_no_messages -->
 <li class="row row1">
 <dl class="icon">
 <dt>
 <strong>{L_NO_MESSAGES}</strong>
 </dt>
 <dd class="mark"> </dd>
 </dl>
 </li>
 <!-- END switch_no_messages -->
 </ul>

 <span class="corners-bottom"><span></span></span></div>
</div>
<p class="right-box" style="margin: 0;"><a href="javascript:select_switch_privmsg(true);">{L_MARK_ALL}</a> :: <a href="javascript:select_switch_privmsg(false);">{L_UNMARK_ALL}</a></p>
<div class="clear"></div>
<p><span class="pagination">{PAGINATION}</span>{PAGE_NUMBER}</p>
<div class="clear"></div>
<div class="topic-actions">
 <div class="buttons">
 <div class="post-icon">{POST_PM_IMG}</div>
 </div>
 <div class="pagination">
 <p>{S_HIDDEN_FIELDS}
 <!-- BEGIN switch_save -->
 <input class="button1" type="submit" name="save" value="{L_SAVE_MARKED}" />  
 <!-- END switch_save -->
 <!-- BEGIN switch_move_profile -->
 <input class="button1" type="submit" name="moveprofile" value="{L_MOVE_PROFILE_MARKED}" />  
 <!-- END switch_move_profile -->
 <!-- BEGIN switch_mark_as_read -->
 <input class="button2" type="submit" name="mark_as_read" value="{switch_mark_as_read.L_MARK_AS_READ}" />  
 <input class="button2" type="submit" name="mark_as_unread" value="{switch_mark_as_read.L_MARK_AS_UNREAD}" />  
 <!-- END switch_mark_as_read -->
 <input class="button2" type="submit" name="delete" value="{L_DELETE_MARKED}" /> &nbsp;
 <input class="button2" type="submit" name="deleteall" value="{L_DELETE_ALL}" /></p>
 </div>
</div>
</form>

<div class="clear"></div>
{JUMPBOX}

<br style="clear:both" />

Penses a enregistrer puis à valider en cliquant respectivement sur   puis


Puis ajoutes ce script:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Cocher sur toutes les pages.


Déposer ceci:

Code:


$(function(){
  //le lien de l image nouveau sujet du P.A
var img="https://i.servimg.com/u/f94/20/24/64/27/new_310.gif";
  $('.topiclist.pmlist.bg_none li').find('dd.M14_folder_img').find('img[src="'+img+'"]').each(function(){
    $(this).addClass('M14_blink ');
  });});


Penser a cliquer sur le bouton


Comme mentionné plus haut, tu pourras remplacer le lien de l'image dans le script ici entre les doubles guillemets:

Code:

 //le lien de l image nouveau sujet du P.A
var img="https://i.servimg.com/u/f94/20/24/64/27/new_310.gif";