Modifier le titre des onglets quand il y a un message non lu dedans

[lunasims57]

Bonjour !

J'aimerai que quand un membre n'a pas lu un message dans une catégorie, le titre de celle-ci soit modifié. Je voudrai qu'il y ai genre un petit signe ou un mot (je ne sais pas encore) qui se place juste après le titre et dont je pourrais modifier la taille ou la couleur. EDIT : un changement de background m'irait bien aussi, je préfère même.

Est-ce que c'est possible ? Et comment faire ? Ça faciliterai grandement la navigation sur mon forum !

Merci bien

[stefou]

Bonjour,
On peut utiliser ce principe --> https://forum.forumactif.com/t357418-coloriser-les-cellules-sur-lindex-lorsquun-nouveau-message-est-poste

Voilà par exemple un code qui met les titres de vos catégories en rouge quand un nouveau message est posté.

Code javascript

Code:

        $(function() {
        $('dl.icon[style*="http://i55.servimg.com/u/f55/18/83/38/44/iconne10.png"]').addClass('newpost');
        $('dl.icon[style*="http://i55.servimg.com/u/f55/18/83/38/44/iconne10.png"]').addClass('newpost');
        });

Code à placer dans la feuille de style css

Code:

.newpost a.forumtitle{color:red!important;}

[lunasims57]

Le java est bon mais le code là modifie la couleur des sous-forums, c'est pas pareil.

J'ai essayé d'adapter ça au titre de mes catégories (parce que j'ai une mise en page spéciale) :

Code:

        .newpost #nav_cat li {
background:url('http://i39.servimg.com/u/f39/18/83/38/44/testfo13.jpg') !important;
}

Ça ne marche pas, et avec une couleur non plus.
Si ça peut aider je vais donner tout mon CSS qui touche aux catégories, on sait jamais :

Code:

/* Propriétés générales des onglets */

#nav_cat li {
          background: url('http://i39.servimg.com/u/f39/18/83/38/44/testfo10.jpg') ;       
          color: #5E3430;
          cursor: pointer;
          font-size: 20px;
          font-variant: small-caps;
          display: table-cell; 
          width: 200px;
          padding: 5px 10px;
          text-align: center;
          vertical-align: middle;
          font-weight:bold; 
}

ul#nav_cat_onglets {
          display: table;         
}

div.table-title h2 {
          display: none;
}


dl.icon {
          min-height:60px !important;
       height: auto;
}

/* Propriétés spécifiques de l onglet actif */

 #nav_cat_onglets .actif {
          font-weight:bold;/* mets le texte en gras */
       color:#000000;
          z-index: 10;
       height:85px;
       font-size: 20px ;
          background: url('http://i39.servimg.com/u/f39/18/83/38/44/testfo10.png') ;  !important;
}


En fait maintenant, à l'idéal j'aimerai pouvoir changer le fameux background quand il y a un nouveau message dans la catégorie !

[stefou]

A oui j'ai compris   

Je ne suis pas sure que ce soit faisable car il n'y a pas d'élément sur la page d’accueil (pour ne citer que celle-ci) qui permet de vérifier le contenu (nouveau message) des autres pages.

A moins d'utiliser un js qui charge en "display none" les 4 pages mais cela risque de ralentir l'affichage.

Mais bon, je peux me tromper...

Edit: on est d'accord que ont parle bien des onglets de catégorie

[lunasims57]

Oui oui c'est bien ça !

En fait il faudrait déjà charger tous les onglets ? Je pensais que c'était déjà le cas, vu que quand on change c'est assez fluide !

[stefou]

Effectivement, ton code charge les 4 pages en display none et ne montre que la page active.
Du coup y doit y avoir moyen...
Je regarde a cela cet aprèm. a moins que un autre membre aie déjà la solution.

[stefou]

Comme vos onglet on tous la même class et que je suppose que cette class est utilisé un peux partout, pour ne pas devoir tout bouger j'ai utilisé les liens unique.

Tester ceci:
js

Code:

$(function() {
    $('dl.icon[style*="http://i55.servimg.com/u/f55/18/83/38/44/iconne10.png"]').addClass('newpost');
$('dl.icon[style*="http://i55.servimg.com/u/f55/18/83/38/44/iconne10.png"]').addClass('newpost');
if ($("div.forabg.cat0 dl.icon.newpost").length > 0){
$("li.li_nav_onglet:nth-child(1)").addClass("newpost_onglet");
}
if ($("div.forabg.cat1 dl.icon.newpost").length > 0){
$("li.li_nav_onglet:nth-child(2)").addClass("newpost_onglet");
}
if ($("div.forabg.cat2 dl.icon.newpost").length > 0){
$("li.li_nav_onglet:nth-child(3)").addClass("newpost_onglet");
}
if ($("div.forabg.cat3 dl.icon.newpost").length > 0){
$("li.li_nav_onglet:nth-child(4)").addClass("newpost_onglet");
}
if ($("div.forabg.cat4 dl.icon.newpost").length > 0){
$("li.li_nav_onglet:nth-child(5)").addClass("newpost_onglet");
}
});

Et dans le css

Code:

.newpost_onglet{background:url('http://i39.servimg.com/u/f39/18/83/38/44/testfo13.jpg') !important;
}

[lunasims57]

Oooh ça marche super bien ! Merciii !

Une touute petite dernière chose : (je suis embêtante, je sais xD)
Est-ce que je pourrais avoir encore une image différente, mais seulement si l'onglet est actif ET avec un nouveau message ? Bon après si c'est pas possible c'est pas grave, c'est déjà super comme ça ! :3

[stefou]

Oui

Code:

.newpost_onglet.actif{background:url('adresse de l'image') !important;
        }

[lunasims57]

Merci beaucoup !