Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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

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

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

Message par Zarby le Dim 3 Fév 2019 - 13:39

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

Zarby
**

Messages : 79
Inscrit(e) le : 01/10/2010

http://bloody-crown.forumactif.org/
Zarby a été remercié(e) par l'auteur de ce sujet.

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

Message par Zarby le Ven 8 Fév 2019 - 18:18

un up ?
Zarby

Zarby
**

Messages : 79
Inscrit(e) le : 01/10/2010

http://bloody-crown.forumactif.org/
Zarby a été remercié(e) par l'auteur de ce sujet.

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

Message par Zarby le Mer 13 Fév 2019 - 14:11

Un up Wink
Zarby

Zarby
**

Messages : 79
Inscrit(e) le : 01/10/2010

http://bloody-crown.forumactif.org/
Zarby a été remercié(e) par l'auteur de ce sujet.

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

Message par Zarby le Ven 15 Fév 2019 - 18:26

up !
Zarby

Zarby
**

Messages : 79
Inscrit(e) le : 01/10/2010

http://bloody-crown.forumactif.org/
Zarby a été remercié(e) par l'auteur de ce sujet.

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

Message par Milouze14 le Sam 16 Fév 2019 - 8:18

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++
Milouze14

Milouze14
Membre actif

Masculin
Messages : 5854
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

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

Message par Milouze14 le Dim 17 Fév 2019 - 7:13

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  :enreg: puis Navigation et liens à gauche du forum - problème d'intégration code (css ?) 824052533

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


Dernière édition par Walt le Dim 17 Fév 2019 - 12:15, édité 6 fois (Raison : EDIT BUG BALISE CODE)
Milouze14

Milouze14
Membre actif

Masculin
Messages : 5854
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

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

Message par Zarby le Dim 17 Fév 2019 - 15:38

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
Navigation et liens à gauche du forum - problème d'intégration code (css ?) Attachment
apercu.bmp Vous n'avez pas la permission de télécharger les fichiers joints.(1.3 Mo) Téléchargé 3 fois
Zarby

Zarby
**

Messages : 79
Inscrit(e) le : 01/10/2010

http://bloody-crown.forumactif.org/
Zarby a été remercié(e) par l'auteur de ce sujet.

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

Message par Milouze14 le Dim 17 Fév 2019 - 19:09

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

a++
Milouze14

Milouze14
Membre actif

Masculin
Messages : 5854
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

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

Message par Milouze14 le Lun 18 Fév 2019 - 4:25

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


a++
Milouze14

Milouze14
Membre actif

Masculin
Messages : 5854
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

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

Message par Chacha le Sam 23 Fév 2019 - 9:46

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

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

Chacha
Modéractif
Modéractif

Masculin
Messages : 62051
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

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

Message par Chacha le Dim 24 Fév 2019 - 9:55

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

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

Chacha
Modéractif
Modéractif

Masculin
Messages : 62051
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

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


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