site.footer modifier la couleur de background et des links sur tous les supports (Créer un compte)

  • WordPress :5.3
  • Statut : non résolu
3 sujets de 1 à 3 (sur un total de 3)
  • Auteur
    Messages
  • #2337178
    sar
    Participant
    Initié WordPress
    2 contributions

    Bonjour,

    Ma configuration WP actuelle :
    – Version de WordPress : 5.4
    – Version de PHP/MySQL : 7.3.16 / 5.5.5
    – Thème utilisé : Twenty Seventeen Child
    – Thème URI : https://wordpress.org/themes/twentyseventeen/
    – Extensions en place : Advanced TinyMCE Configuration (1.5), All In One SEO Pack (3.4.2), Child Theme Configurator (2.5.2), Customize Twenty Seventeen (1.0.5), FooBox Image Lightbox (2.7.8), FooGallery (1.9.11), FooGallery Owl Carousel Template (1.4.2), FooThumbnails for Galleries (1.1.0), Forum_wordpress_fr (4.2), Page Builder by SiteOrigin (2.10.14), SiteOrigin Widgets Bundle (1.16.0), TinyMCE Advanced (5.4.0), WPForms Lite (1.5.9.5), WP Google Maps (8.0.21), WP Mail SMTP (1.9.0)
    – Adresse du site : http://www.compostor.fr
    – Nom de l’hébergeur : Apache

     

    Problème(s) rencontré(s) : Bonjour, Mon problème se situe en footer :

    /* Footer */

    .site-footer {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.6;
    margin-top: 3em;
    background-color: #77b03b;
    }

    J’ai ajouté une background-color: au fichier style.css mais j’ai un soucis pour son affichage sur les téléphones mobiles (ça marche sur PC et sur tablettes).

    D’autre part j’ai bricolé dans mon style.css >enfant mais les couleurs des links ( idéalement en white sans surlignage) a:hover, a:link; a:active etc… ne fonctionnent pas bien et surtout pas sur les mobiles. Je vois qu’il faut que je cherche à modifier @media …mais j’ai besoin de vos conseils avant tout …

    Mon style.css enfant ou bricodage actuel (seulement backgroud-color fontionne) :

    <?php
    .site-footer {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.6;
    margin-top: 3em;
    background-color: #77b03b !important;
    }
    .site-footer a:link {color: #ffffff !important};
    .site-footer a:visited {color: #355513 !important};
    .site-footer a:hover {color: #82f50b !important};
    .site-footer a:active {color: #edfb54 !important};

    @media screen and (min-width: 30em) {
    .site-footer {
    font-size: 16px;
    font-size: 1rem;
    background-color: #77b03b;
    }
    .entry-footer a:link {color: #ffffff !important};
    .entry-footer a:visited {color: #355513 !important};
    .entry-footer a:hover {color: #82f50b !important};
    .entry-footer a:active {color: #edfb54 !important};
    }
    .entry-footer {
    display: table;
    width: 100%;
    background-color: #77b03b;
    }

    .entry-footer .cat-tags-links {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    }

    .entry-footer .edit-link {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
    }

    .entry-footer .edit-link a.post-edit-link {
    margin-top: 0;
    margin-left: 1em;
    }
    ?>

     

    Merci d’avance pour l’aide que vous voudrez bien m’apporter !

    Prenez soin de vous pendant le confinement.

    J.

    • Ce sujet a été modifié le il y a 1 mois et 3 semaines par sar.
    • Ce sujet a été modifié le il y a 1 mois et 3 semaines par sar.
    #2337189
    PhiLyon
    Modérateur
    Maître WordPress
    25690 contributions

    Bonjour.

    Tu fais fort, tu mets des balises PHP dans ton style.css, ça ne fonctionnera pas.

    De plus il faut mieux cibler ce que tu veux modifier, un exemple

    .colors-custom .widget ul li a, .colors-custom .site-footer .widget-area ul li a:link {color: #000 !important};
    .site-footer a:visited {color: #355513 !important};
    .site-footer a:hover {color: #82f50b !important};
    .site-footer a:active {color: #edfb54 !important};

    🙂

    #2337190
    sar
    Participant
    Initié WordPress
    2 contributions

    Merci c’est gentil de vous occuper d’ne brêle comme moi !

    L’idéal serait de faire deux ‘classes'(je ne sais pas si le terme est juste’), une pour le reste de la page et une autre classe juste pour le footer avec

    deux  jeux de couleurs différentes, non ?

    Et comment faites-vous pour sélectionner les cibles à affecter ?

    J’essaie de me former en accéléré sur : http://www.yoyodesign.org/doc/w3c/css2/selector.html; http://www.yoyodesign.org/doc/w3c/css2/cover.html mais c’est un peu long.

     

3 sujets de 1 à 3 (sur un total de 3)
  • Vous devez être connecté pour répondre à ce sujet.