La date/heure actuelle est Ven 29 Mar 2024 - 0:39
3 résultats trouvés pour notif_list
positionnement barre de navigation + fusion avec les notifications
Merci j'avais zappé ce détail *sort*Un dernier point et je pourrai mettre le sujet en résolu
pour bidouiller la forme et le contenu quand on appuie sur la notif, c'est bien ici :
.fa_tbMainElement.notification ul#notif_list ?
ici : #fa_right #fa_notifications, #notif_list .content div j'ai vu que c'était pour l'apparence externe ? J'ai presque fini d'obtenir ce que je veux, mais je voulais savoir, je peux rajouter quoi comme "truc" pour que ce soit sur la même ligne que la navigation ? (à l'oeil ça se voit pas trop mais ça plante un peu)
Sinon tout est bon si je me suis pas trompée :=)
encore merci et d'avance bonne soirée
Édit : jviens de voir ton édition je regarde ça demain
- le Dim 9 Aoû 2020 - 20:27
- Rechercher dans: Archives des problèmes avec un code
- Sujet: positionnement barre de navigation + fusion avec les notifications
- Réponses: 13
- Vues: 957
Probleme de notifications dans la barre de nav modernBB
BonjourNormalement avec le deuxième lien que j'ai donné, les codes fournis permettent d'ouvrir une petite fenêtre avec la liste des notifications reçues (comme ici en gros quand on clique sur l'encart notifications en haut à droite), c'est ça qui ne marche pas, en plus de ne pas avoir l'indication du nombre de notifications non lues.
Pour les codes, ils sont dans les liens, en, libre d'accès, je n'ai rien touché de plus, mais les voici:
Le javascript
- Spoiler:
- $(function(){
function majNotification(){
// On récupére le contenu des notifications de la toolbar
var contentNotif = $('#fa_notifications')[0].outerHTML;
contentNotif += $('#fa_notifications + #notif_list')[0].outerHTML;
if(firstTime){
// Si on arrive sur la page la première fois,
// on ajoute une classe sur le li qui contient le lien des notifs
// Et on remplace le contenu par celui récupéré plus haut
$('.navbar.navlinks').find('a.mainmenu[href="/profile?mode=editprofile&page_profil=notifications"]').parent('li').addClass('link-notifs').html(contentNotif);
// On indique qu'on a déjà vérifié la toolbar une fois
firstTime = false;
}else{
// Si on a déjà vérifié la toolbar une fois
// dans ce cas, on se contente de mettre les notifs à jour
$('.navbar.navlinks').find('.link-notifs').html(contentNotif);
}
}
// Au chargement de la page, on indique qu'on n'a pas encore vérifié la toolbar
var firstTime = true;
// Au chargement de la page, on attend 1 seconde (1500 ms), on appelle notre fonction
setTimeout(function(){
majNotification();
}, 1000);
// Puis, toutes les 30 secondes (30000 ms) on appelle à nouveau notre fonction
setInterval(function(){
majNotification();
}, 30000);
$('body')
// Au clic sur le lien des notifications dans la barre de navigation
// On lui ajoute une classe pour déplier la liste des notifs
.on('click', '.navbar .link-notifs #fa_notifications', function(evt){
evt.preventDefault();
$(this).parent().toggleClass('notification');
});
});
Le CSS
- Spoiler:
- body{
margin-top:0 !important;
}
.headerbar{
overflow: inherit;
}
.is-sticky#headerbar-top.w-toolbar {
top: 0px !important;
}
#fa_toolbar,
#fa_toolbar_hidden{
display:none;
}
.navbar > li{
position: relative;
}
.navbar #fa_notifications {
color: #fff;
cursor: pointer;
line-height: 30px;
padding: 0 5px
}
.navbar #fa_notifications.unread{
color: red;
}
.navbar #fa_notifications:hover{
color: #000;
}
.navbar #notif_list{
background-color: #fdfdfd;
border: none;
border-radius: 5px;
box-shadow: 0 0 9px rgba(0,0,0,0.3), 0 0 1px 1px rgba(0,0,0,0.2);
color: #333;
display: none;
font-size: 1.3rem;
list-style-type: none;
margin: 0;
padding: 10px;
position: absolute;
text-align: left;
top: 42px;
width: 200px;
z-index: 999;
}
.navbar #notif_list li{
margin: 4px 0;
opacity: .5!important;
}
.navbar .notification #notif_list {
display: block;
}
.navbar #notif_list .content a{
color: #000;
font-weight: bold;
padding: 0;
}
.navbar #notif_list .see_all a{
background: #333;
border: 1px solid #333;
color: #fdfdfd;
}
.navbar #notif_list .see_all a:hover{
background: #fdfdfd;
color: #333;
}
.navbar #notif_list li.see_all{
opacity: 1!important;
}
.navbar #notif_list li.see_all,
.navbar #notif_list li.unread {
opacity: 1!important;
}
- le Dim 19 Juil 2020 - 12:41
- Rechercher dans: Corbeille & Titres non explicites
- Sujet: Probleme de notifications dans la barre de nav modernBB
- Réponses: 5
- Vues: 1773
Personnaliser entièrement la toolbar via CSS
Personnaliser entièrement la toolbar via CSS |
L’astuce qui suit vous permettra de connaître les différents identifiants CSS utilisés sur la toolbar de votre forum Forumactif. Vous pourrez ainsi personnaliser l’apparence de cette barre et adapter son style au reste de votre forum. Un libre service est également disponible en fin de tutoriel !
L’ensemble des codes sont à insérer dans :
Les éléments CSS de la Toolbar
Différentes astuces en termes de personalisationSupprimer des élémentsSupprimer la barre de recherche
Supprimer les boutons de partage
Supprimer le lien "Bienvenue [X]"
Supprimer la flèche "Cacher la toolbar"
Modifier des élémentsMettre une image de fond
Modifier les boutons de partage- Modifier le bouton "Facebook" :
- Modifier le bouton "Twitter" :
- Modifier le bouton "Mail" :
- Modifier le bouton "Flux RSS" :
Remplacez adresse_de_votre_image par l'adresse de votre image. Libre serviceNous vous proposons quelques thèmes afin d'agrémenter votre toolbar. Il suffit de copier/coller le code correspondant au thème de votre choix :
Thème 1
Thème 2
Thème 3
Thème 4
Si vous souhaitez proposer d'autres thèmes, n'hésitez pas à envoyer un MP à un aidactif ou à un modéractif. |
Cette astuce a été rédigée par Matriochka et Tech. Mise à jour par Bipo (août 2019). Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI. |
- le Mar 29 Juil 2014 - 14:40
- Rechercher dans: Trucs et astuces
- Sujet: Personnaliser entièrement la toolbar via CSS
- Réponses: 0
- Vues: 12600