couleur annonce globale.

[Ayael]

Bonjour,
j'ai essayé d'utiliser d'utiliser ce tutoriel : https://forum.forumactif.com/t348011-coloriser-les-cases-des-Note-et-des-annonces pour coloriser la case de mes annonces globales.
Donc j'ai bien poster le script sur les sous forums, mon javascript est activé, j'ai posté le css etc. sauf que ça ne marche pas.
Je suis sûre que ça vient du fait que j'ai personnalisé mon template topics_list_box sauf que je n'arrive pas à trouver quel est le problème exactement et surtout comment y remédier pour que sa marche.

Mon template :

Code:

<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
 var all_checked = true;
 for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
 if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
 all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
 }
 }
 document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
 for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
 if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
 document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
 }
 }
}
</script>
<!-- END multi_selection -->
  
  
  

<table class="totalsujet" width="100%" border="0" cellspacing="1" cellpadding="0">
 <tr>
 <!-- BEGIN multi_selection -->
 <th align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></th>
 <!-- END multi_selection -->
 </tr>
 <!-- BEGIN pagination -->
 <tr>
 <td  colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
 </tr>
 <!-- END pagination -->
 <!-- END header_table --><!-- BEGIN header_row -->
 <tr>
 <td  colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
 </tr>
<!-- END header_row -->

<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
 <tr>
 <!-- BEGIN single_selection -->
 <td  align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
 <!-- END single_selection -->
 
         
          
          <td  align="center" valign="top" width="20"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></td>
 
         <td width="100%" valign="top">
 

     <div class="sujet">
                          <div class="derniermessagesujet">    {topics_list_box.row.LAST_POST_TIME} <br/>{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}
                            <br/>  <div class="vureponse">  Réponse : {topics_list_box.row.REPLIES} ♦ Vues : {topics_list_box.row.VIEWS}  </div>
      </div>
                            
<a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
 
                           <br/>
                            <!-- BEGIN switch_description -->
                            <div class="sujetdescription">{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}</div>
 <!-- END switch_description -->
                            
          
 </div>
 
 </td>
       
       

<!-- BEGIN multi_selection -->
 <td  align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
 <!-- END multi_selection -->
 </tr>
 <!-- END topic --><!-- BEGIN no_topics -->
 <tr>
 <td  colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" ><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
 </tr>
 <!-- END no_topics --><!-- BEGIN bottom -->
 <tr>
 <td  colspan="{topics_list_box.row.COLSPAN}" valign="middle">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td> <span class="gensmall">{PAGINATION}</span></td>
 <td align="right"><a href="#top">{L_BACK_TO_TOP}</a> </td>
 </tr>
 </table>
 </td>
 </tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

Merci d'avance pour votre aide précieuse ♥

[_backdraft_]

Bonsoir,

Le problème ne vient pas de votre template car le javascript ne se réfère pas à une class ou un ID du template mais à l'image de l'annonce globale (sauf si vous avez supprimé dans le template l'image de l'annonce globale).

En effet je pense que vous n'avez pas vu ce passage :

Modifications à apporter :
Dans les deux scripts, remplacez les URL des images par celles que vous utilisez sur votre thème :
- http://url_image_annonce.jpg : l’URL de l’image utilisée pour les annonces
- http://url_image_Note.jpg : l’URL de l’image utilisée pour les Note

En claire dans votre code remplacez URL par l'URL de l'image que vous avez choisit pour les annonces globales.

Cordialement
Backdraft

[Ayael]

Je vous remercie de l'intérêt porté à mon problème, malheureusement ce dernier ne vient pas de là vu que j'ai bien changé l'url pour celle de mon image "annonce globale". Qui se trouve être celle-ci : https://i.servimg.com/u/f33/17/58/72/55/annonc17.png

Et le code javascript :

Code:

$(function() {
        /* Ajoute une class à la cellule des annonces */
        $('img[src="http://i33.servimg.com/u/f33/17/58/72/55/annonc17.png"]').closest('td').addClass('annonce');

[_backdraft_]

Essayez de le remplacer par ceci :

Code:

$(function() {
        /* Ajoute une class à la cellule des annonces */
        $('img[src="http://img11.hostingpics.net/pics/234458Annonceglobaleancien.png"]').closest('td').addClass('annonce');

Cordialement
Backdraft

[Ayael]

Bonjour, j'ai remplacé mon javascript par le votre, ça n'a rien changé.

[_backdraft_]

Après relecture il y a une faute dans votre script :

Localisez l'endroit écrit "td" remplacez le par "tr".

(td cible la cellule alors que tr cible la ligne).

Essayez avec votre premier code, si cela ne marche pas faite la même manoeuvre avec celui que je vous ai donné.

Cordialement
Backdraft

[Ayael]

J'ai testé les deux (mon code et le tient) en remplaçant par "tr" et ça n'a rien changé.

[_backdraft_]

::betise:: 

Suis je bête, il ne faut jamais sauter de ligne dans un javacsript, or votre js comporte un espace de saut de ligne (les retours à la ligne sont acceptés mais pas les saut de lignes)

J'espère que c est la bonne ^^

Backdraft

[Ayael]

J'ai essayé de mettre ça, mais ça ne change rien :

Code:

 $(function() {   $('img[src="http://img11.hostingpics.net/pics/234458Annonceglobaleancien.png"]').closest('tr').addClass('annonce');

Edit: J'ai trouvé une partie du problème ! J'avais oublié de fermer le code ! En revanche, la couleur ne s'applique que sur le fond de mes images (old new) et pas sur le reste ^^" (Alors que je voudrais l'inverse!)

[_backdraft_]

Edit: J'ai trouvé une partie du problème ! J'avais oublié de fermer le code ! En revanche, la couleur ne s'applique que sur le fond de mes images (old new) et pas sur le reste ^^" (Alors que je voudrais l'inverse!)

Arf, effectivement ! Il y en avait pas mal des fautes ^^ Je vous conseil pour éviter de reproduire ce problème, lorsque vous devez recopier un code cliquer sur "sélectionner le code" puis faite copier/coller ça évite les erreurs

En revanche, la couleur ne s'applique que sur le fond de mes images (old new) et pas sur le reste ^^"

Pouvez vous l'appliquer sur votre forum que je vois ce que ça donne s'il vous plait car comme ça je ne vois pas ce que vous voulez dire.

Cordialement
Backdraft

[Ayael]

Bien sûre, voilà un lien : http://version5.lebonforum.com/t48-affiliation

Comme vous le voyez, le noir ne s'applique que derrière l'image..

[_backdraft_]

Vous n'avez pas remplacé le "td" par "tr".

Cordialement
Backdraft

[Ayael]

*Ayael se frappe*

Toute suite ça marche mieux, en revanche, j'aimerai que les images ne soient pas touchés justement, j'ai essayé de triché en mettant un "margin left" dans le css mais ça n'a pas l'air de marcher ?

(Merci en tout cas beaucoup pour votre aide! )

Edit : J'ai essayé de créer une class qui entoure mon image

Code:

.imagenewsujet {
  background-color:tranparent!important;
}


mais rien à faire (j'ai essayé de rajouter un "td" dans le css en le mettant avant et après ma class, et de remplacer le background-color:transparent, par un background :none" rien à faire.

[_backdraft_]

Pour moi c'est impossible via des codes puisque le javascript se repère par rapport à cette image... il n'est dont pas possible de décaler le fond de couleur.

Cependant je pense que c'est possible en trichant mais en trichant vraiment beau et cela risque d'être un travail ennuyant ^^. En gros mon idée serait de retoucher votre image qui est fait pour les annonces globales : on retire le fond transparent puis on met en bas à gauche le fond de votre forum et en bas à droite la couleur de vos sujets par défauts. Je ne pense pas que vous ayez compris ce que je veux dire, c'est un peu compliqué à s'imaginer.

Si ça vous intéresse je peux essayer de vous retoucher moi même votre image, mais je ne garantie pas le temps que ça me prendra.

Cordialement
Backdraft

edit : j'ai comme vous essayé avec du CSS mais c'est impossible selon moi.

[Ayael]

Non, ne vous ennuyez pas pour ça, je m'en charge moi même.

EDIT : par contre, vous pensez qu'il serait possible d'enlever le train de séparation ?

[_backdraft_]

Non, ne vous ennuyez pas pour ça, je m'en charge moi même.

EDIT : par contre, vous pensez qu'il serait possible d'enlever le train de séparation ?

Voilà ma triche semble marcher , vous ne voulez plus de transition ?

Oui il me faut votre template qui affiche les sujet.

Cordialement
Backdraft

[Ayael]

Oui, ça fonctionne, et disons que je verrais pour le hover XD
Pour le template, je vous l'ai donné au début du sujet^^

[_backdraft_]

Effectivement j avais oublié ^^

Pour le template remplacez le par celui ci (n'oubliez pas de publier) :

Code:

<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
   var all_checked = true;
   for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
      }
   }
   document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
   for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
      }
   }
}
</script>
<!-- END multi_selection -->
 
 
 
 
<table class="totalsujet" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <!-- BEGIN multi_selection -->
      <th align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></th>
   <!-- END multi_selection -->
   </tr>
   <!-- BEGIN pagination -->
   <tr>
      <td  colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
   </tr>
   <!-- END pagination -->
   <!-- END header_table --><!-- BEGIN header_row -->
   <tr>
      <td  colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
   </tr>
<!-- END header_row -->
 
<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
   <tr>
      <!-- BEGIN single_selection -->
      <td  align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
      <!-- END single_selection -->
      
        
        
          <td  align="center" valign="top" width="20"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></td>
      
          <td width="100%" valign="top">
      
        
                  <div class="sujet">
                          <div class="derniermessagesujet">    {topics_list_box.row.LAST_POST_TIME} <br/>{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}
                            <br/>  <div class="vureponse">  Réponse : {topics_list_box.row.REPLIES} ♦ Vues : {topics_list_box.row.VIEWS}  </div>
      </div>
                          
         <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            
                            <br/>
                            <!-- BEGIN switch_description -->
                            <div class="sujetdescription">{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}</div>
         <!-- END switch_description -->
                          
        
         </div>
        
  </td>
      
      
      
<!-- BEGIN multi_selection -->
      <td  align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
   <!-- END multi_selection -->
   </tr>
   <!-- END topic --><!-- BEGIN no_topics -->
   <tr>
      <td  colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" ><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
   </tr>
   <!-- END no_topics --><!-- BEGIN bottom -->
   <tr>
      <td  colspan="{topics_list_box.row.COLSPAN}" valign="middle">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td> <span class="gensmall">{PAGINATION}</span></td>
               <td align="right"><a href="#top">{L_BACK_TO_TOP}</a> </td>
            </tr>
         </table>
      </td>
   </tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

Pour la transition essayez ceci (dans le CSS) :

Code:

tr.annonce td:hover {
background-color: #FAEFB1 !important;
transition: all .5s ease-out .1s;
}


Pour le CSS je ne suis pas du tout sur que ça va marcher, quand je l'ai essayé sur votre forum ça faisait quelque chose de bizarre, mais ça faisait une transition ^^

Cordialement
Backdraft

[Ayael]

ça fonctionne parfaitement, pour le hover, en fait, le problème vient du fait que (qu'on le mette en hover ou pas) la couleur des cases classiques (qui est un rgba transparence 0.7) se met au dessus. Quand on met une couleur foncé ça ne se voit pas, mais quand on met une couleur clair ça donne une autre couleur.

J'ai essayé de mettre un "important" mais ça ne change rien.

[_backdraft_]

Ah d'accord, oui d'ailleurs quand on passe la souris sur l'annonce globale, on s’aperçoit que le fond change légèrement ! Mais faut bien regarder car il passe de noir foncé à noir très foncé ^^

Non bah dans ce cas je suis désolé mais pour la transition je vois pas, sauf si vous mettez les annonces globales dans une couleur plus claire et que vous fassiez la transition vers une couleur plus foncée.

Cordialement
Backdraft

[Ayael]

Je vois... C'est dommage quand même... Tout ça pour une histoire de "priorité."
Je vais malgré tout essayer de régler cette histoire.
En tout cas, merci beaucoup pour votre aide ♥

[_backdraft_]

De rien, n'hésitez pas en cas de problème.

Backdraft

[Ayael]

J'ai opté pour une couleur tronqué en attendant (en mettant du rouge vif ça donne quelque chose de correct en rouge foncé XD) mais j'aimerai bien pouvoir mettre la couleur de mon choix, donc c'est toujours d'actualité.

[_backdraft_]

Si vous voulez une réponse plus efficace je vous conseil de créer un autre sujet avec le titre ciblant sur votre deuxième problème à savoir la transition comme cela plus de monde pourra vous aider.

Cordialement
Backdraft

[Ayael]

Ce n'est pas faux >.< Je verrais ça plus tard alors.