codage pour les sous forums

[Monaco]

Tout d'abord, bonjour.
Je n'ai pas trouvé le lieu des présentations, donc j'attaque directement dans le dur !
Je rencontre un soucis sur l'un des forums que j'administre.
Sur l'index se trouve la présentation des catégorie qui contiennent elles-mêmes des forums de niveau inférieur. Dans le fonctionnement normal, les sous-forums sont listés dans le cadre d'un forum principal, ou d'une catégorie.
Je souhaiterais mettre à la place de cette liste des images/bouton permettant d'envoyer le membre qui cliquerait sur l'un d'eux directement dans le sous forum correspondant au bouton cliqué. Jusque là, tout va bien, et c'est plutôt facile.
Mon problèma est que j'aimerais que les images/boutons des sous forums qui se trouvent dans le cadre de la catégorie ou forum principal puisse avoir deux apparence. 1) "éteint" lorsqu'il n'y a pas de nouveaux message dans le sous forum, 2) "allumé" quand il y a un nouveau message dans le sous forum.
La piste que je pensais prendre, est un codage qui va reconnaître l'état d'un sous forum (nouveau mess./pas de nouveau mess.) et qui selon cet état affichera l'image/bouton allumé ou l'image/bouton éteint. Chaque sous forum ayant bien sûr une image/bouton différent ce qui m'empêche d'utiliser la gestion des images déjà présente sur le TA.
Pouvez-vous m'aider ? merci par avnce.

[Karlozi]

Bonjour Monaco ! Et non, aucune présentation. Je suis là pour offrir de l'aide et la seule chose que je demande à tous, c'est de respecter mon travail! (le message ne te vise pas )

Une image différente pour chaque sous forum :O ? Si tu as 40 sous forums nous sommes dans le pétrin Ça ne serait pas mieux de vouloir afficher un nouveau message de la même manière que tu veux faire, mais avec la même image pour chaque ?

Il vas me falloir 4 choses.
- L'adresse URL de ton forum
- Ton template index_box
- Ta feuille de style CSS
- Il va falloir que tu me fournisse l'image allumé et l'image éteinte

Cordialement,
Karlozi

[Monaco]

Heureusement, je n'ai pas 40 sous forum, mais seulement 9.
L'URL du forum sur lequel je travaille en ce moment: http://forumfrance.forumactif.fr/

Pour mon CSS, voilà:

Code:

/* encadrement charte et lois */
.charte{
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
box-shadow: 10px 10px 10px #615f5f;
border: 5px solid #0e0ef5;
background-color: #c9cbf0;
}
/* encadrement regle de jeu */
.jeu{
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
box-shadow: 0px 0px 0px #615f5f;
border: 3px solid #7cba2c;
background-color: #ececec;
}
.hljs {
  display: inline-block;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8;
}
 
.hljs-comment,
.hljs-template_comment,
.diff .hljs-header,
.hljs-javadoc {
  color: #998;
  font-style: italic;
}
 
.hljs-keyword,
.css .rule .hljs-keyword,
.hljs-winutils,
.javascript .hljs-title,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
  color: #333;
  font-weight: bold;
}
 
.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
  color: #099;
}
 
.hljs-string,
.hljs-tag .hljs-value,
.hljs-phpdoc,
.tex .hljs-formula {
  color: #d14;
}
 
.hljs-title,
.hljs-id,
.coffeescript .hljs-params,
.scss .hljs-preprocessor {
  color: #900;
  font-weight: bold;
}
 
.javascript .hljs-title,
.lisp .hljs-title,
.clojure .hljs-title,
.hljs-subst {
  font-weight: normal;
}
 
.hljs-class .hljs-title,
.haskell .hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
  color: #458;
  font-weight: bold;
}
 
.hljs-tag,
.hljs-tag .hljs-title,
.hljs-rules .hljs-property,
.django .hljs-tag .hljs-keyword {
  color: #000080;
  font-weight: normal;
}
 
.hljs-attribute,
.hljs-variable,
.lisp .hljs-body {
  color: #008080;
}
 
.hljs-regexp {
  color: #009926;
}
 
