Header
Partagez | 

[FA] Message de notifications

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur

Message Sujet: [FA] Message de notifications   Sam 5 Juil - 10:49

Hello les gens !

Dans ce tutoriel, nous allons apprendre à faire ceci :
Spoiler:
 
C'est-à-dire afficher un bloc de "notifications" de message.

Idea Les notifications vous informent quasi instantanément de la réception des demandes d'amitié, messages privés, messages sur le profil, messages dans un sujet surveillé, demandes d'adhésion à un groupe, abus signalés sur le forum, nouveaux rapports d’alerte ou encore de la connexion d'un ami.
(explications données par ForumActif)

Idea Pré-requis : Rien de particulier ici. Il faut juste :
  • Avoir accès à la CSS du forum,
  • Installer la toolbar de FA.


Allons-y.

Installer la toolbar de FA


Commençons par le commencement Smile Pour pouvoir récuperer le bouton "notification", nous allons utiliser la toolbar de fa. Pour l'installer, c'est très simple. Il suffit d'aller dans :
Panneau d'admin >> Modules >> Toolbar >> Configuration >> Activer la toolbar : oui (on se fiche du reste des réglages).

Celle-ci apparait maintenant sur votre forum.
Spoiler:
 
Pour le moment, nous avons beaucoup trop d'informations visibles. Réglons ceci.

On s'amuse avec la CSS


Deux étapes ici :
  • Repérer ce qu'on veut cacher et le faire,
  • Mettre en page notre bouton.

Allons-y !

On cache les infos inutiles


Ici, nous allons masquer grâce à la CSS les informations de la toolbar que nous ne voulons pas afficher. Pour cela, on va devoir repérer les différentes classes (ou id) qui contiennent ces éléments. On y va !
-> la barre de recherche => .fa_tbMainElement#fa_search
-> le texte "partagez" + les icones de réseaux sociaux => .fa_tbMainElement#fa_share
-> le texte "Bienvenue pseudo" => #fa_menu
-> la flèche pour cacher la barre => .rightHeaderLink#fa_hide


On va donc commencer par ajouter dans notre CSS ce qu'il faut pour masquer tout ça
Code:
.fa_tbMainElement#fa_search,
.fa_tbMainElement#fa_share,
#fa_menu,
.rightHeaderLink#fa_hide{
  display:none!important;
}

Si on s'arrête là (avant de faire la mise en page), on a encore 2 problèmes :
-> le fond de la barre qui reste visible
Spoiler:
 
-> les liens "s'enregistrer" et "connexion" qui sont visibles quand on est pas connecté.
Spoiler:
 

On va donc régler ces détails avant de bosser notre mise en page Smile

Tout d'abord, on va cacher les liens : une fois encore, on repère la class/id et on cache. Il s'agit donc de ça : .fa_tbMainElement#fa_right a.rightHeaderLink que l'on va ajouter au reste de notre code qui masque :
Code:
.fa_tbMainElement#fa_search,
.fa_tbMainElement#fa_share,
#fa_menu,
.rightHeaderLink#fa_hide,
.fa_tbMainElement#fa_right a.rightHeaderLink{
    display:none!important;
}

Mais si on laisse comme ça, le lien "notifications" que l'on voit quand on est connecté est masqué aussi. On va donc ajouter :
Code:
.fa_tbMainElement#fa_right a.rightHeaderLink#fa_notifications{
    display:block !important; 
}
pour l'afficher.

Ensuite, on supprime la couleur de fond de la barre. Celle-ci est ciblée grâce à cet id : #fa_toolbar. On va donc ajouter :
Code:
#fa_toolbar{
    background-color:transparent!important;
}

---

Pour le moment, on a donc cette CSS
Code:
/*** --- Boutons "notifications" --- ***/

/* On supprime la couleur de fond */
#fa_toolbar{
    background-color:transparent!important;
}

/* On masque ce quon ne veut pas afficher */
.fa_tbMainElement#fa_search,
.fa_tbMainElement#fa_share,
#fa_menu,
.rightHeaderLink#fa_hide,
.fa_tbMainElement#fa_right a.rightHeaderLink{
    display:none!important;
}

/* On affiche le lien "notification" */
.fa_tbMainElement#fa_right a.rightHeaderLink#fa_notifications{
    display:block !important; 
}
Et ce rendu :
Spoiler:
 

Il n'y a plus qu'à faire "du beau" ^^

On met en page


On va passer maintenant à l'étape "mise en forme".

On va commencer par fixer une taille au bloc "notifications" (width), à ajouter un peu d'espace entre le bord du bloc et le texte (padding), à centrer le texte (text-align) et à ajouter une couleur de fond (background) et une couleur de typo. Ça nous donne donc :
Code:
.fa_tbMainElement#fa_right a.rightHeaderLink#fa_notifications{
    display:block !important; 
    width:150px;
    padding: 0 2px; /* Pour info : Haut/bas droite/gauche */
    text-align:center;
    background:black;
    color:white;
}

---

Si vous cliquez, vous allez voir que la liste en dessous n'est pas de la même taille.
Spoiler:
 
On va régler ça Smile Cette liste est dans l'élement qui a cet id : "#fa_toolbar #fa_right.notification #notif_list". On va juste se contenter de lui donner une taille (width) et on va lui dire "tu te colles au bord droit de la fenetre". Pour cela, on va lui imposer une position à droite de 0px et une position à gauche automatiquement calculée par rapport à la div qui l'entoure (celle ayant pour nom de class et id "") Smile Ce qui nous donne :
Code:


#fa_toolbar #fa_right.fa_tbMainElement{
    position:relative;
    }

