Icônes FA et indication de nouveaux messages

[foxies]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour à tous ! J'ai une demande assez particulière à faire et malgré mes recherches, je ne suis pas parvenue à trouver d'autres sujets traitant de ce que je souhaite faire exactement.

J'aimerais donc utiliser les icônes de FontAwesome entant qu'icônes du forum et des sujets à la place des images habituelles et qu'en cas de nouveaux messages ils changent de couleur. L'une des difficultés à laquelle je fais face est que je souhaite que chaque forum présente un icône différent (ce dernier se situera au niveau de la div .cat-title, en face du titre du forum et de sa description). J'ai tenté plusieurs choses, notamment l'installation de ce script JS qui donne un id pour chaque forum - ce code est actuellement déjà utilisé pour rajouter un background différent à chaque forum et marche très bien :

Code:

$(function(){
      $('.cat-title a:contains("Forum 1")').closest('.cat-icon').attr('id','pi');
  $('.cat-title a:contains("Forum 2")').closest('.cat-icon').attr('id','pii');
    });

Malheureusement, aucun id n'a été attribué. Je précise, soit-dit en passant, que mon template concerné a subi des modifications.
Je souhaiterais ensuite le même principe, mais cette fois-ci au niveau des sujets. A ce niveau-là, un seul et même icône sera affiché sur tous les sujets, bien entendu.

Ensuite, pour ce qui est de la possibilité de changer l'apparence des icônes (rajouter simplement une couleur rouge) pour avertir lorsqu'il y a des nouveaux messages, je n'ai pas trop d'idées de comment m'y prendre...

Je vous remercie d'avance pour votre aide et vous souhaite un bon week-end

[foxies]

UP

[foxies]

UP

[foxies]

UP

[foxies]

UP

[MasDan]

Bonjour Pinke,

Les " sont la cause du problème. Elles ne sont pas requises.

Le présent code recherche "Forum 1" et non Forum 1.

Remplacer

Code:

a:contains("Forum 1")

par

Code:

a:contains(Forum 1)

[foxies]

Bonjour MasDan, malheureusement ça ne fonctionne toujours pas : aucun id n'a été attribué

[MasDan]

Bonjour Pinke,

De la balise a(1), nous ne pouvons pas atteindre directement la classe cat-icon(3).



Il faut utiliser les balises complémentaires closest (qui remonte dans la hiérarchie) et find (qui redescend dans la hiérarchie).

Il faut utiliser le chemin suivant. Du point 1, il faut remonter au point 2 pour pouvoir redescendre au point 3.

Essayer ceci

Code:

$(function(){
  $('.cat-title a:contains(Forum 1)').closest('cat-forum').find('.cat-icon').attr('id','pi');
  $('.cat-title a:contains(Forum 2)').closest('cat-forum').find('.cat-icon').attr('id','pii');
});

[foxies]

Bonjour MasDan, merci pour votre précieuse aide et vos explications très claires ! Ça a fonctionné cette fois-ci (j'ai juste rajouté le "." manquant devant "cat-forum") Par contre, je pensais qu'il était possible d'inclure les icônes FA directement depuis le CSS mais je m'y prends peut-être mal :

Code:

#pi:before {
  content: "\f557";
    font-family: FontAwesome;
    background: #e0e0e0;
    padding: 0 5px;
    border-radius: 5px;
    font-size: 15px;
    position: absolute;
    margin-left: 380px;
    margin-top: -50px;
}

J'ai essayé avec le code ci-dessus, mais c'est un "" qui s'affiche sur le forum. Il y a peut-être une autre manière d'y parvenir, à moins que la seule façon soit d'ajouter un background-image ?

[silas88]

Regarde ce tuto : https://forum.forumactif.com/t377879-comment-installer-et-utiliser-font-awesome-sur-son-forum#install


Ça devrait grandement t'aider. Et fait aussi attention a la ''version'' de l'icone que tu veux mettre, les dernieres versions ont du mal

