Barre de navigation Clash of Clans

[Akael]

En bref...

Nature de la création : Barre de navigation
Taille de la création (en pixels) : à voir
Couleur de fond : N/A

Image(s)

Lien(s) image(s) :

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

Visualiser:

Texte

Texte à insérer : à voir en bas
Police à utiliser : century gothic
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,
Je souhaiterai refaire la barre de navigation de mon nouveau forum mais étant nul en graphisme, je me retourne vers vous

Dans cette barre de navigation je souhaiterai avoir:
(quand on est déconnecté)
Accueil
Connexion
Inscription (possible de faire clignoter ?)

(quand on est connecté)
Accueil
Calendrier
Membres
Groupes
Profil
Messages/Nouveaux messages
Déconnexion (Pseudo)

Pour ce qui est du décor de la barre de navigation, je pensais aux personnages de Coc (gobelin, archer, Pekka,dragon etc.....) permettant de bien visualiser la barre de navigation mais aussi l'image en fond.

L'image que je vous dis fournis est celle d'un bouclier que j'aimerai avoir centré en arrière plan de la barre de navigation. (Si vous arrivez à enlever le petit hexagone contenant le chiffre pour ne laisser que le bouclier ce serait parfait mais si vous n'y arrivé pas, ce n'est pas grave).

Si possible aussi, quand on passe la souris sur le mot accueil, un contour apparaît autour comme sur mon forum actuellement (après la couleur dépend de la couleur général de la barre de navigation).

Désolé d'imposer autant de conditions, si c'est de trop je peux comprendre sans soucis.
Merci d'avance pour tout le boulot qui sera fournit

Ps: rien à voir avec la barre de navigation, j'aimerai centrer le titre et la description du forum, est-ce possible avec une commande Ccs ?

Et si le graphiste souhaite rajouter son nom quelque part pour qu'au moins son travail soit reconnu il n'y a pas de problèmes

Cordialement,
Akael

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

[Faline]

Bonjour Akael,

Préambule : pour centrer le titre il suffit de centrer le logo (même s'il n'y en a pas) : Affichage/Page d'accueil/En-tête & Navigation.

J'avoue ne pas arriver à nettoyer proprement ton image , mais j'ai une question encore bien plus substantielle : comment peut-on centrer cette image sur la barre de navigation, alors que cette barre n'a pas la même longueur suivant si on est connecté ou pas... ? A moins que tu places au milieu un bouton qui restera au milieu aussi bien en login que en logout.
Ne pourrais-tu pas utiliser cette image comme logo ?

En plus, je ne connais pas tes personnages. Serait-il possible de fournir les images (tubés = avec fond transparent ou très très faciles à tuber = fond uni contrastant) ?

Ce que je pourrais faire, ce sont des boutons où j'assieds des personnages sur ton image ce qui cacherait les imperfections du gommage.

Exemple :

Ou ton image pour l'accueil (donc au début et non pas centré) et pour les autres les figures juste avec le texte. Ou encore l'image à gauche et à droite pour faire symétrique ?

Sans images supplémentaires j'abandonne . Ou j'en cherche encore une ou deux et le reste des boutons aura juste du texte sur une barre ? Je peux couper les images seulement entre deux boutons qui restent côte à côte dans un régime donné (login ou/et logout).

[◦Jay◦]

Bonjour Akael, Bonjour Faline,

[Vous devez être inscrit et connecté pour voir ce lien] : Sachez que la section graphique n'a pas pour vocation de faire de l'entraide en codage, pour tout problème de ce type, il faut utiliser la section "ENTRAIDE & SUPPORT...", pour une fois, nous allons faire une exception.

Compte tenu de la version de votre forum, il y a des choses qui ne sont pas réalisables, voici une proposition [Vous devez être inscrit et connecté pour voir ce lien], si cela vous convient, je vous expliquerai comment l'installer.


Bien à vous.

[Faline]

Bonjour Jay,
pour les précisions & illustration concernant ModernBB !

[Akael]

Bonjour Akael, Bonjour Faline,

@Akael : Sachez que la section graphique n'a pas pour vocation de faire de l'entraide en codage, pour tout problème de ce type, il faut utiliser la section "ENTRAIDE & SUPPORT...", pour une fois, nous allons faire une exception.

Compte tenu de la version de votre forum, il y a des choses qui ne sont pas réalisables, voici une proposition [Vous devez être inscrit et connecté pour voir ce lien], si cela vous convient, je vous expliquerai comment l'installer.


Bien à vous.

Bonjour Jay et Faline,
Pour commencer désolé de ne pas avoir pu donner de réponses plus tôt concernant le message de Faline, j'étais malheureusement occupé, néanmoins merci de t'être proposé pour venir à mon aide

Sinon, pour @fay vous avez fait un travail incroyable ! Cela rend bien mieux que ce que j'avais imaginé !
J'approuve totalement ce design de barre de navigation ainsi que le titre du forum !

Sinon question à part mais en rapport avec la barre de navigation, peut-on créer un menu déroulant pour profil, message etc ... ? (ou est-ce une des choses non réalisables avec mon forum ?)
Par exemple sur profil, en passant dessus un menu apparait avec information, signatures, préférence etc...

En tout cas un grand merci pour le travail que tu as consacré pour cet exemple de forum et aussi un grand merci ) @Faline qui m'a proposé son aide

[◦Jay◦]

Bonjour Akael, commençons par le commencement, il vous faut tout d'abord retirer le titre et la description du forum, si vous préférez les retirer avec un code CSS, voici comment faire, dans votre PA>Affichage>Coueur>Onglet "feuille de style CSS">Collez puis validez ce code :

Code:

#site-title,#site-desc p{font-size:0;}

-Ensuite, nous allons changer votre bannière avec le titre directement dessus, comme ceci :

Code:

.headerbar{background-image:url(https://i62.servimg.com/u/f62/18/95/70/55/fondba10.jpg);
height:400px;
border-bottom:15px solid #2C353B;
background-size:100%;}

-1ere ligne correspond à l'image qui sera affichée
-2eme ligne correspond à la hauteur du header
-3eme ligne correspond à la bordure grise en bas de l'image
-4eme ligne correspond à la taille de la largeur que prendra l'image(pour que tous les utilisateurs voient la même chose)

Il vous faudra ensuite ouvrir le fichier joint et installer les boutons de navigation dans votre PA>Affichage>image>Général / navigation puis, il faudra ajouter un peu de CSS pour avoir un affichage correct ! Pensez à déplacer les boutons qui ne servent pas en dehors de la barre de navigation, avant ou après ceux utilisés, dans votre PA>Affichage>Page d'accueil>En-tête & Navigation>Vous déplacez les boutons inutiles et vous cochez "oui" à "Afficher seulement des images dans la barre des liens"

Voici le CSS à ajouter :

Code:

.navbar img{filter: invert(0%);
width:100%;
margin:0 !important;}
.navbar a{padding:0 2px 0 0;}
.navbar a:hover {background-color:#2C353B !important;}
.is-sticky#headerbar-top{background-color:#2C353B;
height:55px;}
.is-sticky#headerbar-top .navbar a:hover {background-color:#125386 !important;}

1ere ligne affiche la couleur des images correctement car d'origine, les couleurs sont inversées.
2eme ligne affiche la taille des images à 100%.
3eme ligne supprime la marge.
4eme ligne met un espace de 2px entre chaque bouton.
5eme ligne couleur au passage de la souris sur les boutons de la BDN.
6eme ligne couleur de fond de la BDN flottante.
7eme ligne hauteur de la BDN flottante.
8eme ligne couleur au passage de la souris sur les boutons de la BDN flottante.

-Pour avoir des menus déroulants, vous pouvez dans un premier temps consulter les sujets qui en traitent puis demander de l'aide dans la section "entraide et support"

Bien à vous.

Fichiers joints

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

[Akael]

Bonjour [Vous devez être inscrit et connecté pour voir ce lien]
Merci pour toutes les informations fournies, mon forum est comme neuf