Navigation et liens à gauche du forum - problème d'intégration code (css ?)

[Zarby]

Bonjour,

J'aimerai créer à gauche du forum "une boite" de navigation avec la barre de navigation refaite, et des liens divers.

Mon code est fait, et fonctionne bien sur une page HTML. Mais je n'arrive pas à l'intégrer sur le forum et la manip "nouveaux messages" ne fonctionne pas.

Je m'explique.

Ce que je veux intégrer ressemble à cela : http://designkanala.forums-actifs.com/h1-navigation

1) Lorsque j'intègre le code de base sur le forum, ça se met tout en bas. Bon ok, je peux le positionner via le css.
MAIS justement, quand je veux inclure le css, là tout "plante". Le forum ne s'affiche plus correctement et c'est comme s'il n'y avait plus de mise en forme css modifié et de base.  C'est le premier problème que je rencontre, assez conséquent du coup :S

Code que j'intègre dans le template

Code:

Edit : il ne passe pas ici, je ne sais pas pourquoi, les balises codes sautent donc... Clique droit sur ma page html. le code est à l'intérieur. J'intègre le lien vers le Js, le code à partir de <div id="wrapper"> jusqu'à        } else {
            $(this).removeClass('active');
            $(this).next().stop(true,true).slideUp('normal');
        }
    });
 
 });
</script>

Code css qui fait tout planter quand je l'intègre à la feuille de style

Code:

ul,
ul ul {
    margin: 0;
    padding: 0;
    list-style: none;}
    
 #wrapper {  
    width: 220px;
    margin: 0px auto;
    font-size: 0.8125em;}

.NNavig {
    width: auto;
    height: auto;
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
    -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);}
