Barre d'adresse forum/catégorie/sujet "Navstrip"
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Barre d'adresse forum/catégorie/sujet "Navstrip"
Détails techniques
Version du forum : InvisionPoste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Dès la création
Lien du forum : https://www.apelbouzonville.com
Description du problème
Bonjour,Pour des raisons de difficulté de lecture inhérente à la superposition des teintes des liens
sur l'image de fond, nous souhaiterions modifier l'aspect de la barre d'adresse forum/catégorie/sujet.
Je ne parviens pas à identifier cette barre dans les Templates,
certainement à cause d'une erreur de ma part sur le terme HTML.
Notre visuel actuel est celui-ci :
Nous souhaiterions obtenir celui-ci :
(Attention cette image n'est pas le reflet de la réalité mais une retouche Photoshop Pro du résultat souhaité).
J'aimerais (conditionnel) toutefois, réaliser cette modification moi-même.
Pourriez-vous s'il vous plait, dans un premier temps me renseigner sur le bon terme HTML de cette barre
et sur quel Template effectuer cette modification, à moins qu'il ne me faille éditer une feuille CSS ?!
En vous remerciant par avance pour votre aide future,
nous vous souhaitons à toutes et tous un excellent réveillon et de chaleureuses fêtes de fin d'année.
Dernière édition par A. Philippe le Jeu 4 Jan 2018 - 8:38, édité 2 fois
Invité- Invité
Re: Barre d'adresse forum/catégorie/sujet "Navstrip"
Bonjour,
Vous avez de la chance, à priori vous avez un ID dédié pour cette navigation : navstrip.
Donc je vous conseille de jouer avec le CSS.
Vous avez de la chance, à priori vous avez un ID dédié pour cette navigation : navstrip.
Donc je vous conseille de jouer avec le CSS.
- Code:
#navstrip {
/* ici le code CSS pour faire votre cadre */
}
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Barre d'adresse forum/catégorie/sujet "Navstrip"
Bonjour,
Merci Lixyr
Je ne passe encore ce sujet en résolu, il se peut que j'ai encore besoin d'un petit coup de main.
A très bientôt
Merci Lixyr
Je ne passe encore ce sujet en résolu, il se peut que j'ai encore besoin d'un petit coup de main.
A très bientôt
Invité- Invité
Re: Barre d'adresse forum/catégorie/sujet "Navstrip"
Et bien, n'oubliez pas de remonter votre sujet, et de garder à l'esprit que c'est une seule question et/ou thème par sujet. ^^
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Barre d'adresse forum/catégorie/sujet "Navstrip"
Bonjour,
Je suis parvenu au résultat escompté, mais sans grande conviction d'avoir accompli correctement ma tâche
Tout fonctionne au mieux, cependant je remarque que le premier favicon (flèche verte) s'affiche correctement,
mais pas les suivants (flèches rouges), et là je cale
J'ai également "souffert" avec l'affichage du "background" de cette barre en adaptant la taille de l'image au visuel écran,
et ça je suis intimement convaincu que ce n'est pas le bon protocole.
A ce stade, mes compétences de béotien ne me permettent plus d'avancer dans la bonne compréhension de cette mis en place.
Pourriez-vous m'aider s'il vous plait ?!?
Le CSS édité :
Merci d'avance - Excellente journée
Ps : La barre d'annonce est en cours de modification également, sur le même esprit ... mais pas encore terminée,
J'ai pris bonne note de votre remarque Lixyr ... merci à vous
Je suis parvenu au résultat escompté, mais sans grande conviction d'avoir accompli correctement ma tâche
Tout fonctionne au mieux, cependant je remarque que le premier favicon (flèche verte) s'affiche correctement,
mais pas les suivants (flèches rouges), et là je cale
J'ai également "souffert" avec l'affichage du "background" de cette barre en adaptant la taille de l'image au visuel écran,
et ça je suis intimement convaincu que ce n'est pas le bon protocole.
A ce stade, mes compétences de béotien ne me permettent plus d'avancer dans la bonne compréhension de cette mis en place.
Pourriez-vous m'aider s'il vous plait ?!?
Le CSS édité :
- Code:
#navstrip {
font-size: 20px;
margin: 20 0 20 0;
padding: 9px 9px 9px 9px;
background-image: url(" /*mon image hébergée*/ ");
background-repeat: no-repeat;
}
Merci d'avance - Excellente journée
Ps : La barre d'annonce est en cours de modification également, sur le même esprit ... mais pas encore terminée,
J'ai pris bonne note de votre remarque Lixyr ... merci à vous
Invité- Invité
Re: Barre d'adresse forum/catégorie/sujet "Navstrip"
Alors, on va procéder par étape.
D'une part, pour le petit triangle, c'est normal car il a été ajouté par CSS sur le premier lien, et non sur les autres.
Essayez comme ça :
- remplacez
par
(par contre vos triangles ont un fond blanc, est-ce voulu ?)
D'une part, pour le petit triangle, c'est normal car il a été ajouté par CSS sur le premier lien, et non sur les autres.
Essayez comme ça :
- remplacez
- Code:
#navstrip li.begin {
background: url(https://2img.net/i/fa/invision/nav.gif) no-repeat left 50%;
padding-left: 15px;
}
par
- Code:
#navstrip li {
background: url(https://2img.net/i/fa/invision/nav.gif) no-repeat left 50%;
padding-left: 15px;
}
(par contre vos triangles ont un fond blanc, est-ce voulu ?)
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Barre d'adresse forum/catégorie/sujet "Navstrip"
Bonjour Lixyr,
Ah bon ... c'est à ce point là dois-je aller chercher la chaine et le boulet
Est-ce à dire que l'on peut également modifier les teintes de ce favicon ? ... ou en créer un autre et l'héberger ?
J'ai remplacé le secteur CSS comme suggéré et c'est parfait pour l'affichage de chacun des favicons
Avez-vous relevé d'autre(s) "coquille(s)" ?
Merci pour votre assistance Lixyr
Lixyr a écrit:Alors, on va procéder par étape.
Ah bon ... c'est à ce point là dois-je aller chercher la chaine et le boulet
Non mais finalement ça m'arrange bien, la teinte du triangle étant très foncée, nous aurions du mal à le visualiser sur celle du fond.Lixyr a écrit:... vos triangles ont un fond blanc, est-ce voulu ? ...
Est-ce à dire que l'on peut également modifier les teintes de ce favicon ? ... ou en créer un autre et l'héberger ?
J'ai remplacé le secteur CSS comme suggéré et c'est parfait pour l'affichage de chacun des favicons
Avez-vous relevé d'autre(s) "coquille(s)" ?
Merci pour votre assistance Lixyr
Invité- Invité
Re: Barre d'adresse forum/catégorie/sujet "Navstrip"
A. Philippe a écrit:Ah bon ... c'est à ce point là dois-je aller chercher la chaine et le boulet
Non, mais comme il y a plusieurs questions, je préfère répondre à une à la fois. ^^
Oui, vous pouvez changer la couleur du triangle. Soit via un logiciel, soit en demandant à notre super graphiste : service de créations graphiques.
Ensuite, il suffit de modifier le lien ici :
#navstrip li {
background: url(https://2img.net/i/fa/invision/nav.gif) no-repeat left 50%;
padding-left: 15px;
}
Ensuite, pour le background qui est trop grand par rapport à l'écran, voici comment faire :
- remplacez
- Code:
#navstrip {
background-image: url(https://i.servimg.com/u/f62/19/80/82/59/dnav-a16.png);
background-repeat: no-repeat;
font-size: 20px;
margin: 20px 0;
padding: 9px;
}
par
- Code:
#navstrip {
background: url(https://i.servimg.com/u/f62/19/80/82/59/dnav-a16.png) no-repeat 0% 0% / 100% 100%;
font-size: 20px;
margin: 20px 0;
padding: 9px;
}
Concrètement, j'ai modifié le CSS pour ajouter un élément au background : les 100 % disent que l'image doit faire 100% de la largeur et 100 % de la hauteur, respectivement. Donc ça prend 100% de la largeur de son contenant, et non pas plus.
Mais pour ce qui est des liens, je pense qu'il serait judicieux de les réduire, car ils sont actuellement d'une taille de 20px.
Donc je vous conseille ensuite :
- de modifier cette partie :
#navstrip {
background: url(https://i.servimg.com/u/f62/19/80/82/59/dnav-a16.png) no-repeat 0% 0% / 100% 100%;
font-size: 20px;
margin: 20px 0;
padding: 9px;
}
en mettant 15px au lieu de 20px
- et de rajouter celle-ci :
- Code:
#navstrip a span {
font-size: 15px;
}
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Barre d'adresse forum/catégorie/sujet "Navstrip"
Bonjour,
je viens de terminer les quelques modifications suggérées et je trouve cette barre de navigation très sympathique
Le visuel correspond bien à ce que je souhaitais avec en prime une ergonomie retrouvée !
Mon Css de départ était loin de ce résultat fonctionnel ... merci Lixyr
Je m'aperçois au vue de cette capture, que beaucoup reste à faire sur le visuel général.
J'ai pris note de votre suggestion concernant le service graphique ... je n'ai pas encore le réflexe de le solliciter.
Avez-vous d'autres remarques concernant cette barre de navigation ?
En vous souhaitant à toutes et tous un excellent réveillon de nouvel an ... modérément alcoolisé ...
je viens de terminer les quelques modifications suggérées et je trouve cette barre de navigation très sympathique
Le visuel correspond bien à ce que je souhaitais avec en prime une ergonomie retrouvée !
Mon Css de départ était loin de ce résultat fonctionnel ... merci Lixyr
Je m'aperçois au vue de cette capture, que beaucoup reste à faire sur le visuel général.
J'ai pris note de votre suggestion concernant le service graphique ... je n'ai pas encore le réflexe de le solliciter.
Avez-vous d'autres remarques concernant cette barre de navigation ?
En vous souhaitant à toutes et tous un excellent réveillon de nouvel an ... modérément alcoolisé ...
Invité- Invité
Re: Barre d'adresse forum/catégorie/sujet "Navstrip"
Bonjour,
Le CSS édité pour l'obtention de cette barre de navigation "navstrip"
- Positionnement de l'image de fond ---> PA > Images et Couleurs > Couleurs > Feuille de style CSS
- Taille du texte ---> PA > Images et Couleurs > Couleurs > Feuille de style CSS
- Positionnement du favicon du premier lien (adresse forum) ---> PA > Images et Couleurs > Couleurs > Feuille de style CSS
- Positionnement des favicons des liens suivants ---> PA > Images et Couleurs > Couleurs > Feuille de style CSS
Malgré que tout fonctionne au mieux, je souhaite attendre l'avis de Lixyr avant de passer ce sujet en résolu
Excellente journée à toutes et tous
Le CSS édité pour l'obtention de cette barre de navigation "navstrip"
- Positionnement de l'image de fond ---> PA > Images et Couleurs > Couleurs > Feuille de style CSS
- Code:
#navstrip {
background: url(/* Adresse de l'image de fond hébergée */) no-repeat 0% 0% / 100% 100%;
margin: 20px 0;
padding: 9px;
}
- Taille du texte ---> PA > Images et Couleurs > Couleurs > Feuille de style CSS
- Code:
#navstrip a span {
font-size: 15px;
}
- Positionnement du favicon du premier lien (adresse forum) ---> PA > Images et Couleurs > Couleurs > Feuille de style CSS
- Code:
#navstrip li {
background: url(/* Adresse de l'image du favicon hébergée */) no-repeat left 50%;
padding-left: 15px;
}
- Positionnement des favicons des liens suivants ---> PA > Images et Couleurs > Couleurs > Feuille de style CSS
- Code:
#navstrip li.begin {
padding-left: 15px;
background: url(/* Adresse de l'image du favicon hébergée */) no-repeat left 50%;
}
Malgré que tout fonctionne au mieux, je souhaite attendre l'avis de Lixyr avant de passer ce sujet en résolu
Excellente journée à toutes et tous
Invité- Invité
Re: Barre d'adresse forum/catégorie/sujet "Navstrip"
Et bien écoutez, mis à part la petite scroll bar disgracieuse en bas, due à la bannière, c'est pas mal.
Donc un petit bonus pour éviter cette scroll bar, rajoutez ceci dans votre CSS :
Ça force l'image à prendre 100% de la largeur maximum (alors qu'elle en prenait plus à cause de sa grande taille).
Et sinon, pour la barre de fond du titre des messages, je vous donne un petit correctif, pour que l'arrondit soit visible à gauche, mais aussi à droite, ce qui rendra le tout plus homogène : normalement vous avez déjà une classe div.maintitle (ou .maintitle) dans votre CSS ; rajoutez-y ceci :
Ça force l'image de fond à prendre 100% de la largeur, mais aussi 100% de la hauteur.
Si vous n'avez pas cette classe, rajoutez ceci dans votre CSS :
Donc un petit bonus pour éviter cette scroll bar, rajoutez ceci dans votre CSS :
- Code:
#logo img {
width: 100%;
}
Ça force l'image à prendre 100% de la largeur maximum (alors qu'elle en prenait plus à cause de sa grande taille).
Et sinon, pour la barre de fond du titre des messages, je vous donne un petit correctif, pour que l'arrondit soit visible à gauche, mais aussi à droite, ce qui rendra le tout plus homogène : normalement vous avez déjà une classe div.maintitle (ou .maintitle) dans votre CSS ; rajoutez-y ceci :
- Code:
background-size: 100% 100%;
Ça force l'image de fond à prendre 100% de la largeur, mais aussi 100% de la hauteur.
Si vous n'avez pas cette classe, rajoutez ceci dans votre CSS :
- Code:
div.maintitle {
background-size: 100% 100%;
}
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Barre d'adresse forum/catégorie/sujet "Navstrip"
Bonjour,
Et bien Lixyr, un énorme merci pour votre patience, votre dévouement et le temps que vous consacrez à nous aider sur le FF.
Je viens de mettre en place vos dernières suggestions
Je ne m'en sortais pas du tout avec la gestion du positionnement correct des images sur les différentes pages,
voilà qui est fait, ce qui va me permettre de diminuer leurs tailles.
Ces quelques échanges ont été pour moi fort didactiques et très intéressants.
Ce "codage" html me fait encore l'effet d'un langage "Alien" ... mais je ne perds pas espoir ...
Au plaisir de recroiser votre chemin sur le Forum des forums
Merci ... je passe ce sujet en résolu.
Excellente journée et meilleurs vœux pour 2018 à toutes et tous.
Et bien Lixyr, un énorme merci pour votre patience, votre dévouement et le temps que vous consacrez à nous aider sur le FF.
Je viens de mettre en place vos dernières suggestions
Je ne m'en sortais pas du tout avec la gestion du positionnement correct des images sur les différentes pages,
voilà qui est fait, ce qui va me permettre de diminuer leurs tailles.
Ces quelques échanges ont été pour moi fort didactiques et très intéressants.
Ce "codage" html me fait encore l'effet d'un langage "Alien" ... mais je ne perds pas espoir ...
Au plaisir de recroiser votre chemin sur le Forum des forums
Merci ... je passe ce sujet en résolu.
Excellente journée et meilleurs vœux pour 2018 à toutes et tous.
Invité- Invité
Sujets similaires
» changer couleur titre catégorie dans le forum/sujet
» "Nouveau-sujet" dans la l'arborescence catégorie/forum/sous-forum
» Noms "catégorie", "sujet", "forum", "message"
» Réduction de la barre catégorie ou "dézoom" du forum
» Catégorie : Mettre une barre noire séparant l'image "pas de nouveaux messages" et le nom de la catégorie
» "Nouveau-sujet" dans la l'arborescence catégorie/forum/sous-forum
» Noms "catégorie", "sujet", "forum", "message"
» Réduction de la barre catégorie ou "dézoom" du forum
» Catégorie : Mettre une barre noire séparant l'image "pas de nouveaux messages" et le nom de la catégorie
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum