barre de navigation personnalisée

[Krazy]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://bloods-gang.forumgratuit.org

Description du problème

Hey,

J'aimerai réaliser le même style de barre de navigation du forum forumactif sauf que j'aimerai régler des détails. Je voudrais que la barre prenne toute la largeur du forum et qu'elle soit placée en haut du forum, puis j'aimerai jouer avec l'opacité et la police du texte si possible.
Je veux également la même dynamique lorsqu'on passe le curseur sur un bouton.

Merci beaucoup pour votre aide, je ne sais pas par quoi je dois commencer.

[Krazy]

up

[Ajesto]

Voici du Libre Service venant de mon forum :

Bonjour,

Je vous présente quelques barres de navigation :

Barre de navigation noire:

Barre de navigation grise:

Barre de navigation bleue:

Barre de navigation verte:

Barre de navigation rose:

Barre de navigation rouge:

<br />
La barre de navigation a été créer sous un forum vierge en phpbb3.
Aucune modification des templates.
Aucun autre CSS appart celui de ces thèmes.
Le bouton Messagerie représente le passage de la souris sur un lien.

Bien à vous,
Laiorm

[Krazy]

Merci, j'avais déjà vu vos barres de navigation mais je n'ai pas réussi à intégrer une opacité et à modifier la police d'écriture. J'ai aussi eu du mal pour la mettre correctement tout en haut de ma page d'accueil en faisant en sorte qu'elle prenne toute la largeur de mon forum.

Merci encore si vous pouvez m'aider là-dessus.

[Ajesto]

Au fait, pouvez vous nous donner l'adresse de votre forum ? Le lien que vous aviez donné ne marche pas :/

[Krazy]

Merci de votre réponse.
Voici mon forum: http://www.bloods-gang.com

Je viens finalement de trouver comment créer les boutons grâce à un tutoriel sur le forum mais j'ai encore quelques soucis...
https://forum.forumactif.com/t246228-images-de-la-barre-de-navigation-modifiees-au-passage-de-la-souris

Comment faire pour que le fond de ma barre de navigation (background rouge) prenne toute la largeur de mon forum ?


Et comment créer un bouton personnalisé avec une redirection url ? J'ai créé un bouton-image "FAQ" et j'aimerai qu'en cliquant dessus, l'utilisateur soit redirigé vers un topic précis de mon forum.

Mon code CSS concernant la barre de navig:

Code:

/*barre de navigation*/
#wrap {
    margin-top: 100px;}
.navbar ul.linklist.navlinks {
    position: absolute;
    width: 55%;
    left: 0;
    top: 0px;
    margin-left: 22.5%;}
}

Pour les boutons, j'ai utilisé le CSS du tutoriel.

[Ajesto]

Bonjour,



Si je parviens jusqu’à votre forum, je pourrais faire aisément tout ça ^^

[Krazy]

Le nom de domaine est bien celui-ci: www.bloods-gang.com et l'adresse de base est: www.bloods-gang.forumgratuit.org mais elle est redirigée vers le nom de domaine personnalisé.

[Ajesto]

Eh bien, pour moi le nom de domaine ne marche pas ^^

[Krazy]

Je ne vois pas comment vous aider à y accéder, des utilisateurs sont pourtant bien connectés sur mon forum.

[Ajesto]

J'avais un problème DNS, je m'excuse :c

Du coup, mettez dans votre CSS :

Code:

ul.linklist.navlinks {
    width: 100%!important;
    height: 50px;
    margin-left: 0!important;
    background-color: rgba(209, 104, 72, 0.44); /* Fond de la barre */
}
ul.linklist.navlinks img {
    display: none; /* Je cache les images */
}
.navbar a.mainmenu {
    display: inline-block;
    height: 50px;
    padding: 0 15px;
    font-size: 13px;
    line-height: 46px;
    color: #ffffff;
    transition: all 100ms;
}
.navbar a.mainmenu:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

Bien à vous,
Laiorm

[Krazy]

Merci beaucoup, cela est parfait.

Néanmoins, j'avais masqué les boutons "faq" et "search" et ils sont réapparus avec le code.
J'aimerai aussi savoir comment renommer "accueil" en "forum" et "s'enregistrer" en "inscription".
Troisième et dernière chose, je voudrais créer un bouton "panel" avec l'adresse du PA. Comment faire ?

Merci de votre aide.

[Ajesto]

Néanmoins, j'avais masqué les boutons "faq" et "search" et ils sont réapparus avec le code.

Dans le CSS, mettez :

Code:

.navbar a.mainmenu[href^="/search"], .navbar a.mainmenu[href^="/faq"] {display: none!important;}

J'aimerai aussi savoir comment renommer "accueil" en "forum" et "s'enregistrer" en "inscription".

Dans le CSS, mettez :

Code:

.navbar a.mainmenu[href="/"]::before {content: "Forum";font-size: 12px;}
.navbar a.mainmenu[href="/"] {font-size: 0;}
.navbar a.mainmenu[href="/register"]::before {content: "Inscription";font-size: 12px;}
.navbar a.mainmenu[href="/register"] {font-size: 0;}

Troisième et dernière chose, je voudrais créer un bouton "panel" avec l'adresse du PA. Comment faire ?

Dans le CSS, mettez :

Code:

a[href^="/admin/index.forum?part=admin"] {
    position: absolute;
    top: 0;
    z-index: 999;
    color: #f0f0f0;
    text-transform: uppercase;
    display: block;
    font-size: 0;
    height: 40px;
    padding: 0 15px;
    line-height: 41px;
    right: 10px;
    transition: all 700ms;
}
a[href^="/admin/index.forum?part=admin"]:hover {
    background-color: rgba(100,0,0,0.3);
}
a[href^="/admin/index.forum?part=admin"]::before {content: "Panel";font-size: 12px;}

Bien à vous,
Laiorm

[Krazy]

Merci beaucoup pour votre aide, tout fonctionne.

Passez une bonne journée.

[Ajesto]

Merci beaucoup pour votre aide, tout fonctionne.

Passez une bonne journée.

De rien Passez aussi une bonne journée ^^