• [CSS] Modifier un élément sur deux

    En voyant la liste de mes derniers articles (le module "Derniers articles"), je me suis dit qu'avec des longs titres ça devenait une grosse bouillie illisible.

    L'idée est d'avoir une ligne sur deux avec une couleur différente, comme vous pouvez le voir sur ce blog à droite.

    Il est possible de faire cela avec du code CSS, pour peu que le visiteur ait un navigateur assez récent (au moins IE9 par exemple) ; si ce n'est pas le cas ce n'est pas grave l'affichage restera comme d'habitude.

    Note : le code CSS peut être ajouté dans le menu « Apparence » => « Modifier le thème » => « Ajouter du CSS ».

    Voir cet article pour une première découverte du CSS : Mon premier code CSS - images au coins arrondis avec ombrage

    Pour connaître les noms/classes des éléments du blog : Structure d'un blog Eklablog (en-tête, contenu, menus...)

    Le sélecteur CSS qui permet de réaliser cela est nth-child.

    Pour ce blog j'utilise ce code CSS :

    /* Derniers articles */
    .
    module_menu_type_lastarticles li:nth-child(odd) a {color:#505050}
    .module_menu_type_lastarticles li:nth-child(even) a {color:#808090}
     

    • "module_menu_type_lastarticles" est la classe du module des derniers articles.
    • "li" est le type des éléments contenant chaque titre d'article.
    • "nth-child" permet de rechercher un sous-élément particulier : odd pour les éléments impairs, even pour les éléments pairs.
    • "a" est le type des éléments liens hypertextes dont on veut changer la couleur.

     

    De la même manière, on peut modifier par exemple la couleur du titre d'un article sur deux, dans le contenu du blog cette fois-ci :

    /* Titres des articles */
    #content .ulmodules li:nth-child(odd) .module_titre_contenu a {color:darkred}
    #content .ulmodules li:nth-child(even) .module_titre_contenu a {color:darkblue}

     

    Le premier article affiché aura son titre en bleu foncé (darkblue), le second en rouge foncé (darkred), puis ça continue en alternance.

     Et voilà c'est assez facile en fait ! wink2

    « [QUIZ] Démo de quiz[QUIZ] Insérer des quiz dans Eklablog »

  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :