5 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

Probleme de notifications dans la barre de nav modernBB

Bonjour

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

Dissocier les notifications de la toolbar

Don Vito Corleone a écrit:Pas de soucis je vais vous donner la solution(Gizmo m'en veux pas)

Il faudrait par contre utiliser du javascript et du css...
A mettre dans la gestion des codes javascript sur toutes les pages:
Code:
$(function(){ $(function(){ $('a#fa_notifications').insertBefore('#page-body'); // Choisir où placer le lien Notifications $('body').removeAttr('style'); }); });

Et à mettre dans la feuille de style css de votre forum:
Code:
#notif_list { /* Menu déroulant des notifications */ top: 250px; visibility: visible !important; } #fa_toolbar { visibility: hidden !important; } #fa_left a { pointer-events: none !important; opacity: 0 !important; } #fa_notifications.unread #notif_unread { display: inline !important; } #fa_notifications #notif_unread { display: none; }

Si vous avez quelques notions ça va rouler...Suffit de choisir l'emplacement dans le code javascript où vous voulez que le lien "Notifications" s'affiche et dans le code css la partie pour le menu déroulant est : #notif_list
J'ai mis des commentaires on sait jamais si ça peut aider.
edit : j'ai rien dit (ai supprimé la portion de js)

Don Vito Corleone, pour choisir l'emplacement dans le code Javascript je pense que c'est là

Code:: $('a#fa_notifications').insertBefore('#page-body');

mais il faut remplacer par quoi par exemple ?
On peut demander à le mettre sur la version mobile ?

Merci

horusbk

Dissocier les notifications de la toolbar

Pas de soucis je vais vous donner la solution(Gizmo m'en veux pas)

Il faudrait par contre utiliser du javascript et du css...
A mettre dans la gestion des codes javascript sur toutes les pages:

Code:: $(function(){ $(function(){ $('a#fa_notifications').insertBefore('#page-body'); // Choisir où placer le lien Notifications $('body').removeAttr('style'); }); });

Et à mettre dans la feuille de style css de votre forum:

Code:: #notif_list { /* Menu déroulant des notifications */ top: 250px; visibility: visible !important; } #fa_toolbar { visibility: hidden !important; } #fa_left a { pointer-events: none !important; opacity: 0 !important; } #fa_notifications.unread #notif_unread { display: inline !important; } #fa_notifications #notif_unread { display: none; }

Si vous avez quelques notions ça va rouler...Suffit de choisir l'emplacement dans le code javascript où vous voulez que le lien "Notifications" s'affiche et dans le code css la partie pour le menu déroulant est : {#}notif_list{/#}
J'ai mis des commentaires on sait jamais si ça peut aider.
edit : j'ai rien dit (ai supprimé la portion de js) autant même ne rien supprimer du coup et déplacer les copyrights sur la page.
edit2: Il faudrait remplacer {#}page-body{/#} par tout ce qui pourrait servir à choisir l'emplacement (class,id,attributs etc) moi je m'aide de l'outil du développeur(CTRL+MAJ+i) sur le navigateur

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 !

	Si vous débutez dans la personnalisation en CSS, il est fortement recommandé de vous fier au tutoriel qui suit : Le CSS : Comment ça marche ? afin de pouvoir manipuler correctement les diverses propriétés du langage.

L’ensemble des codes sont à insérer dans :

Panneau d'administration  Affichage  Images et Couleurs - Couleurs :: Feuille de style CSS

Les éléments CSS de la Toolbar

div#fatoolbar	Barre complète
div#fa_search / div#fa_textarea
#fa_magnifier
div#fa_share
span#fa_share_text
a#fa_fb
a#fa_twitter
a#fa_mail
a#fa_rss
div#fa_right
a#fa_welcome
a#fa_notifications
span#notif_unread
a#fa_hide
a#fa_show
ul#fa_menulist
#fa_usermenu
#fa_ranktitle
ul#notif_list
li.see_all
li.unread
#notif_list li .contentText
#notif_list li a.delete
div.fa_notification
div.fa_notification .content

Différentes astuces en termes de personalisation

Supprimer des éléments

Supprimer la barre de recherche

Code:: div#fa_search {display:none!important;}

Supprimer les boutons de partage

Code:: span#fa_share {display:none!important;}

Supprimer le lien "Bienvenue [X]"

Code:: a#fa_welcome {display:none!important;}

Supprimer la flèche "Cacher la toolbar"

Code:: a#fa_hide {display: none!important;}

Modifier des éléments

Mettre une image de fond

Code:: #fa_toolbar, #fa_toolbar_hidden {background-image: url('http://url_de_mon_image');}

Modifier les boutons de partage

- Modifier le bouton "Facebook" :

Code:: a#fa_fb { background:url('adresse_de_votre_image')no-repeat!important; }

- Modifier le bouton "Twitter" :

Code:: a#fa_twitter { background:url('adresse_de_votre_image')no-repeat!important; }

- Modifier le bouton "Mail" :

Code:: a#fa_mail { background:url('adresse_de_votre_image')no-repeat!important; }

- Modifier le bouton "Flux RSS" :

Code:: a#fa_rss { background:url('adresse_de_votre_image')no-repeat!important; }

Remplacez adresse_de_votre_image par l'adresse de votre image.

Libre service

Nous 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 :

Panneau d'administration  Affichage  Images et Couleurs - Couleurs :: Feuille de style CSS

Thème 1

Tag notif_list sur Forum gratuit : Le forum des forums actifs Toolba10

Code:: div#fa_toolbar { background-color: #24384c; /* Couleur de fond */ border-radius: 0 0 50px 50px; /* Arrondis les bords de la toolbar */ box-shadow: 0 0 5px #000000; /* Affiche une ombre */ margin: auto; /* Centre la toolbar */ width: 98%; /* Modifie la longueur de la toolbar */ } div#fa_toolbar div, div#fa_toolbar span { margin: 0 15px; /* Repositionne correctement le contenu de la toolbar */ }

Thème 2

Tag notif_list sur Forum gratuit : Le forum des forums actifs Toolba11

Code:: div#fa_toolbar { background-color: #657488; /* Couleur de fond */ border: 2px solid white; /* Ajoute une bordure de 2px de couleur blanche */ border-radius: 50px; /* Arrondis les bords de la toolbar */ margin: auto; /* Centre la toolbar */ position: relative; /* Permet de décaler la toolbar */ top: 10px; /* Décale la toolbar du haut */ width: 98%; /* Modifie la longueur de la toolbar */ } a#fa_hide { display: none!important; /* Supprime la flèche "Cacher la toolbar" : Conseillé de le laisser ! */ } div#fa_toolbar div, div#fa_toolbar span { margin: 0 15px; /* Repositionne correctement le contenu de la toolbar */ }

Thème 3

Tag notif_list sur Forum gratuit : Le forum des forums actifs Toolba12

Code:: #fa_toolbar { background-color: transparent !important; /* Rend transparent le fond principal */ } #fa_right { background-color: #000000; /* Couleur de fond */ border-radius: 0 0 40px 40px; /* Arrondis les bords */ padding-left: 10px; /* Règle la marge intérieure gauche */ padding-right: 10px; /* Règle la marge intérieure droite */ position: relative; /* Permet de décaler la toolbar */ right: 20px; /* Décale la toolbar de la droite */ } #fa_left { background-color: #000000; /* Couleur de fond */ border-radius: 0 0 0 40px; /* Arrondis les bords */ position: relative; /* Permet de décaler la toolbar */ left: 20px; /* Décale la toolbar de la gauche */ margin-top: -1px; /* Petite correction d'1px - Peut dépendre de votre forum (peut être retirée) */ padding-left: 10px; /* Règle la marge intérieure gauche */ padding-right: 10px; /* Règle la marge intérieure droite */ } #fa_search { background-color: #000000; /* Couleur de fond */ margin-top: -1px; /* Petite correction d'1px - Peut dépendre de votre forum (peut être retirée) */ padding-left: 10px; /* Règle la marge intérieure gauche */ padding-right: 10px; /* Règle la marge intérieure droite */ } #fa_share { background-color: #000000; /* Couleur de fond */ border-radius: 0 0 40px; /* Arrondis les bords */ position: relative; /* Permet de décaler la toolbar */ left: -20px; /* Décale la toolbar de la gauche */ margin-top: -1px; /* Petite correction d'1px - Peut dépendre de votre forum (peut être retirée) */ padding-left: 10px; /* Règle la marge intérieure gauche */ padding-right: 10px; /* Règle la marge intérieure droite */ }

Thème 4

Tag notif_list sur Forum gratuit : Le forum des forums actifs Toolba13

Code:: #fa_toolbar { background-color: transparent !important; /* Rend transparent le fond principal */ } #fa_right { background-color: #b3b3b3; /* Couleur de fond */ border-radius: 0 0 0 40px; /* Arrondis les angles */ padding-left: 10px; /* Règle la marge intérieure gauche */ padding-right: 10px; /* Règle la marge intérieure droite */ } #fa_left { background-color: #b3b3b3; /* Couleur de fond */ margin-top: -1px; /* Petite correction d'1px - Peut dépendre de votre forum (peut être retirée) */ padding-left: 10px; /* Règle la marge intérieure gauche */ padding-right: 10px; /* Règle la marge intérieure droite */ } #fa_search { background-color: #b3b3b3; /* Couleur de fond */ margin-top: -1px; /* Petite correction d'1px - Peut dépendre de votre forum (peut être retirée) */ padding-left: 10px; /* Règle la marge intérieure gauche */ padding-right: 10px; /* Règle la marge intérieure droite */ position: relative; /* Permet de décaler la toolbar */ left: -20px; /* Décale la toolbar de la gauche */ } #fa_share { background-color: #b3b3b3; /* Couleur de fond */ border-radius: 0 0 40px; /* Arrondis les angles */ left: -40px; /* Décale la toolbar de la gauche */ margin-top: -1px; /* Petite correction d'1px - Peut dépendre de votre forum (peut être retirée) */ padding-left: 10px; /* Règle la marge intérieure gauche */ padding-right: 10px; /* Règle la marge intérieure droite */ position: relative; /* Permet de décaler la toolbar */ }

Si vous souhaitez proposer d'autres thèmes, n'hésitez pas à envoyer un MP à un aidactif ou à un modéractif.

Vérifiez vos informations

5 résultats trouvés pour notif_list

positionnement barre de navigation + fusion avec les notifications

Probleme de notifications dans la barre de nav modernBB

Dissocier les notifications de la toolbar

Dissocier les notifications de la toolbar

Personnaliser entièrement la toolbar via CSS

Les éléments CSS de la Toolbar

Différentes astuces en termes de personalisation

Supprimer des éléments

Supprimer la barre de recherche

Supprimer les boutons de partage

Supprimer le lien "Bienvenue [X]"

Supprimer la flèche "Cacher la toolbar"

Modifier des éléments

Mettre une image de fond

Modifier les boutons de partage

Libre service

Thème 1

Thème 2

Thème 3

Thème 4