dKret : modifier l’apparence des liens

Mise à jour le 21 septembre 2008 @ 10:13

Nous avons rédigé avec Yin-Yin une page proposant quelques éléments pour modifier sa feuille de style pour le thème dKret. Je vous invite à vous y reporter.

A partir des modifications déjà effectuées, et grâce aux explications que j’ai trouvées sur la page Tutoriels HTML et CSS, j’ai donné, comme dit Christine, un coup de boost à mes liens.

Les liens dans les articles

Auparavant, les liens s’affichaient en vert et étaient soulignés. Au passage de la souris, ils devenaient bleus tout en restant soulignés. Le code utilisé était le suivant :

.entry-content a {
      text-decoration: underline;  /*soulignement des liens*/
}
 a {
 	    color: #339900;  /* couleur des liens*/
}

Afin d’afficher les liens en blanc sur fond vert au passage de la souris, j’ai modifié le code ainsi :

.entry-content a {
text-decoration: underline;  /*soulignement des liens*/
}
 
 a {
 	color: #339900;} /* couleur des liens */
}
a:hover	{ /* survol des liens */
	color: white;   /* affichage des liens en blanc au survol de la souris */           
	background-color: #339933; /* sur fond vert */
	text-decoration: none; /* sans soulignement */
}

Les liens des titres

Avec le code ci-dessus, tous les liens, y compris ceux des titres, s’affichent sur fond vert.

Avant les modifications, le code pour l’affichage des titres était le suivant :

h2, h2 a, h2 a:hover, h3, h3 a, h3 a:hover, h4, h4 a, h4 a:hover {
	color: #006699; /* affichage des titres en bleu */
}
h3, h3 a, h3 a:hover {
	border-bottom: 1px dotted #006600; /* soulignement en pointillé des titres de niveau 3 */
}

J’ai choisi d’afficher, au survol de la souris, les titres de niveaux 2, 3 et 4 en blanc sur fond bleu :

h2, h2 a, h3, h3 a, h4, h4 a {
	color: #006699; /* couleur bleu foncé des titres de niveaux 2, 3 et 4 */
}
 
#content h2 a:hover, #content h3 a:hover, #content h4 a:hover  { 
/* affichage des titres  de niveaux 2, 3 et 4 au survol de la souris */
	color: white;   /* affichage des liens en blanc au survol de la souris */            
	background-color: #3366FF; /* sur fond bleu */
}
 
h3, h3 a, h3 {
	border-bottom: 1px dotted #006600;  /* soulignement en pointillé des titres de niveau 3 */
}

Si on ne souhaite pas que les titres s’affichent sur un fond de couleur au survol de la souris, le code est le suivant :

h2, h2 a, h3, h3 a, h4, h4 a {
	color: #006699; /* couleur bleu foncé des titres de niveaux 2, 3 et 4 */
}
 
h2 a:hover, h3 a:hover, h4 a:hover	{  
	background: none;    /* pas de fond au survol de la souris */     
}
 
h3, h3 a, h3 {
	border-bottom: 1px dotted #006600;  /* soulignement en pointillé des titres de niveau 3 */
}

Les liens du menu

Le code que j’utilisais pour afficher les liens du menu était le suivant :

#menu a {
      color:#336666; /* affichage des liens du menu en vert */
}
#menu a:hover { /* survol des liens */
      color:#00CCFF; /* affichage en bleu au passage de la souris */
}

Le survol de la souris sur les menus affiche alors un fond vert, tout en conservant la couleur bleue du lien.

J’ai donc modifié le code :

#menu a {
	color:#336666; /* liens en vert */
}
#menu a:hover { /* survol des liens */
	color: white;    /* affichage des liens en blanc au survol de la souris */          
	background-color: #99CC99; /* sur fond vert, un peu différent de celui utilisé pour les articles */
}

Les liens du footer (pied-de-page)

Les liens dans le footer sont affichés en vert. Avec le code antérieur, les liens s’affichaient, comme sur le reste du blog, en bleu au survol de la souris, ils étaient donc peu lisibles sur fond vert :

#footer a {
	color: #339933; /*couleur des liens, pas de modification spécifique au survol de la souris */
 }

J’ai donc choisi là aussi de les afficher en blanc sur fond vert au passage de la souris :

#footer a {
	color: #339933; /* affichage des liens en vert */
}
 
#footer a:hover	{ /* survol des liens */
	color: white; /* affichage des liens en blanc au survol de la souris */             
	background-color: #339933; / *sur fond vert */
}

Tous les liens du blog s’affichent donc maintenant sur fond vert, sauf… pour la modification des commentaires, mais cela ne concerne que l’administrateur du blog, alors ce n’est pas grave ;-) (L’item Supprimer est à peine visible !

Commentaires

Les liens des vignettes affichées par NextGen Gallery

NextGen Gallery dispose d’un fichier CSS. J’ai recherché ce qui pouvait correspondre à l’affichage du lien au survol de la souris en effectuant une recherche dans le code sur le mot hover.

Après l’avoir trouvé, j’ai inséré les lignes concernées dans ma feuille de style dKret en modifiant la couleur pour l’assortir à mon blog !

.ngg-gallery-thumbnail img:hover {
	background-color: #99CC99;
}

Il reste encore quelques améliorations à apporter :

  • personnaliser peut-être les liens de la barre latérale,
  • personnaliser ceux du nuage de tags,
  • et si je trouve, « booster » ceux des titres !


Ecrit par Lise - Site

Mot(s)-clé(s) ,

3 commentaires

Ecrire un commentaire»
  1. Frederico

    Bonjour Lise.
    C’est dur d’être débutant …..
    J’ai choisi comme thème pour ma page Picture Perfect 1.2 , il y a des photos dans le menus en haut à gauche , comment je fais pour les changer?
    Comment je fais pour entrer du code html ?
    Merci Lise.

    1. C’est dur d’être débutant …..

      Je sais ;-)

      J’ai choisi comme thème pour ma page Picture Perfect

      Je ne connais pas Picture Perfect. Je ne peux répondre que sur le thème que j’utilise, dKret, auquel nous avons consacré quelques pages
      http://liseweb.fr/BLOG/wordpress/theme-dkret
      et qui me permet de changer les images d’entête.

      Comment je fais pour entrer du code html ?

      Où ça ? dans un article ? si c’est le cas, après avoir cliqué sur Nouvel article il faut utiliser l’onglet code. Dans la page http://liseweb.fr/BLOG/wordpress/commencer-avec-wordpress/wordpress-quelques-sites, j’ai cité quelques sites qui traitent du sujet au paragraphe Utiliser l’éditeur html.

  2. yves

    Merci beaucoup pour cette aide, je galérais comme un petit fou et en quelques lignes j’ai compris le truc.
    Je vais continuer à geeker votre site, vous faites les choses bien !

Laisser un commentaire

Votre adresse mail ne sera jamais rendue publique ni utilisée.

*Si vous écrivez un commentaire ici pour la première fois, celui-ci ne sera publié qu'après validation par un administrateur du blog. Ne l'envoyez pas plusieurs fois !
*Bien sûr, tout commentaire injurieux, publicitaire ou spam sera supprimé.
*C'est à vous maintenant !

(obligatoire)
(obligatoire)
(obligatoire)

Laisser ces deux champs tels quels :

Protégé par Invisible Defender.

Protected by WP Anti Spam

  • Mentions légales
    Les différents éléments du Blog de Lise restent la propriété de leur(s) auteur(s) respectifs.


Connexion à WordPress protégée par Clef