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

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

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

Message par Invité Dim 24 Déc 2017 - 17:12

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 :

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

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

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

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
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Barre d'adresse forum/catégorie/sujet "Navstrip"

Message par Lixyr Dim 24 Déc 2017 - 23:46

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 */
}


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Barre d'adresse forum/catégorie/sujet "Navstrip" 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Barre d'adresse forum/catégorie/sujet "Navstrip" 3592387030 pour prévenir la modération.

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

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7411
Inscrit(e) le : 22/07/2010

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

Résolu Re: Barre d'adresse forum/catégorie/sujet "Navstrip"

Message par Invité Lun 25 Déc 2017 - 17:57

Bonjour,

Merci Lixyr Razz

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
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Barre d'adresse forum/catégorie/sujet "Navstrip"

Message par Lixyr Mar 26 Déc 2017 - 23:05

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 Barre d'adresse forum/catégorie/sujet "Navstrip" 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Barre d'adresse forum/catégorie/sujet "Navstrip" 3592387030 pour prévenir la modération.

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

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7411
Inscrit(e) le : 22/07/2010

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

Résolu Re: Barre d'adresse forum/catégorie/sujet "Navstrip"

Message par Invité Mer 27 Déc 2017 - 8:18

Bonjour,

Je suis parvenu au résultat escompté, mais sans grande conviction d'avoir accompli correctement ma tâche scratch

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

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 scratch
 
Barre d'adresse forum/catégorie/sujet "Navstrip" Imgff011

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Barre d'adresse forum/catégorie/sujet "Navstrip"

Message par Lixyr Mer 27 Déc 2017 - 10:48

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


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Barre d'adresse forum/catégorie/sujet "Navstrip" 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Barre d'adresse forum/catégorie/sujet "Navstrip" 3592387030 pour prévenir la modération.

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

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7411
Inscrit(e) le : 22/07/2010

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

Résolu Re: Barre d'adresse forum/catégorie/sujet "Navstrip"

Message par Invité Mer 27 Déc 2017 - 16:05

Bonjour Lixyr,

Lixyr a écrit:Alors, on va procéder par étape.

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

Lixyr a écrit:... 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 Very Happy

Avez-vous relevé d'autre(s) "coquille(s)" ?  

Merci pour votre assistance Lixyr  Wink
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Barre d'adresse forum/catégorie/sujet "Navstrip"

Message par Lixyr Jeu 28 Déc 2017 - 14:21

A. Philippe a écrit:Ah bon ... c'est à ce point là  Crying or Very sad  dois-je aller chercher la chaine et le boulet  Embarassed

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 Barre d'adresse forum/catégorie/sujet "Navstrip" 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Barre d'adresse forum/catégorie/sujet "Navstrip" 3592387030 pour prévenir la modération.

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

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7411
Inscrit(e) le : 22/07/2010

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

Résolu Re: Barre d'adresse forum/catégorie/sujet "Navstrip"

Message par Invité Dim 31 Déc 2017 - 12:53

Bonjour,

je viens de terminer les quelques modifications suggérées et je trouve cette barre de navigation très sympathique Razz
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 Embarassed ... merci Lixyr Wink

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

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é drunken ... Very Happy
Anonymous

Invité
Invité


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

Résolu Re: Barre d'adresse forum/catégorie/sujet "Navstrip"

Message par Invité Mer 3 Jan 2018 - 10:00

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 Wink

Excellente journée à toutes et tous
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Barre d'adresse forum/catégorie/sujet "Navstrip"

Message par Lixyr Mer 3 Jan 2018 - 23:00

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


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Barre d'adresse forum/catégorie/sujet "Navstrip" 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Barre d'adresse forum/catégorie/sujet "Navstrip" 3592387030 pour prévenir la modération.

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

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7411
Inscrit(e) le : 22/07/2010

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

Résolu Re: Barre d'adresse forum/catégorie/sujet "Navstrip"

Message par Invité Jeu 4 Jan 2018 - 8:36

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  Razz
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 ... Laughing  

Au plaisir de recroiser votre chemin sur le Forum des forums  Razz

Merci ... je passe ce sujet en résolu.

Excellente journée et meilleurs vœux pour 2018 à toutes et tous.
Anonymous

Invité
Invité


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