- WordPress :5.2
- Statut : résolu
- Ce sujet contient 22 réponses, 4 participants et a été mis à jour pour la dernière fois par chvxrouge@gmail.com, le il y a 4 années et 10 mois.
-
AuteurMessages
-
7 janvier 2020 à 19 h 31 min #2292251
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;}7 janvier 2020 à 22 h 28 min #2292273bonsoir,
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,
7 janvier 2020 à 23 h 59 min #2292280Pour 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.
8 janvier 2020 à 23 h 31 min #2292451Merci 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
9 janvier 2020 à 0 h 42 min #2292452Bonjour,
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.
9 janvier 2020 à 10 h 49 min #2292485Merci, 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
9 janvier 2020 à 11 h 37 min #2292499Bonjour
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.
9 janvier 2020 à 11 h 53 min #2292504ok merci beaucoup pour votre aide!!!!
-
AuteurMessages
- Vous devez être connecté pour répondre à ce sujet.