Modifier/Retirer les deux points qui séparent les niveaux de l'arbre de navigation des sujets et forums.

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

Résolu Modifier/Retirer les deux points qui séparent les niveaux de l'arbre de navigation des sujets et forums.

Message par Eibio le Ven 10 Mar 2017 - 19:52

Bonjour - bonsoir ! Razz

Alors voilà, je veux faire un truc - je pense - tout simple et qui me semble possible étant donné qu'une manipulation similaire est souvent utilisée au niveau de l'affichage des sous-forums.

Oui, je sais qu'il est possible de remplacer les virgules qui séparent les sous-forums par défaut en dessous des descriptions avec du javascript. Je pense donc qu'il est possible de faire la même chose afin de remplacer les deux points :: qui séparent les différents niveaux de l'arbre de navigation.

Ce que j'appelle l'arbre de navigation, c'est cette ligne située au dessus de la liste des sujets dans un forum et des pages des sujets eux-mêmes. Elle sert à naviguer à l'intérieur des forums.

Exemple : Au dessus de ce message, c'est la ligne située à côté des boutons nouveau et répondre qui dit :
« Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum »

Ce que je voudrais modifier, ce sont les :: qui ne me plaisent pas, je voudrais les remplacer par des tirets ou des flèches.

Après avoir cherché sur le web et dans mes templates, je me suis rendu compte qu'il fallait pour ça passer par quelques lignes de javascript. Ne m'y connaissant pas, je fais appel à vous. Merci de votre lecture et de vos futures réponses.

PS : mon forum est en phpBB2.


Dernière édition par Eibio le Dim 12 Mar 2017 - 21:04, édité 1 fois
avatar

Eibio
Nouveau membre

Masculin
Messages : 3
Inscrit(e) le : 10/03/2017

http://elite-efed.forumactif.com/
Eibio a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier/Retirer les deux points qui séparent les niveaux de l'arbre de navigation des sujets et forums.

Message par ZYVHK le Dim 12 Mar 2017 - 9:45

Hello o/
Il y a moyen de faire ça en CSS seulement en trichant un peu. Mais juste un peu.

Ajouter le code suivant dans votre CSS :
Panneau d'administration » Affichage » Images et Couleurs : Couleurs » Feuille de style CSS

Code:
#navstrip a {
    font-size: 10px;
    padding: 0px 3px; }
#navstrip {
    font-size: 0; }

#navstrip li {
    background: url(https://illiweb.com/fa/invision/breadcrumb-arrow.gif) no-repeat left 50%;
    float: left;
    margin: 0 3px;
    padding-left: 15px; }

Du coup, l'image suivante apparaîtra avant chaque objet de liste (lien) : | Modifiez-le par ce que vous voulez.

background: url(https://illiweb.com/fa/invision/breadcrumb-arrow.gif) no-repeat left 50%;
avatar

ZYVHK
***

Masculin
Messages : 133
Inscrit(e) le : 05/03/2016

http://www.twenty-one.eu/
ZYVHK a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier/Retirer les deux points qui séparent les niveaux de l'arbre de navigation des sujets et forums.

Message par Eibio le Dim 12 Mar 2017 - 15:34

Hey, merci pour la réponse ! What a Face

J'ai fais plusieurs tentatives mais même après avoir tenté quelques modifications, notamment modifié le font-size car le mien est à 14, ça n'a rien changé. J'ai modifié mes templates, du coup j'ai peut-être touché à quelque chose même si ça m'étonnerai car je n'ai jamais croisé ce "navstrip" alors que j'ai bien cherché tout ce qui rapportait à la navigation là-dedans. Ne connaissant que la donnée .nav, j'ai tout de même essayé de bidouiller avec la propriété ::before.
Code:
a.nav::before {
  content: "› ";
}
C'est déjà plus joli, mais en soit, ça ne règle pas du tout mon problème car les :: sont toujours là :


En plus de ça, on s'aperçoit de la vilaine supercherie au passage de la souris... Embarassed
avatar

Eibio
Nouveau membre

Masculin
Messages : 3
Inscrit(e) le : 10/03/2017

http://elite-efed.forumactif.com/
Eibio a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier/Retirer les deux points qui séparent les niveaux de l'arbre de navigation des sujets et forums.

Message par Morane le Dim 12 Mar 2017 - 16:04

Bonsoir Wink

essai cela:
Code:
/* --- Enlever les :: --- */
.nav {
     font-size:0
}
.nav a {
     font-size:12px
}
a.nav:before {
         content:" > ";
 }
.nav > a.nav:empty:before, .nav > a.nav:first-child:before {
     content:""
}

Pour moi ça fonctionne !!
avatar

Morane
***

Féminin
Messages : 127
Inscrit(e) le : 18/08/2014

Morane a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier/Retirer les deux points qui séparent les niveaux de l'arbre de navigation des sujets et forums.

Message par Eibio le Dim 12 Mar 2017 - 21:01

Merci beaucoup Morane ! I love you

Ton code marche parfaitement ! Razz Je ne pensai pas que ça aurait pu être aussi facile mais effectivement ça marche. Au final le plus compliqué c'est le dernier bout de code qui sert à faire disparaître la première flèche de la liste devant la base de l'arbre qui n'est pas très significative.

Du coup je l'ai un peu modifié et j'ai carrément réussi à en cacher tous les défauts ! Enfin presque, puisque le font-size à 0 qui sert à cacher les :: a bizarrement aussi fait disparaître les espaces entre les boutons nouveau et répondre. La cause, c'était les espaces créés par des   qui n'étaient plus pris en compte. Du coup un petit tour dans le template viewtopic_body et un margin ajouté pour créer un nouvel espace entre les images et le tour était joué. Mr. Green

Aller, pour vraiment chipoter je vais dire que le soulignement des liens au passage de la souris révèle la triche (flèche de séparation soulignée avec le lien) et rend le tout beaucoup moins esthétique, mais ça se règle en une ligne de code.

Voilà donc ce que j'ai fait avec ton bout de code, encore merci pour vos réponses ! :

Code:
a.nav:hover {
  color: #000; /* Couleur des liens au passage souris */
  text-decoration: none !important; /* Retire le soulignement des liens */
}

.nav {
  font-size: 0;
}

.nav a {
  font-size: 14px; /* Taille de police */
}

a.nav:before {
  content: " › "; /* Symbole de séparation */
  color: #768794; /* Couleur du symbole de séparation */
 }

.nav > a.nav:empty:before, .nav > a.nav:first-child:before {
  content: "";
}
avatar

Eibio
Nouveau membre

Masculin
Messages : 3
Inscrit(e) le : 10/03/2017

http://elite-efed.forumactif.com/
Eibio a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier/Retirer les deux points qui séparent les niveaux de l'arbre de navigation des sujets et forums.

Message par Chacha le Dim 12 Mar 2017 - 21:35

Bienvenue sur le forum de support de Forumactif

Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser :
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe
avatar

Chacha
Modéractif
Modéractif

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

http://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