Refonte des boutons de la barre de navigation

[JuliánEspaña]

En bref...

Nature de la création : Boutons de la barre de navigation
Taille de la création (en pixels) : ?
Couleur de fond : ?

Image(s)

Lien(s) image(s) :N/A

Texte

Texte à insérer : N/A
Police à utiliser : ?
Couleur police : N/A

En détails...

Lien de mon forum Forumactif : [Vous devez être inscrit et connecté pour voir ce lien]
Commentaire(s) supplémentaire(s) :

Bonjour,

Suite de mes demandes concernant l'amélioration visuelle du Forum dont je suis le nouvel Administrateur depuis l'année dernière.

Je souhaiterais que les boutons de la barre de navigation soient refaits car, actuellement, ils ne sont pas tous de la même taille, ce qui ne fait pas très "propre" et, par ailleurs, il manque des "s" pour les mots au pluriel...

Concernant les couleurs, je souhaiterais conserver les mêmes qu'actuellement. En voici un exemple :
==> [Vous devez être inscrit et connecté pour voir ce lien]

Quant à la police d'écriture, j'aurais idéalement aimé garder celle qui est utilisée dans l'image de notre bannière :
==> [Vous devez être inscrit et connecté pour voir ce lien]
J'ai cherché pendant plus de 2 heures et je n'ai pas trouvé le nom de cette police d'écriture. Si vous la connaissez, pourriez-vous l'utiliser, s'il vous plaît ? Si vous ne la connaissez pas, repartons sur la police actuelle qui, je crois, s'appelle Brush Script MT.

Boutons à créer quand on n'est pas connecté :
- Forum
- Portail
- Faq
- S'inscrire
- On

Boutons à créer quand on est connecté :
- Forum
- Portail
- Faq
- Recherche
- Membres
- Groupes
- Profil
- MP ("normal")
- MP ("clignotant" ou autre quand on a reçu un nouveau message)
- Off

Quant à la taille des boutons et de la barre de navigation, je n'y connais rien, alors je vous laisse faire au mieux, tout en sachant que j'aimerais que la bannière - [Vous devez être inscrit et connecté pour voir ce lien] - occupe plus de place qu'à l'heure actuelle, car là, je l'ai réduite afin que la barre de navigation puisse apparaître.

J'espère n'avoir omis aucun renseignement important mais, si tel devait être le cas, n'hésitez pas à me le signaler.

Je vous remercie d'avance pour l'attention que vous accorderez à ma demande.

Julián

[Vous devez être inscrit et connecté pour voir cette image]

Votre commande a été vérifiée par un [Vous devez être inscrit et connecté pour voir ce lien] et est conforme au règlement. Elle peut dès à présent recevoir des propositions. Merci de ne pas modifier votre commande après l'insertion de ce message, et de bien vouloir être patient. N'hésitez pas à remonter votre commande (UP) une fois par tranche de 24h.

[◦Jay◦]

Bonjour JuliánEspaña, vous trouverez dans le fichier joint vos boutons avec la police d'écriture de la bannière(Roundhand), il faut savoir qu'il y a deux polices d'écriture dans votre bannière, celle-ci qui compose xolotl et assion, en ce qui concerne le A et P, je pense que c'est fait à la main ou alors une police d'écriture modifiée.

-Pour vos nouveaux MP, je vous propose autre chose, vous n'aurez qu'à mettre le même bouton pour nouveau MP et MP puis mettre un script pour avoir une alerte lors d'un nouveau message, voici le script :



Mettez un titre explicite, par exemple : Pop-up nouveau MP puis cochez "Sur toutes les pages", validez, vérifiez bien que les Javascripts soient bien activés. Si vous mettez ce script, lors d'un nouveau MP, ceci apparaitra sur votre écran(il sera impossible de le louper) :

[Vous devez être inscrit et connecté pour voir cette image]

-En ce qui concerne votre bannière, nous ne faisons normalement pas de codage dans la partie graphique mais je vais tout de même vous aider, tout d'abord, vous allez supprimer votre bannière, la BDN se trouvera de cette manière en haut.

