Retirer le surlignement des liens
 :: Codage :: Tutoriel pour structure Voir le sujet précédent Voir le sujet suivant Aller en bas
avatar
Voir le profil de l'utilisateur
Fondateur, lézard overbooké et caféiné
Crédit avatar : Test1
Ses absences : -
Commentaire(s) du joueur : Je suis le fondateur et administrateur principal de ce forum mais je ne mord pas alors n’hésitez pas à me solliciter ! Smile
➔Mon compte joueur est : Ilclaste Sang-blanc
Reserve de point(s) : 163
Shay Altanir a écrit:
Aller une petite astuce toute seule pour retirer le soulignement des liens!
Il suffit de copier coller le code suivant dans votre CSS (PA → Affichage → Couleur → Feuille de style CSS)

Code:
a:link{/*lien*/
   text-decoration: none !important;
    }
a:visited{/*lien visité*/
   text-decoration: none !important;
    }
a:hover{/*Lien au passage de la souris*/
    text-decoration: none !important;
    }

Grâce à cette base vous pouvez faire des effets sympas en utilisant les propriétés disponible dans ce tutoriel

Par exemple si vous voulez que le lien passent en italique au passage de la souris mettez

Code:
a:hover{/*Lien au passage de la souris*/
    text-decoration: none !important;
font-style:italic;
    }

Allez comme je suis de bonne humeur je vous donne une nouvelle propriété qui peut être bien sympathique :
Code:
Letter-spacing:...px;
Avec ça vous pouvez régler l'espacement des lettres au passage de la souris (les rapprocher ou les éloigner par exemple!)

Voilà une astuce toute simple qui peut donner des effets géniales !


Hypnos a contribué à ce tutoriel en vous explicitant comment modifier les titres au survol :
Hypnos a écrit:
Les titres qui se modifient
Quand tu passes ta souris.

    A savoir...
    Utilisation du CSS et un poil de HTML.
    Tutoriel plutôt facile.
    Tous les navigateurs ne prennent pas en compte cet effet.
    Il faut être administrateur pour appliquer ce tutoriel.

Tout commence avec du CSS, comme pour la plupart des effets de ce genre. Le CSS est extrêmement pratique (voir indispensable) pour raccourcir un peu vos code (il ne suffit d'utiliser qu'une seule balise et pas une montagne de précisions) et pour faire ce genre d'effets. Il a juste le simple inconvénient de n'être applicable que sur votre forum mais c'est un détail. C'est une sorte de langue, qui se construit avec une grammaire (codes de base) mais pour vraiment bien le "parler", il faut avoir un vocabulaire approfondi (pour enjoliver)

Commençons par le code de "base", dans Panneau d'administration > Affichage > Images & Couleurs > Couleurs > Feuille de style CSS.
Code:

.texte /*le titre n'a pas d'importance. Cette partie correspond au texte avant le survol*/
{
font-family: arial; /* j'attribue la police arial au texte*/
color: black; /* et la couleur noire */
}

.texte:hover /*Cette partie correspond au texte au survol, d'où le hover*/
{
font-variant: small caps; /* le texte sera en petites majuscules*/
text-shadow: 0px 0px 5px black; /* et aura une ombre noire */
}

Nb: Il est inutile de c/c tout le code de la première partie dans la seconde, par défaut, il est appliqué, sauf si un changement est indiqué.

Comme vous pouvez le constater, c'est un code très simple, déclinable à l'infini avec d'autres couleur, en rajoutant des fonds, des images, des variantes etc... Du vocabulaire en somme !

Pour l'appliquer à un topic, il vous suffit d'entrer ce code :
Code:
<div class="texte">votre texte ici</div>
Le mot class renvoie à une info de votre CSS étant .texte, vous pouvez bien sûr changer ce titre mais il faut alors l'appliquer aussi sur le topic.

Voilà !
En espérant vous avoir été utile.
flower

Sam 19 Jan - 11:47
Revenir en haut Aller en bas
Page 1 sur 1
Sauter vers: