Echec d'installation de la barre de navigation flottante

[Ironspoon]

Bonjour,

J'essaie vainement jusqu'à présent d'installer la barre de navigation flottante sur mon forum.
J'ai bien modifié le Javascript pour le PHBB2
Mais rien.

Je comprends d'autant moins où se situe le problème que ça marche parfaitement sur mon forum de test.

A l'avance merci de votre aide


P.S. : un complément d'info 
La personnalisation de la police n’apparaît plus non plus. Est-il possible que j'ai intégré un paramètre qui créerait un conflit ?
Car d'autre paramètres tels que l'épaisseur de la séparation dans hr ne se font plus...
Une piste ? Merci

[Oka.mi]

Bonjour,

Vous avez oublié de modifier la feuille CSS sur votre forum normal.
Il manque l'ID s'apparentant à la barre en question (#fa_sticky_nav) ainsi que ses dérivés.

[Ironspoon]

Voulez-vous parler de cette partie, qui figure bien dans mon CSS depuis le début du problème ?

Lors de l'installation, afin de faire une vérification, j'ai même fait un simple copier/coller des codes installés sur mon forum de test car si ça marchait là, pas de raison que ça ne marche pas sur mon forum normal. Enfin... a priori. 
J'avoue être perplexe

Merci de votre aide

[Chacha]

Bonjour,

Le sujet est déplacé dans la section "Gérer l'apparence de son forum" à la demande de l'auteur du topic.


Cordialement.

[Invité]

bonjour , Ironspoon

"n'auriez vous pas par hasard un script sur votre forum normal , pour modifier la couleur de certains lien de votre barre nav.... ????

"ou un css pour cette modification ....??

que vous n'auriez pas sur votre forum test.

[Ironspoon]

Bonjour R-Max

Les deux seuls scripts que j'ai sont ceux fournis pour l'installation de la barre de notifs et celui de la barre flottante.

Le CSS du forum de test est un copier/coller de celui de mon forum donc j'aurais du avoir le même souci.

La vérité est ailleurs 

[◦Jay◦]

Bonjour Ironspoon, vous avez un problème dans votre CSS, retirez le code entier de la barre de navigation flottante et remplacez le par celui-ci:

Code:

#fa_sticky_nav {
  font-size:0;
  text-align:center;
  background:#333;
  border-bottom:1px solid #000 !important;
  height:30px;
  position:fixed;
  right:0;
  z-index:999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
}
#fa_sticky_nav li { display:inline }
#fa_sticky_nav a.mainmenu {
  color:#ccc;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
 background:url('http://i21.servimg.com/u/f21/18/21/41/30/row10.gif') repeat-x 0px 30px;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
}
#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  background-position:0 25px;
}
#fa_sticky_toggle {
background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnida11.png') no-repeat 0 0 #333;
  display:inline-block;
  height:29px;
  width:30px;
  position:fixed;
  right:0;
  z-index:999;
  transition:top 200ms linear;
}
#fa_sticky_toggle:hover { background-position:-30px 0 }
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #CCC;
  border-right:0;
  border-top:0;
}
.post div[style*="-30px;"] {
  top:-60px !important;
}

Bien à vous.

[Ironspoon]

Bonjour Jay

J'ai bien peur d'en avoir plus d'un... 

Je viens de remplacer l'ancien code par celui-ci et... rien.
Mon menu reste obstinément ancré en bas du forum.

[◦Jay◦]

Pouvez-vous me donner votre CSS s'il vous plait ?

[Ironspoon]

Bonjour Jay

Vous trouverez ICI mon CSS et, à toute fin utile, le template overhall_header.

J'ai 2 autres soucis qui sembleraient liés aux "pétouilles" de mon CSS, voire 3 :
• impossible d'enlever les petites bordures résiduelles noires
• taille de 1 px de la séparation entre les détails du post et le post pas prise compte
• personnalisation de la police de titre pas prise en compte.

Je n'ouvre pas de nouveaux sujets à ce propos pour le moment car je pense que les 4 pbs ont la même cause.

Bon courage avec mon CSS... 

Merci de votre aide
Cordialement

[◦Jay◦]

Bonsoir Ironspoon, Mais vos deux css sont mélangés! Donnez moi seulement votre css modifié ici sous balise code sans le css de base.

Merci.

[Ironspoon]

Bonjour Jay

Voici le CSS, après désactivation du CSS de base. Je vous l'envoi en zip, car via la balise code,je dépasse la longueur de message autorisée.

Mon CSS

Bien cordialement

[◦Jay◦]

Bonjour Ironspoon, il y a deux feuilles de style CSS, une que l'on peut modifier et une qui est le CSS de base, ce que vous me donnez correspond à votre feuille de style modifiée ?

Bien à vous.

[Ironspoon]

Re-bonjour Jay

Mon premier envoi est le CSS in extenso , et pour le deuxième j'ai coché Désactiver le CSS de base : oui
C'est bien le CSS que j'ai modifié.
Je vous sens... perplexe 

