Icônes FA et indication de nouveaux messages

3 participants

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Résolu Icônes FA et indication de nouveaux messages

Message par foxies Dim 17 Juin 2018 - 7:42

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 Very Happy


Dernière édition par pinke le Ven 29 Juin 2018 - 10:30, édité 2 fois
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par foxies Lun 18 Juin 2018 - 7:44

UP Smile
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par foxies Mar 19 Juin 2018 - 13:56

UP Smile
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par foxies Mer 20 Juin 2018 - 13:59

UP Smile
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par foxies Jeu 21 Juin 2018 - 14:12

UP Smile
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par MasDan Ven 22 Juin 2018 - 2:41

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)
MasDan

MasDan
Membre habitué

Masculin
Messages : 1538
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par foxies Ven 22 Juin 2018 - 7:50

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

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par MasDan Ven 22 Juin 2018 - 21:09

Bonjour Pinke,

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

Icônes FA et indication de nouveaux messages  2018-010

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');
});
MasDan

MasDan
Membre habitué

Masculin
Messages : 1538
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par foxies Sam 23 Juin 2018 - 12:38

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") Smile 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 ?
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par silas88 Dim 24 Juin 2018 - 4:31

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 Wink
avatar

silas88
*

Masculin
Messages : 37
Inscrit(e) le : 04/04/2010

http://s4-rnc.forumactif.com/forum
silas88 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par foxies Dim 24 Juin 2018 - 7:52

Merci silas88, je connaissais déjà ce tuto Smile 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

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par foxies Lun 25 Juin 2018 - 8:01

Petit UP :p
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par foxies Mar 26 Juin 2018 - 8:03

UP Smile
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par foxies Mer 27 Juin 2018 - 8:36

UP Smile
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par foxies Jeu 28 Juin 2018 - 12:36

UP Smile
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par MasDan Ven 29 Juin 2018 - 4:00

Bonjour Pinke,

pinke a écrit: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.





Dernière édition par MasDan le Mar 3 Juil 2018 - 6:32, édité 2 fois
MasDan

MasDan
Membre habitué

Masculin
Messages : 1538
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par foxies Ven 29 Juin 2018 - 8:05

Bonjour MasDan, merci pour votre message Smile 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 Interrog
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par foxies Sam 30 Juin 2018 - 8:20

UP Smile
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par foxies Dim 1 Juil 2018 - 8:26

UP Smile
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par foxies Lun 2 Juil 2018 - 12:35

UP Smile
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par Invité Mar 3 Juil 2018 - 3:55

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

É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++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par MasDan Mar 3 Juil 2018 - 6:44

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."
MasDan

MasDan
Membre habitué

Masculin
Messages : 1538
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par foxies Mar 3 Juil 2018 - 7:40

Bonjour à vous deux et merci pour vos réponses Smile

@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"
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Icônes FA et indication de nouveaux messages

Message par MasDan Mar 3 Juil 2018 - 18:20

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.
MasDan

MasDan
Membre habitué

Masculin
Messages : 1538
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par Invité Mar 3 Juil 2018 - 19:17

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:
Icônes FA et indication de nouveaux messages  116

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 Icônes FA et indication de nouveaux messages  3060548200


Il faudra passer ensuite à la liste des sujets Wink .


a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par MasDan Mar 3 Juil 2018 - 19:30

Milouze14 a écrit:
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.

Icônes FA et indication de nouveaux messages  2018-011
MasDan

MasDan
Membre habitué

Masculin
Messages : 1538
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par Invité Mar 3 Juil 2018 - 19:34

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 Very Happy .
Merci beaucoup Wink .

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Icônes FA et indication de nouveaux messages

Message par MasDan Mar 3 Juil 2018 - 19:46

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

MasDan
Membre habitué

Masculin
Messages : 1538
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par foxies Mar 3 Juil 2018 - 20:41

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 ? reflexion
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icônes FA et indication de nouveaux messages

Message par Invité Mer 4 Juil 2018 - 3:56

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;
}

Wink .

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum