• Résolu Couleur des liens du module rubriques


    Dimanche 25 Septembre 2022 à 19:03
    Alheck69

    Bonjour, je souhaiterais modifier chaque lien dans le module rubrique afin que chacun d'eux apparaissent d'une différente couleur (voir l'image) et qu'au survole de ces liens une autre couleur soit possible (Ex: Accueil rouge vif et survol rouge foncé) ...

    Vous remerciant par avance de l'aide que vous pourrez m'apporter pour accomplir cette programmation ccs. J'ai testé des trucs mais ça ne fonctionne pas, du coup ben "Help !!!"he - j'ai essayé en faisant un module simple mais ça ne me convient pas...

    Amicalementwink2

    Alheck

     

    Lundi 26 Septembre 2022 à 14:30
    stormalo

    Bonjour,

    Pour trouver les sélecteurs css permettant de cibler un lien on peut le demander à Firefox (ce que j'ai fait sans chercher plus loin)

    Rappel: le sélecteur c'est ce qui précède {... } dans une règle CSS

    1) clic droit sur le lien puis choisir Inspecter  (il apparait alors une fenêtre avec une ligne surlignée en bleue)
    2) clic droit au tout début de cette ligne bleue et choisir : Copier > Le sélecteur css
    3) Faire un Coller dans un brouillon pour noter le sélecteur recherché  (le reste à écrire c'est du css élémentaire)

    Voici le genre de résultat :

    /* pour le 1er lien */
    #module_menu_contenu123456789 > div:nth-child(1) > ul:nth-child(1) > li:nth-child(1) a {color: xxxx ;}
    #module_menu_contenu123456789 > div:nth-child(1) > ul:nth-child(1) > li:nth-child(1) a:hover {color: xxxx ;}

    /* pour le 2ème lien */
    #module_menu_contenu123456789 > div:nth-child(1) > ul:nth-child(1) > li:nth-child(2) a {color: xxxx ;}
    #module_menu_contenu123456789 > div:nth-child(1) > ul:nth-child(1) > li:nth-child(2) a:hover {color: xxxx ;}

    /* pour le 3ème lien */
    #module_menu_contenu123456789 > div:nth-child(1) > ul:nth-child(1) > li:nth-child(3) a {color: xxxx ;}
    #module_menu_contenu123456789 > div:nth-child(1) > ul:nth-child(1) > li:nth-child(3) a:hover {color: xxxx ;}

    /* Etc pour les autre liens  */

    Instructions pour adapter le codage ci-dessus à ton blog :
    - Remplacer 123456789 par le vrai numéro d'identification➚ du module
    - Pour le choix de la couleur, remplacer les xxxx par le code de la couleur choisie (pour couleur Rouge mettre red ou #FF0000  (ne pas oublier les ; )
    - Les lignes avec a:hover concernent les liens survolés
    - Pour appliquer en plus une couleur de fond lors du survol, ajouter la propriété  background-color: xxxx ; avant le } de fermeture.

    Une liste code couleur prête à consommer: (personnellement j'utilise l'éditeur et les couleurs exprimée en #- - - - - -)
    https://web-color.aliasdmc.fr/couleurs-hexa-rgb-hsl-predefini-html-css.php

     

    On peut éventuellement réduire la longueur de chaque ligne pour de ce code, mais mon choix ici c'est de proposer un truc assez facile à reproduire (enfin j'espère)

     

    Lundi 26 Septembre 2022 à 19:44
    Alheck69

    Bonjour Stormalo,

    Merci pour ton aide ça fonctionne super bien.

    A bientôt pour de nouvelles aventures sur Eklavogue !he

    Amicalement

    Alheck




    Ce sujet est verrouillé. Vous ne pouvez donc pas poster de nouvelles réponses.