#fa_toolbar #fa_right.notification #notif_list{
    width:152px;
    right:0;
    left:auto !important;
}

Mais là, si on poste un message et qu'on a une notif, le message est coupé.
Spoiler:
 
Réglons donc la largeur des blocs contenant nos textes.
Code:
/* Taille des différents points de la liste de notif' */
#fa_toolbar #fa_right #notif_list li .content,
#fa_toolbar #fa_right #notif_list li{
    width:140px !important;
    }
   
/* Taille des blocs textes des points de la liste de notif' */
#fa_toolbar #fa_right #notif_list li .contentText{
    overflow:visible !important;
    width:100% !important ;
    height:auto !important;
}

Et du coup, si on mettait un peu mieux en page le bloc "notification non lue" ? (class "unread"). On va juste lui ajouter une bordure à gauche :
Code:
/* Bloc "notifs non lues" */
.fa_tbMainElement#fa_right a.rightHeaderLink.unread#fa_notifications{
    width:149px; /* On supprime 1px à la largeur car la bordure fera 1px d'épaisseur */
    border-left:1px solid black;
}

Ça commence à prendre forme ^^
Spoiler:
 
Il ne nous restera plus qu'à placer le bloc où on le désires.

Tout va se passer ici, dans cette id : #fa_toolbar. On va lui donner une largeur (width), et on va dire au bloc "tu te places à 80px du bord droit, et pour le bord gauche, tu calcules tout seul". ça nous donne donc :
Code:
/* On supprime la couleur de fond & on place le bloc*/
#fa_toolbar{
    background-color:transparent!important;
    width:150px !important;
    left:auto!important;
    right:80px;
}

Si on s'arrête là, le bloc "voir toutes les notifications" dépasse.
Spoiler:
 
Cela va se régler ici : #fa_toolbar #fa_right #notif_list li.see_all. On va donner une largeur en pourcentage, et on va centrer le texte
Code:

/* Mise en page du bloc "voir toutes les notifications" */
#fa_toolbar #fa_right #notif_list li.see_all{
    width:90%!important;
    text-align:center!important;
}

Enfin, on va placer le logo de forumactif de manière sympa :
Code:

/* On place de manière sympa le logo de FA */
.fa_tbMainElement#fa_left{
    font-size: 11px;
    position: absolute;
    right: -10px;
    top: 13px;
    -ms-transform: rotate(-16deg); /* IE 9 */
    -webkit-transform: rotate(-16deg); /* Chrome, Safari, Opera */
    transform: rotate(-16deg);
}

---

Et... C'est terminé !

Voici donc la CSS complète :
Code:
/*** --- Boutons "notifications" --- ***/

/* On supprime la couleur de fond & on place le bloc*/
#fa_toolbar{
    background-color:transparent!important;
    width:150px !important;
    left:auto!important;
    right:80px;
}

/* On masque ce quon ne veut pas afficher */
.fa_tbMainElement#fa_search,
.fa_tbMainElement#fa_share,
#fa_menu,
.rightHeaderLink#fa_hide,
.fa_tbMainElement#fa_right a.rightHeaderLink{
    display:none!important;
}

/* On affiche le lien "notification" */
.fa_tbMainElement#fa_right a.rightHeaderLink#fa_notifications{
    display:block !important;
    width:150px;
    padding: 0 2px; /* Pour info : Haut/bas droite/gauche */
    text-align:center;
    background:black;
}

/* On indique une référence pour placer la liste des notifications */
#fa_toolbar #fa_right.fa_tbMainElement{
    position:relative;
    }
   
/* On met en page la liste des notifications */
#fa_toolbar #fa_right.notification{
    z-index: 999;
}

#fa_toolbar #fa_right.notification #notif_list{
    width:152px;
    right:0;
    left:auto !important;
}

/* Taille des différents points de la liste de notif' */
#fa_toolbar #fa_right #notif_list li .content,
#fa_toolbar #fa_right #notif_list li{
    width:140px !important;
    }
   
/* Taille des blocs textes des points de la liste de notif' */
#fa_toolbar #fa_right #notif_list li .contentText{
    overflow:visible !important;
    width:100% !important ;
    height:auto !important;
}

/* Bloc "notifs non lues" */
.fa_tbMainElement#fa_right a.rightHeaderLink.unread#fa_notifications{
    width:149px; /* On supprime 1px à la largeur car la bordure fera 1px d'épaisseur */
    border-left:1px solid black;
}

/* Mise en page du bloc "voir toutes les notifications" */
#fa_toolbar #fa_right #notif_list li.see_all{
    width:90%!important;
    text-align:center!important;
}

/* On place de manière sympa le logo de FA */
.fa_tbMainElement#fa_left{
    font-size: 11px;
    position: absolute;
    right: -10px;
    top: 13px;
    -ms-transform: rotate(-16deg); /* IE 9 */
    -webkit-transform: rotate(-16deg); /* Chrome, Safari, Opera */
    transform: rotate(-16deg);
}




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



Je, soussignée, Miettes,  accepte qu'un directeur reposte le tutoriel "Message de notifications" tel que je l'ai rédigé.


Dernière édition par Miettes le Jeu 29 Sep - 12:03, édité 1 fois
Revenir en haut Aller en bas
[FA] Message de notifications
Page 1 sur 1
 Sujets similaires
-
» [Résolu]peux t'on modifier un message déjà envoyé
» [Résolu] Zone de notifications
» [Résolu] Outlook Express : impossible de supprimer le message
» Un icône de nouveau message plus voyant
» Message d'erreur pas de vitesse
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+