-Vous pouvez aussi retirer l'image que vous avez mise dans "Image de fond de l'en-tête"

Et au final, vous pouvez ajouter ce code CSS pour avoir votre bannière dans le headerbar :

Code:

.headerbar{
  background-color:#235061;
  background-image:url(https://i.goopics.net/PGxXQ.png);
  background-position:bottom;
  background-repeat:no-repeat;
  background-size:70%;
  border-bottom:1px solid #ffcb00;
}

J'ai mis la taille de la bannière à 70%, cela me semble le mieux(j'ai aussi mis une ligne de séparation"border-bottom:1px solid [Vous devez être inscrit et connecté pour voir ce lien];") mais ce n'est pas tout, il va falloir modifier la bdn pour que ce soit plus joli ! donc, la réduire, la rendre transparente lorsque le forum est au plus bas puis colorée lorsqu'on scroll, il faudra donc aussi ajouter ces codes :

Code:

#headerbar-top {
  background-color:transparent !important;
  height:60px !important;}
#headerbar-top.is-sticky{background-color:#235061 !important;}
.navbar li{margin:0;}

Veillez à ce qu'il n'y ait pas déjà des codes avec les mêmes intitulés dans votre css !

Au final, cela donnera cela :

[Vous devez être inscrit et connecté pour voir cette image]
[Vous devez être inscrit et connecté pour voir ce lien]

Bien à vous.

Fichiers joints

bdn.zip Vous n'avez pas la permission de télécharger les fichiers joints.(68 Ko) Téléchargé 6 fois

[JuliánEspaña]

Bonjour,

Je n'ai pas d'autres mots que de vous dire que vous avez réalisé un travail EXCEPTIONNEL

Un immense MERCI

Je viens donc d'installer tous les boutons de la barre de navigation, ainsi que le script pop-up pour les MP., et ça a l'air de fonctionner : j'ai essayé en m'envoyant un MP, . C'est vrai qu'on ne peut pas le louper, ! C'est très bien et très original.

Néanmoins, pour que ce soit parfait, pourriez-vous, s'il vous plaît, accoler la virgule à "M.P." et utiliser la police Roundhand (merci beaucoup de m'avoir communiqué le nom, ) ?
==> "Vous avez un nouveau M.P., cliquez ici pour le consulter"

Un immense MERCI également pour le codage de la partie graphique. Je ne pensais pas que ça demanderait autant de modifications et qu'il ne vous appartenait pas de le faire. Je vous en suis très reconnaissant, .

Étant donné que je dois partir travailler, là, je n'ai pas le temps de m'en occuper tout de suite. J'apporterai les modifications ce soir. Pouvons-nous laisser ce topic ouvert le temps que je m'y attelle ?

Encore merci pour tout, vous êtes vraiment au top, !

Julián

[◦Jay◦]

Re, de rien.

Oui, le sujet peut rester ouvert pour le moment, il n'y a pas de problème.

Voici l'image :

[Vous devez être inscrit et connecté pour voir ce lien]

Je pense que vous pourrez la mettre vous-même dans le script, si besoin, n'hésitez-pas.

Cordialement.

[JuliánEspaña]

Bonsoir,

Merci beaucoup d'avoir déplacé la virgule, . J'ai bien compris comment placer l'adresse de la nouvelle image dans le code javascript, et je viens de le faire, . Toutefois, n'avez-vous pas pu écrire la phrase avec la police Roundhand ? Autre remarque : cette alerte de nouveau message réapparaît régulièrement, même si l'on ne reçoit pas de message...

Avant de m'atteler à la bannière - ça me stresse, -, une petite question : la barre de navigation se retrouvera-t-elle placée au sommet de la page comme sur la photo que vous avez prise ?
==> [Vous devez être inscrit et connecté pour voir ce lien]

Je pose la question, car je préférerais que la barre de navigation reste où elle est actuellement...