.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.lisp .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
  color: #990073;
}
 
.hljs-built_in,
.lisp .hljs-title,
.clojure .hljs-built_in {
  color: #0086b3;
}
 
.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
  color: #999;
  font-weight: bold;
}
 
.hljs-deletion {
  background: #fdd;
}
 
.hljs-addition {
  background: #dfd;
}
 
.diff .hljs-change {
  background: #0086b3;
}
 
.hljs-chunk {
  color: #aaa;
}
/*IMAGE ACCUEIL*/
#i_icon_mini_index{
   background-image:url(http://i39.servimg.com/u/f39/19/00/20/97/button10.png);/*image si la souris ne survole pas*/
   width:80px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_index:hover{
   background-image:url(http://i39.servimg.com/u/f39/19/00/20/97/button11.png); /*image si la souris survole*/
   width:80px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
}
/*IMAGE CALENDRIER*/
#i_icon_mini_calendar{
   background-image:url(http://i39.servimg.com/u/f39/19/00/20/97/button12.png); /*image si la souris ne survole pas*/
   width:100px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_calendar:hover{
   background-image:url(http://i39.servimg.com/u/f39/19/00/20/97/button13.png); /*image si la souris survole*/
   width:100px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
}
/*IMAGE gallery*/
#i_icon_mini_gallery{
   background-image:url(http://i39.servimg.com/u/f39/18/86/39/02/galeri10.png);/*image si la souris ne survole pas*/
   width:64px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_gallery:hover{
   background-image:url(http://i39.servimg.com/u/f39/19/04/22/29/galeri10.png); /*image si la souris survole*/
   width:64px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
}
/*IMAGE FAQ*/
#i_icon_mini_faq{
   background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button14.png'); /*image si la souris ne survole pas*/
   width:42px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_faq:hover{
   background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button15.png'); /*image si la souris survole*/
   width:42px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
}
/*IMAGE RECHERCHE*/
#i_icon_mini_search{
   background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button16.png'); /*image si la souris
ne survole pas*/
   width:102px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_search:hover{
   background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button17.png'); /*image si la souris survole*/
   width:102px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
}
/*IMAGE MEMBRES*/
#i_icon_mini_members{
   background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button18.png'); /*image si la souris ne survole pas*/
   width:84px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_members:hover{
   background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button19.png'); /*image si la souris survole*/
   width:84px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
}
/*IMAGE GROUPES*/
#i_icon_mini_groups{
   background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button21.png'); /*image si la souris ne survole pas*/
   width:72px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_groups:hover{
   background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button22.png'); /*image si la souris survole*/
   width:72px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
}
/*IMAGE PROFIL*/
#i_icon_mini_profile{
   background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button23.png'); /*image si la souris ne survole pas*/
   width:60px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_profile:hover{
   background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button24.png'); /*image si la souris survole*/
   width:60px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
}
/*IMAGE MP (pas de nouveaux messages)*/
#i_icon_mini_message{
   background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button25.png'); /*image si la souris ne survole pas*/
   width:90px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_message:hover{
   background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button26.png'); /*image si la souris survole*/
   width:90px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
}
/*IMAGE MP (nouveaux messages)*/
#i_icon_mini_new_message{
   background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button27.png'); /*image si la souris ne survole pas*/
   width:90px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_new_message:hover{
   background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button28.png'); /*image si la souris survole*/
   width:90px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
}
/*IMAGE DECONEXION*/
#i_icon_mini_logout{
   background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button29.png'); /*image si la souris ne survole pas*/
   width:116px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_logout:hover{
   background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button30.png'); /*image si la souris survole*/
   width:116px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
}
/*IMAGE S'ENREGISTRER*/
#i_icon_mini_register{
   background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button31.png'); /*image si la souris ne survole pas*/
   width:88px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_register:hover{
   background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button32.png'); /*image si la souris survole*/
   width:88px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
}
/*IMAGE CONNEXION*/
#i_icon_mini_login{
   background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button33.png'); /*image si la souris ne survole pas*/
   width:96px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_login:hover{
   background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button34.png'); /*image si la souris survole*/
   width:96px; /*Largeur de l'image*/
   height:30px; /*Hauteur de l'image*/
}
 .i_post{
background-image: url('http://i74.servimg.com/u/f74/18/86/39/02/nouvea10.png');
  width:72px; /* Largeur de l'image */
  height:30px; /* Hauteur de l'image */
}
.i_post:hover{
background-image: url('http://i74.servimg.com/u/f74/19/04/22/29/nouvea10.png');
 /* Largeur et hauteur déjà définie dans i-post */
}
 img[alt="Répondre au sujet"],img[alt="Répondre au message"]{
background: url('http://i59.servimg.com/u/f59/12/14/82/30/repond10.png') top;
width:78px; /* Largeur de l'image */
height:30px; /* Hauteur de la moitié de l'image */
}
img[alt="Répondre au sujet"]:hover,img[alt="Répondre au message"]:hover{
background-position: bottom; /* position du sprite */
/* Largeur et hauteur déjà définie dans i-post */
}
.i_icon_quote{
background-image: url('http://i74.servimg.com/u/f74/19/04/22/29/citer_10.png');
  width:44px; /* Largeur de l'image */
  height:20px; /* Hauteur de l'image */
}
.i_icon_quote:hover{
background-image: url('http://i74.servimg.com/u/f74/19/04/22/29/citer_11.png');
 /* Largeur et hauteur déjà définie dans i-post */
}
 .i_icon_edit{
background-image: url('http://i74.servimg.com/u/f74/19/04/22/29/editer10.png');
  width:48px; /* Largeur de l'image */
  height:20px; /* Hauteur de l'image */
}
.i_icon_edit:hover{
background-image: url('http://i74.servimg.com/u/f74/19/04/22/29/editer11.png');
 /* Largeur et hauteur déjà définie dans i-post */
}
.i_icon_delete{
background-image: url('http://i74.servimg.com/u/f74/19/04/22/29/x_off10.png');
  width:22px; /* Largeur de l'image */
  height:20px; /* Hauteur de l'image */
}
.i_icon_delete:hover{
background-image: url('http://i74.servimg.com/u/f74/19/04/22/29/x_on10.png');
 /* Largeur et hauteur déjà définie dans i-post */
}
 .i_icon_ip{
background-image: url('http://i74.servimg.com/u/f74/19/04/22/29/ip_off10.png');
  width:22px; /* Largeur de l'image */
  height:20px; /* Hauteur de l'image */
}
.i_icon_ip:hover{
background-image: url('http://i74.servimg.com/u/f74/19/04/22/29/ip_on10.png');
 /* Largeur et hauteur déjà définie dans i-post */
}
div#fa_toolbar {
    background-color: #050f66;  /* Couleur de fond */
    border-radius: 0 0 50px 50px;  /* Arrondis les bords de la toolbar */
    box-shadow: 0 0 30px #050f66;  /* Affiche une ombre */
    margin: auto;  /* Centre la toolbar */
    width: 98%;  /* Modifie la longueur de la toolbar */
}
 
div#fa_toolbar div, div#fa_toolbar span {
    margin: 0 15px;  /* Repositionne correctement le contenu de la toolbar */
}
/* Icônes couleur dans la palette */
 
.color-option {
display: inline-block !important;
width: 15px !important;  /* largeur de l'icône couleur */
height: 15px !important;  /* hauteur de l'icône couleur */
border: 2px solid #fff !important;  /* cadre blanc sur l'icône couleur */
margin: 3px !important;   /* espace entre chaque icône */
box-shadow: 0 0 2px #778899;   /* ombre */
cursor: pointer !important;
}
.color-option span{
display: block !important;
width: 15px !important;  /* largeur de l'icône couleur */
height: 15px !important;  /* hauteur de l'icône couleur */
}
.color-option, .color-option span {
border-radius: 2px;  /* arrondi */  
}
 
/* Palette complète - la largeur influence le nombre d'icônes affichées */
.sceditor-dropdown.sceditor-color-picker {
width: 200px !important;  /* largeur de la palette complète */
height: 100px !important;  /* hauteur de la palette complète */
padding: 5px !important;
border-radius: 5px !important;
}
.post {
border: 3px solid #050f66;
  border-radius: 12px;
}
img#i_icon_quote[alt="Editer le message"]
{
background-image:url(http://i74.servimg.com/u/f74/19/04/22/29/editer10.png);height:20px;width:48px;
}
img#i_icon_quote[alt="Editer le message"]:hover
{
background-image:url(http://i74.servimg.com/u/f74/19/04/22/29/editer11.png);
}
/*Images des sous forum*/
a.gensmall  img.M14_Sous
{
margin-top:-19px;/*IMAGE D UNE HAUTEUR DE 38PX*/
}

Pour le template, ça va être compliqué car je ne suis pas le fondateur. Je ne suis qu'un admin. Et le fondateur n'est pas un familier du codage et autres futilités de ce genre. Je vais tout de même lui demander de me faire un copié/collé. On ne sais jamais, il pourrait y arriver. L'avantage, c'est je suis sûr que les templates n'ont pas été modifiées pour le moment.
les images on/off: Hauteur, toutes à 38px. Bleue pour "pas de nouveaux messages" et Rouges pour "nouveaux messages"


La largeur totale de tous les boutons vont faire qu'il va falloir sûrement les mettre sur deux rangées. De plus, il se peut que je sois contrains de modifier le nom des sous forum en fonction de l'évolution du jeu. ce qui implique que je puisse modifier les images sans passer par les templates, mais seulement par le js ou le CSS

[Monaco]

Le template index_box vierge comme l'enfant qui vient de naître.

Code:

<ul class="linklist">
   <!-- BEGIN switch_user_logged_in -->
   <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> • </li>
   <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a> • </li>
   <!-- END switch_user_logged_in -->
   <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
   <!-- BEGIN switch_user_logged_in -->
   <li class="rightside"><a href="{U_MARK_READ}" accesskey="m">{L_MARK_FORUMS_READ}</a></li>
   <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="forabg">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
                  <dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
                  <dd class="topics">{L_TOPICS}</dd>
                  <dd class="posts">{L_POSTS}</dd>
                  <dd class="lastpost"><span>{L_LASTPOST}</span></dd>
               </dl>
            </li>
         </ul>
         <ul class="topiclist forums">
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
            <li class="row">
               <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
                  <dd class="dterm">
                     <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
                        <h{catrow.forumrow.LEVEL} class="hierarchy">
                        <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                        </h{catrow.forumrow.LEVEL}>
                        <br />
                        {catrow.forumrow.FORUM_DESC}

                        <!-- BEGIN switch_moderators_links -->
                           {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                        <!-- END switch_moderators_links -->
                        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                        <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                     </div>
                  </dd>
                  <dd class="topics">{catrow.forumrow.TOPICS} <dfn>{L_TOPICS}</dfn></dd>
                  <dd class="posts">{catrow.forumrow.POSTS} <dfn>{L_POSTS}</dfn></dd>
                  <dd class="lastpost">
                            <!-- BEGIN avatar -->
                            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- END avatar -->

                     <span>
                     <!-- BEGIN switch_topic_title -->
                     <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                     <!-- END switch_topic_title -->
                     {catrow.forumrow.USER_LAST_POST}
                     </span>
                  </dd>
               </dl>
            </li>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
            </ul>

         <span class="corners-bottom"><span></span></span></div>
      </div>
   <!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<ul class="linklist">
   <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a> • </li>
   <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a> •&nbsp;</li>
   <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
   <!-- BEGIN switch_delete_cookies -->
   <li class="rightside"><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
   <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

[Karlozi]

Haha d'accord, merci beaucoup

Ne t'étonnes pas si je ne reviens pas avec la solution d'ici 24h, je dois passer un bon moment à coder

[Monaco]

Je m'en doute ! De toutes manières, je travaille sur d'autres projets de mon côté.

[Monaco]

Je passe régulièrement, J'espère que vous êtes toujours là !

[Monaco]

Je n'ai aucune nouvelles de vous. Dois-je comprendre que votre forum n'est plus en activité ?

[Contenu sponsorisé]