Polices et réglages thème enfant (Créer un compte)

  • WordPress :5.2
  • Statut : non résolu
15 sujets de 16 à 30 (sur un total de 36)
  • Auteur
    Messages
  • #2279167
    CoinCoin
    Participant
    Chevalier WordPress
    116 contributions

    Merci :p

     

    Donc : thème enfant recréé et voilà ce que j’ai mis pour l’instant dans le style.css :

    
    
    @font-face {
    font-family: ‘Politica‘;
    src: url(‘politica.eot’);
    src: url(‘politica.eot?#iefix’) format(’embedded-opentype’),
    url(‘politica.woff2′) format(‘woff2’),
    url(‘politica.woff’) format(‘woff’),
    url(‘politica.ttf’) format(‘truetype’),
    url(‘politica.svg#svgwpf‘) format(‘svg’);
    }
    
    @font-face {
    font-family: ‘Pill Gothic Regular‘;
    src: url(‘pill_gothic_300mg_regular.eot’);
    src: url(‘pill_gothic_300mg_regular.eot?#iefix’) format(’embedded-opentype’),
    url(‘pill_gothic_300mg_regular.woff2′) format(‘woff2’),
    url(‘pill_gothic_300mg_regular.woff’) format(‘woff’),
    url(‘pill_gothic_300mg_regular.ttf’) format(‘truetype’),
    url(‘pill_gothic_300mg_regular.svg#svgwpf‘) format(‘svg’);
    }
    
    h1, h2, h3, h4, h5, h6 {
    font-family: ‘Politica’, Politica, sans-serif !important;}
    h1 {color : #245fA5; font-size: 36px !important}
    h2 {color : #245fA5; font-size: 28px !important}
    h3 {color : #245fA5; font-size: 26px !important}
    h4 {color : #245fA5; font-size: 24px !important}
    h5 {color : #245fA5; font-size: 22px !important}
    h6 {color : #245fA5; font-size: 20px !important}
    
    body {font-family: "Pill Gothic Regular", Pill Gothic Regular, sans-serif !important;}
    body {font-size: 14px !important}
    
    footer {
    background-color: #245fA5 !important;
    }
    
    entry-content a {color : #245fA5; font-size: 24px !important}

     

    Et j’ai copié les fichiers des polices avec les 5 extensions à la racine du thème enfant via Filezilla.

    Concrètement voilà ce que ça donne :

    • sur chrome, les titres ont changé en police Politica et en couleur (sauf les titres qui sont aussi des liens, qui restent en noir), le fond du footer a changé de couleur, les textes n’ont pas changé (ni couleur ni police)
    • sur safari, la couleur a changé sur le fond du footer et sur les titres comme pour chrome mais les polices n’ont pas changé, et les textes n’ont pas changé (ni couleur ni police)

    Merci de ton aide…

    #2279169
    PhiLyon
    Modérateur
    Maître WordPress
    27947 contributions

    Essaies comme-ça

    .site-footer {
    background-color: #245fA5 !important;
    }
    
    .entry-content a {color : #245fA5; font-size: 24px !important}

    Il ne faut pas oublier les points devant les classes.

    🙂

    #2279170
    CoinCoin
    Participant
    Chevalier WordPress
    116 contributions

    Alors j’avoue que je comprends pas le concept de classe par rapport au reste, je suis un peu novice en code même si j’ai quelques bases… :-/ D’autant que pour le footer ça avait marché sans le point… Bizarre ?

    J’ai fait la modif.

    Sur safari, tous les textes sont en bleu, même les liens maintenant (juste soulignés en noir)

    Sur chrome ça prend tjs un peu de temps avant de prendre en compte les modif (je sais pas pourquoi…), mais au final même changement que Safari sur la couleur

     

    Aucun changement sur les polices (logique vu qu’on a rien modifié par rapport à ça sur ton dernier message)

    #2279172
    CoinCoin
    Participant
    Chevalier WordPress
    116 contributions

    Je crois que je suis partie dans tous les sens dans mes demandes, voilà ce que je veux en résumé :

    Tous les textes sauf ceux du footer en #245fa5 (pour le footer j’ai mis du code directement dans des widgets html pour que le texte soit blanc)
    Tous les titres en police Politica (y compris menu)
    Tout le texte restant en Pill Gothic Regular

    Pour les liens :
    Les liens non activés aussi en #245fa5
    Les liens activés peuvent être dans une autre couleur (peut-être un bleu un peu plus clair, à voir)
    Et vu que c’est actuellement moche dans le footer : virer aussi le cadre blanc sur les images qui ont un lien hypertexte

     

    J’espère que c’est plus clair…

    #2279173
    PhiLyon
    Modérateur
    Maître WordPress
    27947 contributions

    Une majorité de personnes gérant/créant un site utilisent Firefox, fais tes essais dedans.

    Où as-tu mis tes polices exactement ?

    🙂

    #2279174
    CoinCoin
    Participant
    Chevalier WordPress
    116 contributions

    Directement là : /www/wp-content/themes/twentyseventeen-child

     

    Bon je vais installer Firefox pour tester aussi… Mais bon c’est pas possible que ça marche partout ? :’-(

     

    #2279175
    CoinCoin
    Participant
    Chevalier WordPress
    116 contributions

    Firefox = tout pareil que Chrome ! 😉

    #2279176
    PhiLyon
    Modérateur
    Maître WordPress
    27947 contributions

    Il y a un tuto là concernant font-face https://wpformation.com/comment-modifier-sa-font-ou-police-decriture-dans-wordpress/

    Et un tuto pour retrouver les bonnes classes https://developer.mozilla.org/fr/docs/Outils/Inspecteur

    🙂

    • Cette réponse a été modifiée le il y a 1 année et 11 mois par PhiLyon.
    #2279179
    CoinCoin
    Participant
    Chevalier WordPress
    116 contributions

    Merci beaucoup, je vais étudier tout ça 🙂

    #2279192
    CoinCoin
    Participant
    Chevalier WordPress
    116 contributions

    Bon alors j’ai beaucoup avancé grâce à tes conseils, donc grand merci 🙂

     

    Il me reste 2 petits soucis :

    • La police Pill Gothic ne s’applique nulle part, et je ne comprends vraiment pas pourquoi, je l’ai appliquée comme la police Politica qui fonctionne (enfin pas sur Safari mais tant pis)… Voilà tout le code concernant les polices, les couleurs passent bien partout mais pas les polices, peut-être que je ne vois plus rien à force, donc si tu peux jeter un oeil ça serait super sympa…
    @font-face {
    font-family: ‘Politica‘;
    src: url(‘politica.eot’);
    src: url(‘politica.eot?#iefix’) format(’embedded-opentype’),
    url(‘politica.woff2′) format(‘woff2’),
    url(‘politica.woff’) format(‘woff’),
    url(‘politica.ttf’) format(‘truetype’),
    url(‘politica.svg#svgwpf‘) format(‘svg’);
    }
    
    @font-face {
    font-family: ‘pillgothic‘;
    src: url(‘pillgothic.eot’);
    src: url(‘pillgothic.eot?#iefix’) format(’embedded-opentype’),
    url(‘pillgothic.woff2′) format(‘woff2’),
    url(‘pillgothic.woff’) format(‘woff’),
    url(‘pillgothic.ttf’) format(‘truetype’),
    url(‘pillgothic.svg#svgwpf‘) format(‘svg’);
    }
    
    h1, h2, h3, h4, h5, h6 {
    font-family: ‘Politica’, Politica, sans-serif !important;}
    h1 {color : #245fA5; font-size: 36px !important}
    h2 {color : #245fA5; font-size: 28px !important}
    h3 {color : #245fA5; font-size: 26px !important}
    h4 {color : #245fA5; font-size: 24px !important}
    h5 {color : #245fA5; font-size: 22px !important}
    h6 {color : #245fA5; font-size: 20px !important}
    
    /* couleur textes */
    body, button, input, select, textarea {
        color: #245fA5;
        font-family: 'pillgothic', pillgothic, sans-serif !important;
        font-size: 15px;
    }
    
    /* couleur/police titres menu */
    .navigation-top {
    font-family: ‘Politica’, Politica, sans-serif;
    	color : #ffffff; font-size:15px; background-color : #245fA5 !important;}

    • J’ai changé les couleurs du menu (fond bleu/écriture blanche), mais je voudrais inverser les couleurs pour le sous-menu (fond blanc/écriture bleue) et je voudrais aussi que lorsqu’on passe la souris ça s’allume en inversant les couleurs bleu/blanc. -> J’arrive à mettre la couleur de fond en blanc (voir code sub-menu), mais je ne trouve pas comment remodifier la couleur du texte (la commande en sub-menu ne prend pas), et je ne trouve pas non plus les réglages de “l’allumage” au passage de la souris… Une idée d’où chercher ? Ci-dessous le code pour l’instant intégré concernant les menus :
    /* couleur/police titres menu */
    .navigation-top {
    font-family: ‘Politica’, Politica, sans-serif;
    	color : #ffffff; font-size:15px; background-color : #245fA5 !important;}
    .wrap a {
        color: #ffffff !important;
    }
    
    .navigation-top .current-menu-item > a, .navigation-top .current_page_item > a {
        color: #245fa5;
    }
    .sub-menu {
    font-family: ‘Politica’, Politica, sans-serif;
    	color : #245fA5; font-size:15px; background-color : #ffffff !important;}

     

    Merci encore !!

    #2279196
    CoinCoin
    Participant
    Chevalier WordPress
    116 contributions

    Bon je viens de m’apercevoir d’un autre loupé…

    Pour changer la couleur du menu, j’ai utilisé

    .wrap a {
        color: #ffffff !important;
    }

    Le hic c’est que c’est le même code utilisé pour obtenir que les liens soient écrits en bleu et pas en blanc… Si je mets blanc, je suis ok sur le menu puisque sur fond de menu bleu, mais pas sur les liens puisque sur pages blanches, et inversement si je mets bleu… Y-a-t-il une solution ? Sinon je vais devoir abandonner mon menu bleu mais c’est dommage je le trouvais cool visuellement… 🙁

    #2279222
    PhiLyon
    Modérateur
    Maître WordPress
    27947 contributions

    Bonjour.

    Je ne sais pas si c’est uniquement sur le code que tu as collé ici mais tes apostrophes ne sont pas bonnes, essaies celui-ci

    @font-face {
    font-family: 'Politica';
    src: url('politica.eot');
    src: url('politica.eot?#iefix') format('embedded-opentype'),
    url('politica.woff2') format('woff2'),
    url('politica.woff') format('woff'),
    url('politica.ttf') format('truetype'),
    url('politica.svg#svgwpf') format('svg');
    }
    
    @font-face {
    font-family: 'pillgothic';
    src: url('pillgothic.eot');
    src: url('pillgothic.eot?#iefix') format('embedded-opentype'),
    url('pillgothic.woff2') format('woff2'),
    url('pillgothic.woff') format('woff'),
    url('pillgothic.ttf') format('truetype'),
    url('pillgothic.svg#svgwpf') format('svg');
    }
    
    h1, h2, h3, h4, h5, h6 {
    font-family: 'Politica', Politica, sans-serif !important;}
    h1 {color : #245fA5; font-size: 36px !important}
    h2 {color : #245fA5; font-size: 28px !important}
    h3 {color : #245fA5; font-size: 26px !important}
    h4 {color : #245fA5; font-size: 24px !important}
    h5 {color : #245fA5; font-size: 22px !important}
    h6 {color : #245fA5; font-size: 20px !important}
    
    /* couleur textes */
    body, button, input, select, textarea {
        color: #245fA5;
        font-family: 'pillgothic', pillgothic, sans-serif !important;
        font-size: 15px;
    }

    Soit c’est dû à un copier/coller, soit tu utilises le logiciel BlocNote ou similaire, il faut utiliser Notepad++ pour toute modif dans le code.

    Vérifies dans le code pour ton menu également

    Pour les couleurs du menu je regarde.

    🙂

     

    #2279223
    PhiLyon
    Modérateur
    Maître WordPress
    27947 contributions

    Pour ton menu

    /* couleur/police titres menu */
    .navigation-top {
    font-family: 'Politica', Politica, sans-serif;
    	color : #ffffff !important;
    	font-size:15px;
    	background-color : #245fA5 !important;
    }
    
    .navigation-top .current-menu-item > a, .navigation-top .current_page_item > a {
        color: #245fa5 !important;
    }
    .sub-menu {
    font-family: 'Politica', Politica, sans-serif;
    	color : #245fA5 !important;
    	font-size:15px;
    	background-color : #ffffff !important;}
    
    .navigation-top a {
        color: #ffffff;
        font-weight: 600;
        -webkit-transition: color 0.2s;
        transition: color 0.2s;
    }
    
    .main-navigation li li a {
        color: #245fA5;
    }

    J’ai un peu l’impression de faire ton job sur le coup, c’est ton site ou pour un client ?

    🙂

    #2279230
    CoinCoin
    Participant
    Chevalier WordPress
    116 contributions

    C’est mon site à moi, je suis un peu novice sur tout ça… Je me forme sur le tas mais y’a des trucs qui me dépassent vraiment… Merci mille fois.

    Donc après application de tout ça :

    • les polices ont changé, même sur safari ! 😀
    • les couleurs du menu c’est cool aussi mais il reste qqs petits soucis :
      • Quand on est sur une page du menu principal, le titre dans le menu passe au bleu donc on le voit plus sur le fonds bleu (RAS en revanche si on est dans le sous-menu)…
      • L’allumage est aussi resté en gris…
        Je viens de regarder avec l’inspecteur mais je sèche vraiment 🙁
    • les couleurs des liens qui étaient de la même couleur que le menu (donc blancs) sont redevenus noirs et pas bleus, y’a un truc qui a du prioriser je pense ? Idem, j’ai regardé avec l’inspecteur mais je bloque… 🙁

     

    Désolée de t’embêter avec tout ça, si c’est trop compliqué tant pis, même si j’aime bien le menu bleu, je peux toujours revenir au menu tout blanc, le reste fonctionnait bien 😉

    #2279388
    PhiLyon
    Modérateur
    Maître WordPress
    27947 contributions

    Bonjour.

    J’ai fait différents essais essaies ce code et fais le tri

    h1, h2, h3, h4, h5, h6 {
    font-family: ‘Politica’, Politica, sans-serif !important;}
    h1 {color : #245fA5; font-size: 36px !important}
    h2 {color : #245fA5; font-size: 28px !important}
    h3 {color : #245fA5; font-size: 26px !important}
    h4 {color : #245fA5; font-size: 24px !important}
    h5 {color : #245fA5; font-size: 22px !important}
    h6 {color : #245fA5; font-size: 20px !important}
    
    body {font-family: "Pill Gothic Regular", Pill Gothic Regular, sans-serif !important;}
    body {font-size: 14px !important}
    
    .site-footer {
    background-color: #245fA5 !important;
    }
    
    .entry-content a {color : #245fA5; font-size: 24px !important}
    
    /* couleur/police titres menu */
    .navigation-top {
    font-family: 'Politica', Politica, sans-serif;
    	color : #ffffff !important;
    	font-size:15px;
    	background-color : #245fA5 !important;
    }
    
    .navigation-top .current-menu-item > a, .navigation-top .current_page_item > a {
        color: #245fa5 !important;
    }
    .sub-menu {
    font-family: 'Politica', Politica, sans-serif;
    	color : #245fA5 !important;
    	font-size:15px;
    	background-color : #ffffff !important;}
    
    .navigation-top a {
        color: #ffffff;
        font-weight: 600;
        -webkit-transition: color 0.2s;
        transition: color 0.2s;
    }
    
    .main-navigation li li a {
        color: #245fA5;
    }
    
    .navigation-top .current-menu-item > a, .navigation-top .current_page_item > a {
        color: #ffa800 !important;
    }
    
    .main-navigation a:hover {
    	color: #000;
    background: #ffa800}
    
    .entry-title a {
        color: #245fA5;
        text-decoration: none;
        margin-left: -2px;
    }

    🙂

15 sujets de 16 à 30 (sur un total de 36)
  • Vous devez être connecté pour répondre à ce sujet.