[Résolu] Changer la couleur d’un seul mot (Créer un compte)

  • Statut : non résolu
15 sujets de 1 à 15 (sur un total de 15)
  • Auteur
    Messages
  • #524785
    Lyser
    Participant
    Chevalier WordPress
    122 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : Version 3.5.1
    – Version de PHP/MySQL : 5.2.17
    – Thème utilisé : Canvas
    – Extensions en place :
    – Nom de l’hebergeur : 1 and 1
    – Adresse du site : http://www.pizzafirst.fr/monwp/

    Problème(s) rencontré(s) :
    Salut, j’aimerais changer la couleur des mots « crème fraiche » dans le titre de page, le menu déroulant (en passant la souris sur « la carte » en haut) et dans le menu widget sur la droite
    Comment faire sans changer la couleur des blocs entiers et des autres pages ?

    #895684
    Flobogo
    Modérateur
    Maître WordPress
    20688 contributions

    Si vous naviguez sous Firefox ou Chrome, installez l’extenion « Firebug » dans votre navigateur.
    Ensuite, quand vous serez sur votre page côté front-end, vous pourrez faire un clic droit et « inspecter l’élément avec Firebug » : vous verrez alors en bas à droite de votre écran quel est le style CSS appliqué à votre élément « titre » et vous pourrez tester la modification.
    Quand vous aurez trouvé le bon réglage, il faudra le modifier dans le fichier style.css de votre thème

    Attention, ne pas oublier de faire un thème-enfant si ce n’est pas encore fait.

    #895685
    Lyser
    Participant
    Chevalier WordPress
    122 contributions

    En cliquant sur l’élément qui m’interesse avec firebug (c’est à dire « base crème fraiche » dans la carte) je tombe sur un css qui me change la couleur de TOUS les titres, comment changer de couleur les mots « crème fraiche » (pas le mot base).
    Il faut créer un autre css particulier pour ce mot ?

    #895686
    Theme wordpress francais
    Membre
    Maître WordPress
    687 contributions

    Bonjour,
    exemple :

    base crèmes fraîche

    (tu ajoutes autour de tes mots)
    et pour le css : h1 span {color:#f90}

    #895687
    Lyser
    Participant
    Chevalier WordPress
    122 contributions

    ok, merci Theme wordpress francais mais où se trouve la page à modifier à gauche de firebug, c’est bien un doc html, non ?
    J’ai cherché .html dans le thème mais rien…

    #895688
    Theme wordpress francais
    Membre
    Maître WordPress
    687 contributions

    style.css a la base de ton theme. La class que je t’ai donné est a ajouter , elle ne doit pas exister je pense
    Tu l’ajoutes a la fin de fichier style.css

    #895689
    Lyser
    Participant
    Chevalier WordPress
    122 contributions

    oui le

    h1 span {color:#f90}

    se met dans le fichier css
    mais le

    <h1>base <span>crèmes fraîche</span></h1>

    se met ou lui ?
    J’aurais peut-être du préciser que j’étais un noob mais cela n’échappe à personne maintenant je crois 🙂

    #895690
    devin plombier
    Participant
    Chevalier WordPress
    214 contributions

    le span est une balise générique, on ne la définit pas dans le CSS, il faut mettre un autre nom.
    On peut mettre directement:

    crème fraiche.
    « xxxxxx » est ta couleur codée en RVB.
    Ça marchera dans la page, titres ou paragraphes, mais pour les menus déroulant, je ne sais pas.

    Sinon on peut aussi essayer en rajoutant « ! important » après la couleur si ça ne passe pas.

    #895691
    Lyser
    Participant
    Chevalier WordPress
    122 contributions

    Je crois que je n’arrive pas à me faire comprendre (ou alors c’est moi qui comprends rien).
    Je sais que je dois placer « h1 span {color:#f90} » dans le fichier css
    Je voudrais juste savoir quel fichier je dois ouvrir pour y placer le code suivant :

    base crèmes fraîche

    #895692
    Theme wordpress francais
    Membre
    Maître WordPress
    687 contributions

    @devin plombier http://www.w3schools.com/tags/tag_span.asp dans Tips and Notes:
    « you can style it with CSS  » pour moi ça veut dire qu’on peut soit avec <style, soit avec class="" soit comme je l'ai fait, a voir.

    pour ajouter le span , tu l’ajoutes dans le titre de ton article, dans ta page, pour le menu je viens d’essayer je ne trouve pas sans javascript.

    #895693
    devin plombier
    Participant
    Chevalier WordPress
    214 contributions
    Theme wordpress francais wrote:
    @devin plombier http://www.w3schools.com/tags/tag_span.asp dans Tips and Notes:
    « you can style it with CSS  » pour moi ça veut dire qu’on peut soit avec <style, soit avec class="" soit comme je l'ai fait, a voir.

    pour ajouter le span , tu l’ajoutes dans le titre de ton article, dans ta page, pour le menu je viens d’essayer je ne trouve pas sans javascript.

    Je crois qu’on est d’accord sans le savoir. J’ai dû mal m’expliquer.

    J’ai vu le code proposé par Lyser

    Lyser wrote:
    Je sais que je dois placer « h1 span {color:#f90} » dans le fichier css

    J’ai dit: on ne met pas le dans le CSS, c’est une balise inline générique.
    le encadre directement le(s) mots à modifier dans le HTML, sous la forme :

    devin plombier wrote:
    crème fraiche.

    Si maintenant tu déclares « h1 span » dans le CSS, tous les de tes

    seront de la même couleur sur toutes les pages du site.
    Si tu ne les déclares pas, tu peux, en fonction du titre mettre:

    pizza aux anchois

    poivronsfarcis aux crevettes

    et ainsi de suite…

    #895694
    Flobogo
    Modérateur
    Maître WordPress
    20688 contributions

    Je ne voudrais pas interférer, mais j’ai l’impression que les solutions que vous proposez sont valables pour un texte écrit en mode HTML (modifier la couleur de 2 mots à l’intérieur du texte, oui, ça se fait avec la balise span), mais ça ne va pas aller pour un titre.

    Or, « base crème fraîche », c’est un titre de page, il me semble que Lyser devrait modifier le CSS de ses titres.

    @ Lyser :
    En fait « base crème fraîche », c’est le titre d’une page qui est une sous-sous-page de « la carte »
    Donc, déjà, vous serez obligé de changer la couleur des 3 mots (base crème fraîche) d’un seul coup, car avoir un titre en 2 couleurs, ça me paraît complexe.

    Il faudrait donc simplement modifier le CSS de page-title, par exemple :

    .page-title, .post .title, .page .title {
    color: #F90;
    font: bold 26px « calibri »,Helvetica,Arial sans-serif;
    margin: 8px 0 0 19px;
    position: absolute;
    text-shadow: 1px 1px 0 #404040;
    }

    (j’ai simplement mis F90 au lieu de FFFFFF pour le blanc)

    Cela n’entraîne pas d’autres changements dans votre page.
    Mais ça, c’est pour le titre de page !

    Sinon, vous avez aussi « base crème fraîche » dans votre sidebar (colonne à droite), mais là, je ne comprends pas si vous voulez changer la couleur uniquement de ce titre (donc, celui de la page courante) ou l’ensemble de vos titres dans la sidebar ? Car évidemment, ce n’est pas la même « class » qui s’applique.

    Il faut fouiller dans l’ensemble de votre fichier style.css, voir à quel endroit il y a des h1 et trouver celui dont il faut modifier la couleur.
    –> Voir du côté de

    class= »menu-item menu-item-type-post_type menu-item-object-page menu-item-211″

    ou encore

    .widget ul li a {
    line-height: 22px;
    padding: 0;
    text-decoration: none;
    }
    a:link, a:visited {
    color: #C20000;
    }
    a:link, a:visited {
    color: #1982D1;
    text-decoration: none;
    }

    #895695
    Theme wordpress francais
    Membre
    Maître WordPress
    687 contributions

    Si on parle bien de la page http://www.pizzafirst.fr/monwp/?page_id=205 , tu devrais pouvoir mettre des balises « span » dans le titre de cette page, qui a l’affichage deviendra :

    <h1 class="title">Base <span>crème fraiche</span></h1>

    ou

    <h1 class="title">Base <span class="ma_class">crème fraiche</span></h1>

    ou

    <h1 class="title">Base <span style="color:#f90">crème fraiche</span></h1>

    selon le code que tu veux, tu as le choix 😉

    Après pour le css:

    cas 1 : h1 span{color:#f90}
    cas 2 : .ma_class {color:#f90} ou span.ma_class {color:#f90}
    cas 3 : pas besoin

    Je ne pense pas pouvoir être plus clair


    @Flobogo
    , j’avais un test avant de répondre, si le thème ne retire pas l’html dans le titre ça fonctionne.

    Au pire , tu peux tricher avec des images … genre: base en image et crème fraîche en texte, ça fera plus de css, mais c’est possible.

    #895696
    Lyser
    Participant
    Chevalier WordPress
    122 contributions

    Merci Theme wordpress francais et devin plombier c’est bon c’est compris ! 🙂

    Flobogo : j’ai déja essayé de changer la couleur de page title mais ça change les couleurs de toutes les pages. En fait Il suffit juste de faire pareil que pour les widgets, avec ce que vient d’expliquer Theme wordpress francais.

    #895697
    Flobogo
    Modérateur
    Maître WordPress
    20688 contributions

    En fait, c’est vrai, je n’ai jamais pensé à écrire le titre en HTML !! (du fait que mon thème attribue une balise automatique), mais c’est vrai que dans l’éditeur en mode HTMl, il y a la case pour le titre, donc on peut y mettre du HTML … OK, OK 🙂

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