[foxies]

Merci silas88, je connaissais déjà ce tuto C'est vrai que tous les icônes ne s'affichent pas encore très bien... mais j'ai finalement réussi. Il fallait renseigner le bon font-family, soit : 'Font Awesome\ 5 Free';

Maintenant que chaque icône a son id au niveau des catégories, je bloque sur la façon dont on peut changer son apparence afin de prévenir de nouveaux messages. J'avoue ne pas du tout savoir comment m'y prendre en fait :/

[foxies]

Petit UP :p

[foxies]

UP

[foxies]

UP

[foxies]

UP

[MasDan]

Bonjour Pinke,

Maintenant que chaque icône a son id au niveau des catégories, je bloque sur la façon dont on peut changer son apparence afin de prévenir de nouveaux messages. J'avoue ne pas du tout savoir comment m'y prendre en fait :/

Ajouter le code suivant à votre template pour chacune de vos catégories

Code:

<span class="cacher">{catrow.forumrow.FORUM_FOLDER_IMG}</span>

ainsi que ceci à votre CSS

Code:

.cacher { display : none; }

La variable {catrow.forumrow.FORUM_FOLDER_IMG} est tout indiqué pour vous fournir l'information que vous rechercher. Elle fournit un url indiquant le statut des messages (nouveau, pas de nouveau ou verrouillé).
Ajouter un code JS pour déterminer la valeur de l'url et déterminer les modifications désirées à vos icônes.

[foxies]

Bonjour MasDan, merci pour votre message Arf, j'aurais dû y penser au niveau du CSS, c'était tout bête ! Néanmoins, la deuxième partie de la solution en JS me dépasse un peu plus huhu, étant donné que mes connaissances en la matière sont proches de 0

[foxies]

UP

[foxies]

UP

[foxies]

UP

[Invité]

Hello pinke,
je répond juste pour voir le lien de ton fofo dans un premier temps  .

Édit,
il faudrait avoir le template index_box:
Affichage/Templates/Général/index_box

la css associée et connaitre la structure suivante "Niveau de compression":

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



a++

[MasDan]

Bonjour Pinke,

Je ne vois pas les modifications demandées de mon dernier message.

À votre template, à la "<div class="cat-icon">, ajouter le code suivant

Code:

<span class="cacher">{catrow.forumrow.FORUM_FOLDER_IMG}</span>

et ajouter votre CSS

Code:

.cacher { display : none; }

Que vous voulez modifier exactement lorsque vous mentionnez "changer son apparence afin de prévenir de nouveaux messages."

[foxies]

Bonjour à vous deux et merci pour vos réponses

@MasDan, toutes mes excuses. J'avais enlevé le code que vous m'aviez donné pour essayer quelque chose et avait oublié de le remettre en place entre temps, ce qui est fait maintenant !

@Milouze14, voici ce que vous m'avez demandé :

Template index_box

Code:

<div class="cat">
    <!-- BEGIN catrow -->

    <!-- BEGIN tablehead -->

    <div style="display:none">{catrow.tablehead.L_FORUM}</div>

    <!-- END tablehead -->

    <!-- BEGIN forumrow -->

    <div class="cat-forum">
        <div class="cat-title"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
            <div class="cat-sub" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
            <script type="text/javascript">
                jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g, ' ')).removeAttr('id');
            </script>
            <div class="cat-desc">{catrow.forumrow.FORUM_DESC}</div>
            <div class="cat-icon"><span class="cacher">{catrow.forumrow.FORUM_FOLDER_IMG}</span></div>
        </div>
        <div class="cat-stats">
            <div class="cat-sujets">{catrow.forumrow.TOPICS} <span>sujets</span></div>
            <div class="cat-messages">{catrow.forumrow.POSTS} <span>messages</span></div>
        </div>
        <div class="cat-last">
            <!-- BEGIN avatar -->
            <div class="last-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
            <!-- END avatar -->
            <a href="{catrow.forumrow.U_LATEST_TOPIC_POST}" class="last-topic">{catrow.forumrow.LATEST_TOPIC_NAME}</a>
            <div class="last-date">{catrow.forumrow.USER_LAST_POST}</div>
        </div>
    </div>
    <!-- END forumrow -->





    <!-- BEGIN tablefoot -->

    <!-- END tablefoot -->

    <!-- END catrow -->
