[Résolu] Personnalisation légende sous photos (Créer un compte)

  • WordPress :5.2
  • Statut : résolu
8 sujets de 16 à 23 (sur un total de 23)
  • Auteur
    Messages
  • #2292251
    ferman
    Modérateur
    Maître WordPress
    7189 contributions

    Bonjour,

    Je voulais utiliser le contenu embarqué mais tout ce qui est .wp-embed (le contenu embarqué ) ne “réagit” pas au modifications css…

    Je le craignais et c’est ce que je vous disais dans la réponse précédente. Depuis j’ai vérifié: en fait il n’est pas possible de modifier simplement les CSS de quelque chose « d’embedded » et c’est normal . Regardez ici. On peut par contre modifier par exemple la taille de l’image lors de l’importation du iframe  directement dans le html à l’intérieur de <iframe> (essayé avec you-tube).

    Sur votre site tel qu’il est actuellement, on peut modifier beaucoup  choses  en passant par les id. Par ex pour l’image: ‘le canyon des moules marinières’  (#attachment_5804).  Le mieux est de dire plus précisément ce que vous voulez faire  à partir de ce que vous avez actuellement pour que l’on puisse regarder si c’est possible et vous donner des codes « adaptables » si ça l’es.

    Vous pouvez actuellement modifier la taille de la police dans vos légendes et modifier sélectivement celle des mots à mettre en valeur en appliquant des css aux balises . Par exemple:

    #attachment_5804 strong{font-size:20px;}
    #attachment_5804 {font-size:10px;}

     

     

    #2292273
    chvxrouge@gmail.com
    Participant
    Initié WordPress
    49 contributions

    bonsoir,

    Pour mes vignettes à cliquer, je pense que je vais opter pour des « blocs images » mis dans des colonnes comme dans cette page exemple: https://vertige-evasion.com/essaie-vignettes-images/

    Quoi mettre et où pour changer la police et la taille par exemple de « canyon du versoud »,  « canyon du furon », « canyon des ecouges bas » dans les blocs images? Je ne suis pas très fort en codage (je bidouille et je mets 100ans à faire un truc…).

    Merci pour votre aide,

    #2292280
    ferman
    Modérateur
    Maître WordPress
    7189 contributions

    Pour mes vignettes à cliquer, je pense que je vais opter pour des “blocs images”

    Je crois que c’est le meilleur choix. Je vous mets un cocktail de css pour les légendes  pour que vous voyiez à quoi ça correspond. Essayez,  changez les valeurs et les couleurs comme vous voulez. Regardez là pour les css possibles: font, text, Et ensuite, si besoin est, demandez ce qui vous manque.

    .wp-block-columns{width:100%;
    margin-left:auto;
    margin-right:auto;}

    figcaption{color:red;
    background-color:green;
    font-style:italic;
    font-size:15px}

    figcaption span.tadv-color{color:black!important;
    font-style:normal;
    font-size:20px;}

    figcaption strong{color:white;}

    Remarque: dans l’image du milieu la dernière ligne n’a pas les mêmes caractéristiques que  dans les deux autres images:images 1 et 3: « span.tadv-color », image du milieu « strong ». Il faut changer ça pour que les css s’appliquent à toutes vos images.

    Vérifiez sur d’autres tailles d’écrans que PC; ça doit aller également.

     

    #2292451
    chvxrouge@gmail.com
    Participant
    Initié WordPress
    49 contributions

    @ferman

    Merci beaucoup pour votre aide, les codes css que vous m’avez donné me permettent de faire à peu près ce que je voudrais (on s’en rapproche!).

    Je vous mets ici la page vignettes: https://vertige-evasion.com/essaie-vignettes-images/

    comment faire pour donner des propriétés css différentes aux différentes lignes (est-ce que c’est possible)?

    exemple:

    ligne 1 « Canyon du versoud »

    ligne 2 « description »

    ligne 3 « 1/2 journée »

    ligne 4 « tarif »

    ligne 5 « Canyon complet »

    la solution que j’ai pour le moment trouvé c’est de leur mettre dans le bloc image des propriétés « basic » différente Ligne1 une couleur; ligne3-4 en gras et ligne 5 en italic ce qui me permet ensuite de les différencier dans le css (ligne 1:figcaption span.tadv-color; ligne 3-4: strong; ligne 5:em) et leur donner les propriété que je veux. Mais je ne peux pas leur enlever leur propriétés qui me permet de les différencier (ex ligne: italique)…

    il y a t’il une solution à ça?

     

    merci beaucoup

    #2292452
    ferman
    Modérateur
    Maître WordPress
    7189 contributions

    Bonjour,

    Il est possible de différencier les lignes 1,2,3+4,et 5. pas les lignes 3 et 4. Pour cela il faudrait mettre des balises et pour chaque ligne 3 et 4. Dans ce cas, vous pourrez ajouter la ligne séparée du code ci-dessous qui s’appliquera à la ligne 4.

    figcaption{color:red;}
    figcaption span.tadv-color{color:blue!important;}
    figcaption strong {color:green;}
    figcaption em {color:yellow;}


    figcaption strong:nth-of-type(3){color:purple;}

    • Cette réponse a été modifiée le il y a 4 années et 10 mois par ferman.
    #2292485
    chvxrouge@gmail.com
    Participant
    Initié WordPress
    49 contributions

    @ferman,

    Merci, je pense que c’est bon.

    J’ai garder les modifications dans le bloc image des propriétés “basic” des différentes lignes Ligne1 une couleur; ligne3-4 en gras et ligne 5 en italic ce qui me permet ensuite de les différencier dans le css (ligne 1:figcaption span.tadv-color; ligne 3-4: figcaption strong; ligne 5:figcaption em) et leur donner les propriétés que je veux. Et j’ai contrecarré cette propriété de base avec une modification dans le css additionnel.

    exemple: Ligne 1 était en italic et pour l’enlevé j’ai ajouté dans le css

    figcaption em {font-size:22px;
    font-family:Arial;
    color:#baba12;
    font-style:normal;}  pour que la ligne 5 ne soit plus en italic.

    la ligne 2 n’était pas en italic et j’ai mis figcaption strong {font-style: italic;} pour qu’elle soit en italic

    Est-ce que c’est une méthode valide qui ne risque pas de poser problème par la suite?

     

    merci

    #2292499
    ferman
    Modérateur
    Maître WordPress
    7189 contributions

    Bonjour

    Est-ce que c’est une méthode valide qui ne risque pas de poser problème par la suite?

    Non, c’est une méthode correcte. Par contre, je crois que vous n’avez pas  de thème enfant; il faudrait penser à en faire un. C’est très facile avec « child theme  configurator » et plus pratique que les css additionnelles dès qu’on commence à avoir pas mal de css additionnelles. Cela permet également d’autres types de modifications (fonctions php ou js) dont vous ne vous servez pas encore mais ça peut venir.

    #2292504
    chvxrouge@gmail.com
    Participant
    Initié WordPress
    49 contributions

    ok merci beaucoup pour votre aide!!!!

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