Barre d'adresse forum/catégorie/sujet "Navstrip"

[Invité]

Détails techniques

Version du forum : Invision
Poste 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.

[Lixyr]

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.

Code:

#navstrip {
  /* ici le code CSS pour faire votre cadre */
}

[Invité]

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

[Lixyr]

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

[Invité]

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é :

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 

[Lixyr]

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

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 ?)

[Invité]

Bonjour Lixyr,

Alors, on va procéder par étape.

Ah bon ... c'est à ce point là    dois-je aller chercher la chaine et le boulet  

... vos triangles ont un fond blanc, est-ce voulu ? ...

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

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;
}

[Invité]

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

[Invité]

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

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

[Lixyr]

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 :

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%;
}

[Invité]

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.