</div>
<script type="text/javascript">
    if (window.location.pathname === '/' || window.location.pathname.indexOf('/forum') === 0)
        $(function() {
            $('#container .cat').remove();
        });
</script>

CSS associée

Code:

/* CATEGORIES */

.cat {
    background: #efefef;
    border-bottom: 3px solid #fff;
    display: flex;
    flex-wrap: wrap;
}

.cat-forum {
    display: flex;
    flex: 1;
    height: 200px;
}

.cat-title {
    background: #353738;
    height: 100px;
    width: -webkit-fill-available;
}

.cat-title a {
    color: #fff!important;
    display: inline-block;
    font-family: Poppins;
    font-size: 12px;
    margin-left: 20px;
    margin-right: 15px;
    margin-top: 15px;
}

.cat-sub {
    display: inline-block;
}

.cat-sub a {
    background: #ffffff52;
    border-radius: 5px;
    margin-left: 0!important;
    margin-right: 0!important;
    padding: 0 5px;
}

.cat-desc {
    color: #fff;
    font-family: Poppins;
    height: 45px;
    margin-left: 20px;
    margin-top: 10px;
    overflow: hidden;
    width: 300px;
}

/* En attente */

#pi:before{
    background: #e0e0e0;
    border-radius: 5px;
    color: #353738;
    content: '\f106';
    font-family: 'Font Awesome\ 5 Free';
    font-size: 25px;
    font-weight: 900;
    margin-left: 380px;
    margin-top: -50px;
    padding: 0 10px;
    position: absolute;  
  
}
.cat-icon {
  position: absolute;
}

#blup {
      background-image: url('');
  clip-path: polygon(0px 0px, 0px 0px, 0px 860px, 300px 0px);
    }

/* En attente */

.cat-stats {
    border-bottom: 0 solid transparent;
    border-left: 0 solid transparent;
    border-right: 70px solid transparent;
    border-top: 100px solid #f5f5f5;
    margin-top: 100px;
    position: absolute;
    width: 200px;
}

.cat-sujets {
    font-family: Poppins;
    font-size: 30px;
    left: 25px;
    position: absolute;
    text-align: center;
    top: -90px;
}

.cat-messages {
    font-family: Poppins;
    font-size: 15px;
    left: 75px;
    position: absolute;
    text-align: center;
    top: -90px;
    width: auto;
}

.cat-stats span {
    display: block;
    font-size: 12px;
}

.cat-last {
    line-height: 30px;
    margin-left: 190px;
    margin-top: 135px;
    position: absolute;
    text-align: center;
    width: 255px;
}

.last-avatar {
    display: inline-block;
}

.last-avatar img {
    border-radius: 100%;
    width: 30px;
}

