Gérer la barre de Navigation seulement en CSS

[AlexiSonic]

Bonjour,

Sur le forum Tails Dreamer (forum PHPBB2, templates non modifiés, CSS personnalisé, je ne suis pas fondateur mais ai la possibilité de contacter celui-ci), j'ai ajouté de nouveaux menus dans la barre de navigation. Ce sont essentiellement des liens ramenant vers des rubriques/topics importants.
Seules les images sont affichées, la barre s'affiche sur une seule ligne.
Parmi les fonctionnalités du forum, on trouve un sélecteur de thèmes (ramenant à d'anciens thèmes temporaires) dans le message de bienvenue de la page d'accueil.

Actuellement, l'ajouts de boutons dans la barre de navigation se combine très mal avec le sélecteur de thèmes, dans la mesure où ce dernier ne joue que sur le CSS du forum et que les boutons supplémentaire ajoutés dans la barre de navigation ne sont rattachés à aucun ID auquel le CSS peut influer.

Mon objectif est donc de trouver une solution alternative pour implémenter ces boutons supplémentaires dans la barre de navigation, de sorte qu'il soit possible de modifier leur image via la feuille de style CSS, et ainsi contrôler leur apparence avec le sélecteur de thème.

En vous remerciant d'avance,



EDIT : à force de recherches, je suis tombé sur une solution de remplacement alternative, grâce à ce type de code :

Code:

.mainmenu[href="URL"]{
  background-image:transparent;
}

Je n'ai pas encore testé, mais l'idée serait, pour tous les boutons ajoutés, de remplacer l'image de base par une image transparente et d'utiliser ce code pour mettre en background l'image de son choix (à la place de "transparent" dans le code).
Je crains cependant que ceci empêche le bouton de fonctionner.
En tout cas, cela me force à utiliser des boutons personnalisés qui auront tout le temps les mêmes dimensions quelque soit le design, ce qui est un peu restrictif.

Si vous avez de meilleures solutions, je suis preneur.

[Cyn]

Hello ^^

Tu pourrais tenter de remplacer entièrement ta barre de navigation par une barre fabriquée de toute pièce.

-> Tu notes les liens dont tu as besoin.
-> Tu codes une div en forme de barre de navigation dans laquelle placer tes liens/images.
-> Dans cette div, tu codes tes liens séparément de cette façon :

Code:

<a href="lien-du-premier-élément-de-la-navigation"><div class="lien1"><img src="Une image transparente" /></div></a>

Avec un CSS du genre :

Code:

.lien1 { /*Image du lien 1*/
  display: inline-block; /*Enlever le retour à la ligne entre chaque image*/
  background-image: url(URL DE L'IMAGE);
  width: 30px; /*Largeur de Image du lien1*/
  height: 30px; /*Pour la hauteur*/
}

(C'est une idée, j'ai pas testé. =P Mais ça te donnerait un contrôle complet sur chaque image.)

[AlexiSonic]

Je suppose que ça reste la meilleure solution. Merci pour la proposition !