Enfin, je vous copie-colle tout mon CSS pour que vous me confirmiez qu'il n'y aura pas d'interférences avec les codes que vous m'avez communiqués plus haut :

Code:

/* couleur titre catégories */
a.forumtitle,a.forumtitle:visited{color:#ff99ff !important;}

#chatbox_members .cb-avatar > img {
  height:30px;width:30px;
  vertical-align: middle;
}

/* taille police réponse rapide */
.sceditor-container iframe, .sceditor-container textarea {
font-size:16px !important;
}

/* taille barre de navigation */
.navbar img {width: auto;}

/* taille icon msg */
ul.forums li.row dl {
  background-size: 50px!important;
}

/* couleur fixe barre de navigation */
.navbar img{filter:invert(0);}
.navbar a:hover{background-color:transparent;
box-shadow:0 0 0 !important;}

Julián

[◦Jay◦]

Oui, la barre se retrouvera en haut car en bas elle cache ce qui est écrit sur la bannière, vous pouvez laisser comme c'est à l'heure actuelle si vous préférez.

Le message n'apparait pas tout le temps, il apparait si vous êtes déco et qu'une page du forum est toujours ouverte, vous pouvez laisser comme c'est à l'heure actuelle si vous préférez.

Je n'ai pas utilisé cette police d'écriture car l'emplacement est trop petit mais si vous n'utilisez pas ce script, cela règle le problème(qui ne me semble pas en être un).

Cordialement.

[JuliánEspaña]

Merci pour votre réactivité, !

D'accord pour la police d'écriture, je vais laisser comme c'est, car c'est quand même super, !

Je réédite mon message pour signaler ceci ==> Concernant le message d'alerte, il apparaît même quand une seule fenêtre du Forum est ouverte...

Je ne comprends pas quand vous dites : "vous pouvez laisser comme c'est à l'heure actuelle si vous préférez" au sujet de ce message d'alerte. Vous voulez dire supprimer le javascript ? Si oui, comment les membres seront-ils alertés de l'arrivée d'un nouveau message ?

Enfin, concernant la barre de navigation qui se retrouverait en haut, je vais consulter quelques membres en leur mettant la photo - [Vous devez être inscrit et connecté pour voir ce lien] - pour voir ce qu'ils en pensent. En fonction de leur réponse, je modifierai ou pas...

Encore merci pour votre investissement, ,

Julián

[◦Jay◦]

Le message n'arrive que si une fenêtre est ouverte et que vous êtes déconnecté, vous pouvez supprimer le script et laisser comme c'était avant si cela ne vous convient pas.

Cordialement.

[JuliánEspaña]

Bonsoir,

Je vous assure que l'alerte apparaît tout le temps. Certains membres me l'ont également rapporté :

[Vous devez être inscrit et connecté pour voir ce lien]

J'ai donc supprimé le javascript et, du coup, comment serons-nous alertés de l'arrivée d'un nouveau message ? Car j'ai la même image pour "MP normal" et "MP nouveau message".

Bien à vous,

Julián

[◦Jay◦]

Ceci vous convient ?

[Vous devez être inscrit et connecté pour voir ce lien]

[JuliánEspaña]

Ah, génial, oui, !

Merci beaucoup pour cette suggestion que j'adopte sur-le-champ,  !

Et je regrette de ne pas pouvoir utiliser l'alerte que vous aviez proposé au départ, car elle était très bien pensée, .

Étant donné que je n'ai encore eu aucun retour sur la bannière avec la barre de navigation qui se retrouverait placée au sommet de la page, je préfère ne rien modifier pour le moment. J'ai malgré tout légèrement agrandi l'image et le résultat est très correct, je trouve.

Du coup, je pense que l'on peut considérer ce travail comme achevé, et bien achevé même,  .

Merci beaucoup pour votre suivi et votre travail rigoureux, et à bientôt pour une autre commande, .

Julián

[◦Jay◦]

De rien, à bientôt.

Cordialement.