.last-topic {
    background: #e0e0e0;
    border-radius: 5px;
    display: inline-block;
    font-family: Poppins;
    font-size: 12px;
    line-height: initial;
    margin-bottom: 6px;
    margin-left: 5px;
    max-width: 150px;
    overflow: hidden;
    padding: 0 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.last-date {
    display: inline-block;
    font-family: Poppins;
    margin-left: 5px;
    overflow: auto;
}

.last-date br, .last-date strong {
    display: none;
}

Niveau de compression

"Séparer les catégories sur l'index :" > "Moyen"

[MasDan]

Bonjour Pinke,

À votre template, ajouter après la balise <span class="cacher">{catrow.forumrow.FORUM_FOLDER_IMG} le code suivant

Code:

<span class="icone"></span>

Exemple du code JS (probable mais non fonctionnel) à compléter pour "changer son apparence afin de prévenir de nouveaux messages."

Code:

$(function(){
  $("div.cat-icon").each(function() {
    var texte = $(this).text();
    if (texte.indexOf("_read.") > -1) {
      //  $(this).find(".icone").css(???);  à compléter
    } else if (texte.indexOf("_unread") > -1) {
      //  $(this).find(".icone").css(???);  à compléter
    } else if (texte.indexOf("_locked") > -1) {
      //  $(this).find(".icone").css(???);  à compléter
    };
  });
});

Pour le compléter il faudra savoir ce que vous désirez modifier. Question du précédent message mais non répondu.
Que voulez-vous modifier exactement lorsque vous mentionnez "changer son apparence afin de prévenir de nouveaux messages."
Le code JS ne pourra être complété et fonctionnel que lorsque l'on connaîtra les modifications requises.

[Invité]

Hello MasDan,

il me semble Pinke désires avoir les icônes "FontAwesome" et je crois qu'il n'est pas possible d'avoir un résultat concret pour cette méthode!!!!


Pinke, peux tu tester ce qui va suivre s'il te plait.

Il faut t'assurer dans un premier temps d'avoir déposé la librairie FontAwesome dans le template:

Code:

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Avant cette variable:

Code:


{T_HEAD_STYLESHEET}


Une fois effectué, on va créer un script qui va trouver le lien de l'image figurant
dans la class que MasDan t'a demandé de déposer.

Il suffit de trouver le lien des images figurant dans ton P.A :
Affichage/Images et couleurs/Gestion des images/Mode avançé


Icônes du forum

Repères le lien de chaque image:


Puis déposes les respectivement dans le script à la place de mes images:
Tu auras en supplément des infobulle qui seront modifiables.
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Coches sur l'index.

Déposes ceci:

Code:


$(function(){
    //L IMAGE VERROUILLEE
var a='https://2img.net/i/fa/modernbb/forum_read_locked.png';
//L IMAGE PAS DE NOUVEAU MESSAGE/SUJET
var b='https://2img.net/i/fa/modernbb/forum_read.png';
//L IMAGE NOUVEAU MESSAGE/SUJET
var c='https://2img.net/s/t/13/77/18/i_folder_new_big.png';
  //INFOBULLE SUR FORUM VERROUILLE
var d="Forum verrouillé";
  //INFOBULLE PAS DE NOFICATION
var e="Aucune notification";
  //INFOBULLE NOTIFICATION
var f="Nouvelle(s) notifications(s)"; 
$('.cacher:contains("'+a+'")').closest('div').addClass('verrou').attr('title',d);
$('.cacher:contains("'+b+'")').closest('div').addClass('not').attr('title',e);
$('.cacher:contains("'+c+'")').closest('div').addClass('nouveau').attr('title',f);
});



Penses à cliquer sur le bouton VALIDER

Ensuite un peu de css pour ces trois boutons.
Le site ou je prends mes boutons:
http://seehowsupport.com/font-awesome/

Donc modifies les boutons comme bon te semble:

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

Déposes ceci:

Code:


/*PAS DE MESSAGE OU SUJET*/
.cat-icon:before {
  content:"\f096";
    font-family: FontAwesome;
    background: #e0e0e0;
    padding: 0 5px;
    border-radius: 5px;
    font-size: 15px;
    position: absolute;
    margin-top: -50px;
}
/*NOUVEAU MESSAGE OU SUJET*/
.cat-icon.nouveau:before {
  content:"\f0c8";
    font-family: FontAwesome;
    background: #e0e0e0;
    padding: 0 5px;
    border-radius: 5px;
    font-size: 15px;
    position: absolute;
    margin-top: -50px;
}
/*Verrouille*/
.cat-icon.verrou:before {
  content:"\f023";
    font-family: FontAwesome;
    background: #e0e0e0;
    padding: 0 5px;
    border-radius: 5px;
    font-size: 15px;
    position: absolute;
    margin-top: -50px;
}


Penses à cliquer sur le bouton


Il faudra passer ensuite à la liste des sujets .


a++

[MasDan]

il me semble Pinke désires avoir les icônes "FontAwesome" et je crois qu'il n'est pas possible d'avoir un résultat concret pour cette méthode!!!!

Et pourtant, en test j'ai réussi ceci.

[Invité]

Re,
avec cette bibliothèque: ?

Code:

 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


Effectivement c'est bien plus simple .
Merci beaucoup .

a++

[MasDan]

Non avec la version 5.0 mais fonctionne aussi avec la version 4.

[foxies]

Bonsoir et merci à vous deux !

MasDan, toutes mes excuses, j'ai répondu vite la dernière fois et je suis passée à côté de ta question... Pour te répondre, au début je pensais simplement à un changement de couleur pour avertir de nouveaux messages mais, vraiment dans l'idéal je suis tombée récemment sur une animation "shake" que je trouvais vraiment sympa... en gros, l'icône en question, lorsqu'il y aurait des nouveaux messages, pourrait être "animé" grâce à cette keyframes - en sachant que je ne souhaite pas prévenir lorsque le forum est vérouillé, juste quand il y a de nouveaux messages :

Code:

@-webkit-keyframes spaceboots {
 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake
{
 -webkit-animation-name: spaceboots;
 -webkit-animation-duration: 0.8s;
 -webkit-transform-origin:50% 50%;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
}

Je l'ai testé rapidement et ça marche bien. A voir si ça peut marcher avec les éléments que tu m'as donnés. Sinon, je resterai avec un simple changement de couleur :p

En attendant, j'ai fait comme tu m'as dit, ce qui donne ça dans mon template à la partie concernée :

Code:

 <div class="cat-icon"><span class="cacher">{catrow.forumrow.FORUM_FOLDER_IMG}</span><span class="icone"></span></div>

Encore merci à vous deux. Je ne sais pas du coup si j'utilise tes codes, @Milouze14, vu que tu dis que c'est plus simple avec ce qu'a donné MasDan ?

[Invité]

Hello pinke et MasDan,
tu peux partir avec le script de MasDan en donnant un class au lieu de mettre de la css:
Si tu as bien déposé:

Code:

 <div class="cat-icon"><span class="cacher">{catrow.forumrow.FORUM_FOLDER_IMG}</span><span class="icone"></span></div>

Remplaces le script que je t'ai donné par celui-ci:

Code:


$(function(){
  $("div.cat-icon").each(function() {
    var texte = $(this).text();
    if (texte.indexOf("_read.") > -1) {
    $(this).find(".icone").addClass('not');
    } else if (texte.indexOf("_unread") > -1) {
      $(this).find(".icone").addClass('nouveau');
    } else if (texte.indexOf("_locked") > -1) {
      $(this).find(".icone").addClass('verrou');
    };
  });
});


Ensuite, il faut juste modifier la css:

Code:

/*PAS DE MESSAGE OU SUJET*/
.icone.not:before {
  content:"\f096";
    font-family: FontAwesome;
    background: #e0e0e0;
    padding: 0 5px;
    border-radius: 5px;
    font-size: 15px;
    position: absolute;
    margin-top: -50px;
}
/*NOUVEAU MESSAGE OU SUJET*/
.icone.nouveau:before {
  content:"\f0c8";
    font-family: FontAwesome;
    background: #e0e0e0;
    padding: 0 5px;
    border-radius: 5px;
    font-size: 15px;
    position: absolute;
    margin-top: -50px;
}
/*Verrouille*/
.icone.verrou:before {
  content:"\f023";
    font-family: FontAwesome;
    background: #e0e0e0;
    padding: 0 5px;
    border-radius: 5px;
    font-size: 15px;
    position: absolute;
    margin-top: -50px;
}


.

a++