.NNavig > li > a {
    background-color: #616975;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
    background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
    border-bottom: 1px solid #33373d;
    -webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
    -moz-box-shadow: inset 0px 1px 0px 0px #878e98;
    box-shadow: inset 0px 1px 0px 0px #878e98;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 2.75em;
    display: block;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0,0,0,.5);}
    
    .NNavig ul li a {
    background: #fff;
    border-bottom: 1px solid #efeff0;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 2.75em;
    display: block;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.923em;
    font-weight: 400;
    color: #878d95;}

    .NNavig ul li:last-child a {
    border-bottom: 1px solid #33373d;}
    
    .NNavig > li > a:hover,
.NNavig > li > a.active {
    background-color: #35afe3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
    background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
    border-bottom: 1px solid #103c56;
    -webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
    -moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
    box-shadow: inset 0px 1px 0px 0px #6ad2ef;}
.NNavig > li > a.active {
    border-bottom: 1px solid #1a638f;}
    
      
    .NNavig > li > a span {
    font-size: 0.857em;
    display: inline-block;
    position: absolute;
    right: 1em;
    top: 50%;
    background: #48515c;
    line-height: 1em;
    height: 1em;
    padding: .4em .6em;
    margin: -.8em 0 0 0;
    color: #fff;
    text-indent: 0;
    text-align: center;
    -webkit-border-radius: .769em;
    -moz-border-radius: .769em;
    border-radius: .769em;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    text-shadow: 0px 1px 0px rgba(0,0,0,.5);
    font-weight: 500;}
.NNavig > li > a:hover span, .NNavig > li a.active span {
    background: #2173a1;}
    
    .NNavig ul > li > a span {
    font-size: 0.857em;
    display: inline-block;
    position: absolute;
    right: 1em;
    top: 50%; /
    background: #fff;
    border: 1px solid #d0d0d3;
    line-height: 1em;
    height: 1em;
    padding: .4em .7em;
    margin: -.9em 0 0 0;
    color: #878d95;
    text-indent: 0;
    text-align: center;
    -webkit-border-radius: .769em;
    -moz-border-radius: 769em;
    border-radius: 769em;
    text-shadow: 0px 0px 0px rgba(255,255,255,.01));}

 
.NNavig > li > ul li:hover a,
.NNavig > li > ul li:hover a span,
.NNavig > li > ul li:hover a:before {
    color: #32373D;}


2) le script java pour remplacer "messagerie" par "nouveaux messages" ne fonctionnent pas :S C'est un code que j'utilisai sur un autre forum (sous une autre forme) et qui fonctionnait. Par quoi puis-je le remplacer?

Code:

<script type="text/javascript">
                function blinker()
{
        setTimeout(function() {setInterval(function () {$("#new_message").css('color', '#9DB9D4');},1000);},500);
        setInterval(function () {$("#new_message").css('color', '#fff');},1000);
}

jQuery().ready(function(){
      
        /* on prend l'élément du NNavig de base de nouveau message */
        var e= $("#i_icon_mini_new_message");
      
        /* si il y en a pas, c'est qu'il y a pas de nouveau message donc on termine là */
        if(!e.length){
        return;
      }else{
      
        /* sinon */
        /* on prend le nombre de nouveau message */
        var n= +e.attr("title").replace(/^([1-9][0-9]*) .*$/,"$1");
      
        /* on change l'identifiant en new_message et on remplace le texte */
        $("#mp").attr("id","new_message").text(n+" /! Messages"+(n>1?"s":""));
      
        blinker();
      }
    
    
        });
                </script>

3) Question bonus : est-ce qu'il y a moyen que je mette cette "boite" dans un seul template pour qu'elle apparaisse sur toutes les pages? D'hab', je l'installe dans tous les templates corresponds donc s'il y a moyen ça fera gagner du temps et ça alourdis moins le tout.


Merci par avance pour l'aide qui me sera apporté [/code]

[Zarby]

un up ?

[Zarby]

Un up

[Zarby]

up !

[Invité]

Hello Zarby,

la balise code retourne des erreurs, impossible d'ajouter du contenu html!!!!

il est normal que ton script ne fonctionne pas car tu as du supprimer la variable qui gère la barre de navigation pour la remplacer par ton menu (très joli d'ailleurs).

Bref, il faut dire au script de trouver ce ce qui se trouve dans la boite de réception et de l'afficher dans ce menu.

Dans le template overall_header:
Affichage/Templates/Général/ overall_header

tu as juste ajouté le menu présent ?

a++

[Invité]

Hello ,
désolé pour le double post, mais l'édition me procure des soucis avec la balise code.


Zarby,
J'ai revu ton code html car les lignes "Connexion" "Mp" "S'enregistrer" et "Déconnexion" s'affichaient pour tout le monde.
Pour remédier à cela, chaque ligne ou groupe de lignes doivent être commentées par ceci :
Pour les invités:

Code:

<!-- BEGIN switch_user_logged_out -->
Ligne visible que par les invités
<!-- END switch_user_logged_out -->

Pour les membres:

Code:

<!-- BEGIN switch_user_logged_in -->
Lignes pour les membres
<!-- END switch_user_logged_in -->

dans le template mentionné recherches ceci:

Code:

      <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
                    <tr>
                        <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
                    </tr>
                </table>


Supprimes et remplaces par le contenu de ce message:

http://invision.bbactif.com/t53-forumactif-balise-code-en-mode-html#279

puis tout en bas de ce template après ce commentaire:

Code:

<!-- END html_validation -->

Déposes le contenu de ce message:

http://invision.bbactif.com/t54-fin-template#280


Penses à enregistrer puis à valider en cliquant respectivement sur  puis

La c.s.s a été ajoutée afin de ne pas surcharger ta feuille de style.


Puis le script qui va rechercher si il y a des mps et agir sur le menu.


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Codes Javascript

Mets un titre explicite.
Coches sur les sous forums.


Déposes ceci:

Code:

$(function(){
  if (_userdata["user_id"] >= (0)){
$.get('/privmsg?folder=inbox' , function(data){
var h=$(data).find('img[alt="Message Non-lu"]').length;
if(h){
$('.M14_menu li[id="M14_first"][class="item1"] a span.first,li[id="M14_Mp"] a ').addClass('M14_mp');
$('.info.first.M14_mp,li[id="M14_Mp"] a span').each(function() {
var elem = $(this);
setInterval(function() {
if (elem.css('visibility') == 'hidden') {
elem.css('visibility', 'visible');
} else { elem.css('visibility', 'hidden');}}, 800);});
if(h==1){$('.M14_menu li[id="M14_first"] a:first,.M14_menu li[id="M14_first"] a[href="/privmsg?folder=inbox"] ').attr('title','Vous avez reçu un nouveau MP');
$('a[id="mp"] b').text('Nouveau MP');
}
else{
$('.M14_menu li[id="M14_first"] a:first,.M14_menu li[id="M14_first"] a[href="/privmsg?folder=inbox"]').attr('title','Vous avez reçu '+h+' nouveaux MPs');
$('a[id="mp"] b').html('Nouveaux MPs ( '+h+' ) ');}}});
}
});

Penses a cliquer sur le bouton VALIDER



a++

[Zarby]

Bonjour @"Milouze14" !

Tout d'abord merci de ton aide <3
Cela fonctionne presque !
Pour la messagerie, le message ne change pas malheureusement :S

Sur la page d'accueil la navigation fonctionne très bien. Mais quand nous entrons dans un sujet c'est une autre paire de manche :S Elle bugue et fait buguer le contenu des messages

Fichiers joints

apercu.bmp Vous n'avez pas la permission de télécharger les fichiers joints.(1.3 Mo) Téléchargé 3 fois

[Invité]

Re,
je me suis inscrit sur ton fofo et je ne vois pas le menu !!!

a++

[Invité]

Hello Zarby,

Dans le template overall_header:
Affichage/Templates/Général/ overall_header

as tu modifié ou ajouté autre chose que le menu ?

Pour l'affichage il faut prendre en compte la largeur du menu et faire en sorte que ton forum ne soit pas trop large    .


a++

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum.