Voilà le tuto dont je me suis servit pour refaire la barre d'accueil. Merci Never Utopia.
- Never Utopia a écrit:
- Voici une méthode déjà connue mais bien pratique pour afficher une barre de navigation en rollover (avec image changeant au survol de la souris donc) très simplement, sans toucher aux templates, juste en modifiant le CSS de votre forum.
Cette astuce a le gros avantage de fonctionner sur toutes les versions de forum (du moins celles sorties pour le moment^^), ainsi que de pouvoir d'appliquer aux boutons de base et donc d'avoir le changement d'image pour les nouveaux MP par exemple^^
Principe :
Nous allons mettre les images directement via le css et afficher une image différente pour le lien "neutre" et le lien survolé.
• Commencez par enlever toutes les images de votre barre de navigation et allez dans :
Affichage > Page d'accueil > En-tête & navigation
Et sélectionnez "oui" dans "Afficher seulement des images dans la barre de navigation".
• Allez ensuite dans votre feuille CSS de forum (je rappelle qu'elle se situe dans "Affichage" > "Couleur" Onglet "Feuille CSS"). Je vous donne l'exemple pour le bouton "Accueil" (l'index, selon vos appellations) :
- Code:
-
#i_icon_mini_index
{
background-image: url(adresse de l'image);
width: 80px;
height: 30px;
}
#i_icon_mini_index:hover
{
background-image: url(adresse de l'image);
}
Je vous explique ce que signifie ce code :
- l'information avec # c'est le nom du bouton accueil, pour résumer, les informations entre {} sont donc interprétées comme s'appliquant forcément à ce bouton là et pas un autre.
- le "background-image" c'est simplement l'image de fond du lien (rassurez-vous, le lien sera toujours là^^). Il vous faudra donc héberger l'image voulue et mettre l'adresse entre les parenthèses.
- width : c'est la largeur de l'emplacement de l'image, autrement dit celle de l'image elle-même.
- height : c'est la hauteur de l'image.
- la seconde partie avec le nom de la zone # suivie de "hover" désigne la même zone une fois survolée, il vous faut donc mettre dans "background-image" l'adresse de l'image devant apparaitre lorsque l'on passe sur le lien avec la souris.
Remarque : il n'est pas nécessaire de remettre la taille pour le "hover".
• Normalement, vous devez avoir votre bouton "Accueil" placé. Il s'agit maintenant de faire la même chose avec tout les autres ! Je vous donne simplement le nom de la "division" (zone de chaque bouton), à vous de refaire pareil que précédemment avec les images correspondantes.
- Code:
-
Accueil : #i_icon_mini_index / #i_icon_mini_index:hover
Portail : #i_icon_mini_portal / #i_icon_mini_portal:hover
Galerie : #i_icon_mini_gallery / #i_icon_mini_gallery:hover
Calendrier : #i_icon_mini_calendar / #i_icon_mini_calendar:hover
FAQ : #i_icon_mini_faq / #i_icon_mini_faq:hover
Rechercher : #i_icon_mini_search / #i_icon_mini_search:hover
Membres : #i_icon_mini_members / #i_icon_mini_members:hover
Groupes : #i_icon_mini_groups / #i_icon_mini_groups:hover
Profil : #i_icon_mini_profile / #i_icon_mini_profile:hover
Message privé : #i_icon_mini_message / #i_icon_mini_message:hover
Nouveau message privé : #i_icon_mini_new_message / #i_icon_mini_new_message:hover
Se déconnecter : #i_icon_mini_logout / #i_icon_mini_logout:hover
S'enregistrer : #i_icon_mini_register / #i_icon_mini_register:hover
Se connecter : #i_icon_mini_login / #i_icon_mini_login:hover
En espérant que ce code vous serve !
Bon, ce tuto marche du tonnerre et c'est que du CSS. En résumer, voilà les étapes :
- Retirer toutes les images de la barre de navigation
- Aller dans la partie CSS du panneau de configuration
- Coller le code suivant
- Code:
-
/*Barre de navigation*/
#i_icon_mini_index
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/acceui10.jpg);
width: 71px;
height: 44px;
}
#i_icon_mini_index:hover
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/acceui11.jpg);
}
#i_icon_mini_portal
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/portai10.jpg);
width: 73px;
height: 44px;
}
#i_icon_mini_portal:hover
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/portai11.jpg);
}
#i_icon_mini_faq
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/faq10.jpg);
width: 51px;
height: 44px;
}
#i_icon_mini_faq:hover
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/faq1010.jpg);
}
#i_icon_mini_search
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/recher10.jpg);
width: 98px;
height: 44px;
}
#i_icon_mini_search:hover
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/recher11.jpg);
}
#i_icon_mini_members
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/membre10.jpg);
width: 94px;
height: 44px;
}
#i_icon_mini_members:hover
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/membre11.jpg);
}
#i_icon_mini_groups
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/groupe10.jpg);
width: 84px;
height: 44px;
}
#i_icon_mini_groups:hover
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/groupe11.jpg);
}
#i_icon_mini_profile
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/profil10.jpg);
width: 53px;
height: 44px;
}
#i_icon_mini_profile:hover
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/profil11.jpg);
}
#i_icon_mini_message
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/messag10.jpg);
width: 100px;
height: 44px;
}
#i_icon_mini_message:hover
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/messag11.jpg);
}
#i_icon_mini_new_message
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/nouvea10.jpg);
width: 100px;
height: 44px;
}
#i_icon_mini_new_message:hover
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/nouvea11.jpg);
}
#i_icon_mini_register
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/barre-10.jpg);
width: 126px;
height: 44px;
}
#i_icon_mini_register:hover
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/barre-11.jpg);
}
#i_icon_mini_login
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/connex10.jpg);
width: 126px;
height: 44px;
}
#i_icon_mini_login:hover
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/connex11.jpg);
}
#i_icon_mini_logout
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/daconn10.jpg);
width: 126px;
height: 44px;
}
#i_icon_mini_logout:hover
{
background-image: url(http://i46.servimg.com/u/f46/15/46/56/34/daconn11.jpg);
}
Il suffit juste d'adapter ce code maintenant. Si tu veux changer les images, c'est donc là que ça se passe. L'avantage du code est qu'il est suffisamment simple pour que l'on oublie rien : tout est à traité. Donc pense bien aux tailles
. Sinon, pour les image que j'ai rajouté, c'est juste pour le test. Je connais ton amour du bleu, donc fais-toi plaisir si tu veux changer ça et optimiser le tout.
L'un des avantages de ce tuto, c'est qu'il augure pas mal de choses, notamment la possibilité de faire pareil avec tous les boutons, genre ceux qu'il y a en dessous des messages (mp, e-mail, skype,...) ou les classiques Nouveaux et Répondre. Si tu es motivée, dit le moi et je te trouve leurs codes
.
Accueil
Sujet: Barre de navigation interractive