55 résultats trouvés pour effet_hover

Salut à tous !

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 !

Bonjour, Bonsoir, Salut, Yo, enfin voila x).

Après mainte recherche je vois qu'aucun tuto n'a été poster sur la barre de navigation fait uniquement pas CSS, alors je me lance pour vous l'expliquez.

Niveau: Facile Aperçu: Ici Tuto by Sui'

Alors nous allons commencer par le commencement logique :p.

Allez dans votre Panneau d'Administration -> Affichage -> En-tête et Navigation :

- Afficher seulement des images dans la barre des liens : Cocher Non
- Position du menu: Centrer
- Forcer la barre de navigation à rester sur une ligne : Cocher Oui

Enregistrez

Ensuite allez dans Affichage -> Couleur -> Feuille de Style

Mettez ce code à l'intérieur:

Code:

a.mainmenu img {
display:none;
}

a.mainmenu{
    text-decoration:none;
        padding: 1px 1px;
        margin: 0px;
        background: #Couleur;
        color: #000;
        border: 1px solid #Couleur;
}

Padding est la marge entre le texte et le cadre, le premier chiffre donnera l'espace entre le haut et le bas , alors que le second donnera l'espace à gauche et à droite.

Margin est l'espace entre tous les cadres, à vous de mettre la taille souhaiter.

Background est la couleur de fond de la cellule, à vous de mettre le code couleur voulu.

Color signifie la couleur du texte.

Border signifie la bordure sur le coup j'ai directement mis l'épaisseur de la bordure le style et la couleur, à vous de l'adaptez par la suite.


Maintenant nous allons rajouter un code qui changera l'aspect de la cellule au passage de la souris (Non obligatoire)

Code:

a:hover.mainmenu{
    text-decoration:none;
        padding: 1px 1px;
        margin: 0px;
        background: #000;
        color: #FFF;
        border: 1px solid #FFF;
}

Je n'est seulement changer que les couleurs, une nouvelle fois à vous de l'adaptez .

Maintenant comme je me doute vous avez tous cette barre de navigation coller à la publicité pour l'espacer il vous suffit juste de mettre ce code :

Code:

#page-body {
margin-top:15px;
}

A vous de modifier le nombre selon l'espace que vous voulez.

N'oubliez pas de Valider

Pour avoir des codes couleurs rendez vous sur le tuto de Mao : [url=/forumactif-f51/pour-mettre-un-peu-de-couleur-aux-forumsd-t11664.htm]Ici[/url]

Et oui c'est déjà fini x), j'espère que se tutoriel vous aura aider.

Si vous voyez des fautes ( doit y en avoir :o) et si vous avez des questions n'hésiter pas :).

Yop yop^^

Voici un code relativement simple permettant d'avoir une image à opacité réduite qui devient "normale" au survol de la souris.

Exemple :