Cordialement

[◦Jay◦]

Pour le moins oui...

Pourquoi avez-vous mis tout ça ? Vous avez recopié le CSS de base d'un autre forum ?

[Ironspoon]

Effectivement (par contre j'ai oublié lequel...).

Initialement, pour l'adapter à ce que je souhaitais, je me servais du tuto sur les balises CSS de FA ainsi que de la fonction "Inspecter l'élément" des navigateurs.
Pour les éléments ajoutés, ils l'ont été suite à des demandes d'aide ouvertes ici car j'avoue n''avoir aucune compétence en CSS (hein ? oui je sais, ça se voit !    ).

Pour mon forum de test, j'avais fait un copier/coller du CSS de mon forum GnTB, travaillé sur cette base et quand j'ai reporté les modifs vers mon CSS (uniquement celles modifiées sur le CSS de test) les ennuis ont commencé alors que sur mon forum de test, c'est nickel. J'ai à coup sur mis les doigts où il ne fallait pas... 

Voilà Jay la triste histoire de mon CSS

[◦Jay◦]

Mon dieu ! Soyons positif, vous auriez aussi pu mettre votre liste de course !

Je ne sais pas quoi vous dire, beaucoup de choses ne servent à rien et sont paramétrable dans votre panneau d'administration.

Le mieux serait de recommencer complètement car je ne vois pas ce que vous souhaitez modifier sur votre forum en passant par le CSS si ce n'est les bords arrondis !


Votre forum est plutôt simple et ne nécessite pas énormément de codage.

[Ironspoon]

Ma liste de courses ?!

Comme certains autres membres, si j'en crois certaines demandes d'aide) des modifications portées sur la PA n'apparaissent pas et doivent être portées manuellement dans le CSS (image de fond, certaines couleurs, etc.)

Je sais que mon forum est plutôt simple. Mais je sais aussi que les points qui me posent souci ne sont pas paramétrables via la PA (cf. mon post d'hier) dont, en priorité l'objet initial de ce sujet à savoir l'installation de la barre de navigation flottante :

- nickel sur mon forum de test :


- en pied de page sur mon forum


Voilà ce que je veux modifier en priorité. Pouvez-vous m'aider au moins sur ce point, via une autre solution moins radicale que celle de tout recommencer ? 

Merci à l'avance

[◦Jay◦]

Le code que je vous avais donné précédemment, fonctionne :

Code:

#fa_sticky_nav {
  font-size:0;
  text-align:center;
  background:#333;
  border-bottom:1px solid #000 !important;
  height:30px;
  position:fixed;
  right:0;
  z-index:999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
}
#fa_sticky_nav li { display:inline }
#fa_sticky_nav a.mainmenu {
  color:#ccc;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
 background:url('http://i21.servimg.com/u/f21/18/21/41/30/row10.gif') repeat-x 0px 30px;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
}
#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  background-position:0 25px;
}
#fa_sticky_toggle {
background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnida11.png') no-repeat 0 0 #333;
  display:inline-block;
  height:29px;
  width:30px;
  position:fixed;
  right:0;
  z-index:999;
  transition:top 200ms linear;
}
#fa_sticky_toggle:hover { background-position:-30px 0 }
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #CCC;
  border-right:0;
  border-top:0;
}
.post div[style*="-30px;"] {
  top:-60px !important;
}

Bien à vous.

Bonne soirée.

[Ironspoon]

Au risque de passer pour une demeurée...
J'ai bien intégré le code ci-dessus dans mon CSS, okay ? Donc vu votre copie d'écran, tout est normal, toujours okay ?

Jusque là nous sommes d'accord ?
Or, what you see is not what I get...

Que ce soit sous Chrome ou sous Mozilla,après vidage des caches voici ce que je vois, ou plutôt ne vois pas :


Je suis actuellement sur un PC de secours sous Vista Pro mais si le pb venait de là, je le rencontrerais sur mon forum de test, non ?

Je vais, de nouveau remettre votre code et je vous tiens informé mais si de votre côté vous pouvez m'expliquer pourquoi vous voyez cette scrogneugneu de barre et pas moi, je prends !

[◦Jay◦]

Je vous conseille d'enregistrer et retirer vos codes css, essayer le code que je vous donne puis ensuite remettre vos codes CSS un a un sans qu'il n'y ait d'erreur.

Je vois la barre car je mets le css dans mon editeur css, cela veut déjà dire que le reste est bon, le problème vient de votre CSS, il faut que vous fassiez le ménage dedans.

Bien cordialement.

[Ironspoon]

Bien... je vais essayer de faire comme ça et vous tiens au courant

En tout cas,merci Jay  

Bonne soirée et... I'll be back

________________________________________________________________________________________________

SOLUTION :

Avec Winmerge j'ai comparé les deux CSS et voici où se situait l'erreur qui a mis le bazar



Merci pour le temps que vous avez passé.
Je passe ce sujet en résolu

Bonne soirée.