I have a problem : on my website http://comportementaliste-du-chat.fr/, I want to create CTA's in my posts with Gutenberg. I found a great plugin to do that, but the thing is the design is good in the back office, but in the front office the default CSS overrides (the "!important" breaks my block in gutenberg so I can't use it) the gutenberg style. See example here https://comportementaliste-du-chat.fr/blog/15-plantes-toxiques-pour-votre-chat-avec-photos/
If someone could help me, it would be great :) thanks a lot !!
Front office result //
Back office result
<div class="wp-block-media-text__content">
<h2 class="has-text-color" id="et-si-on-prenait-un-moment-pour-discuter-de-ce-qui-vous-tracasse" style="color:#ffffff">Et si on prenait un moment pour discuter de ce qui vous tracasse ?</h2>
<p class="has-text-color" style="color:#d7d7d7">Si vous êtes en train de lire cet article, c'est que <strong>quelque chose vous chiffonne, ou vous intrigue</strong>. Savez-vous que les consultations sont là pour <strong>résoudre un problème, mais aussi le prévenir</strong> ? Je peux vous aider à anticiper un événement ou à <strong>solutionner un comportement indésirable</strong>. Alors n'hésitez-pas, <strong>venez m'en parler !</strong></p>
<div class="wp-container-1 wp-block-buttons">
<div class="wp-block-button"><a class="wp-block-button__link has-white-color has-text-color has-background" style="background-color:#54bcfb">Discutons ensemble !</a></div>
</div>
Related
In some poems, often in theater-like writing, the end of an incomplete verse must be aligned to the begin of the continuing, like that:
The verse that is split is vertically aligned as if it weren't split.
I'm creating an ebook, and I need a trick to make the CSS consistent for any font, size, etc. (because they are tweakable) without relying on monospace.
Is this possible at all? I've thought about it, but I've had no idea, not even a lead.
For now, the HTML looks like that:
<div class="character">La Nourrice</div>
<p>Tu vis ! ou vois-je ici l’ombre d’une princesse ?
<br/>À mes lèvres tes doigts et leurs bagues et cesse
<br/>De marcher dans un âge ignoré...</p>
<div class="character">Hérodiade</div>
<p>Reculez.
<br/>Le blond torrent de mes cheveux immaculés
<br/>Quand il baigne mon corps solitaire le glace</p>
Within pre tag text will be displayed exactly as written by you
<div>
<pre style="font-family: sans-serif;">
La Nourrice
Tu vis ! ou vois-je ici l’ombre d’une princesse ?
À mes lèvres tes doigts et leurs bagues et cesse
De marcher dans un âge ignoré...
Hérodiade
Reculez.
Le blond torrent de mes cheveux immaculés
Quand il baigne mon corps solitaire le glace
</pre>
</div>
The only way I managed to do something similar is using direction: rtl; and a fixed width. In this case your main problem is that there's currently no way to force justify elements in CSS something that would be useful for this. Also, <br> tags break text-align: justify so in the case of the unfinished line I left the <br> but for the others I left it out. Even so, it looks a little weird.
There's a ::first-line CSS property, but unfortunately it can't use text-align.
There's also text-justify but it's not confirmed as a supported property yet, so it's not working. It could solve your problem if it becomes official though. You can check more on it on MDN Docs.
I'd suggest you revise your html structure if you can and have control over that part. Otherwise you don't have many options on this.
p {
max-width: 320px;
display: block;
text-align: justify;
direction: rtl;
}
<div class="character">La Nourrice</div>
<p>Tu vis ! ou vois-je ici l’ombre d’une princesse ?
<br/>À mes lèvres tes doigts et leurs bagues et cesse
<br/>De marcher dans un âge ignoré...</p>
<div class="character">Hérodiade</div>
<p>Reculez.<br> Le blond torrent de mes cheveux immaculés Quand il baigne mon corps solitaire le glace</p>
I have an issue with iframe and column-count.
I have a two column-count div and the iframe youtube only works in the first column on Chrome. It works fine on Safari :
Chrome
Safari
I have found few posts about that but answers doesn't work for me.
This is the HTML code :
<div class="container-job column-2">
<h2>Enseignement côte-à-côte</h2>
<p>Au lycée, l'enseignement se fait en "face à face" - un prof vous livre des connaissances que vous devez acquérir en vue d'une évaluation.</p>
<img class="alignnone wp-image-11512 size-full" src="https://ynov-bordeaux.com/wp-content/uploads/2020/04/cours-cote-a-cote-informatique.jpg" />
<p>Lors de votre première année, vous découvrirez l'enseignement côte à côte. Concrètement, cela signifie que l'enseignant ou l'intervenant se place à côté de vous pour suivre votre progression. Cela implique un suivi personnalisé et la prise en compte du niveau de chacun. Chaque enseignant Ynov est un professionnel de son secteur. Leur expertise est reconnue et cela en fait un point fort de nos formations. Ainsi, vous n'apprenez pas seul face à votre ordinateur mais bien en présence d'un expert qui vous aidera à saisir les concepts et réussir toutes les étapes de votre apprentissage !</p>
<h2>Enseignement par projets</h2>
<p><strong>L'enseignement par projet est en place depuis très longtemps</strong> au sein des Campus Ynov. C'est prouvé par de nombreuses études : apprendre en faisant est le meilleur moyen de fixer les savoirs durablement. Vous le savez d'expérience, si vous avez appris une technique simplement en regardant un cours ou en lisant un livre, il est très difficile de se souvenir des informations. En revanche si vous avez fait, une recette de cuisine par exemple, il est bien plus facile de refaire et vous avez enregistré la plupart des étapes de votre projet. En informatique, c'est la même chose !</p>
<p>Notre programme pédagogique nouvelle formule comprend une grande partie dédiée au développement informatique. Cependant, l'infrastructure et réseau occupe aussi une place de choix afin de former les futurs experts en infrastructure qui sont essentiels au fonctionnement d'un réseau informatique.</p>
<h3 class="wp-block-embed__wrapper">L'Intelligence Artificielle au cœur de nos enseignements</h3>
<p>De plus, nous mettons en place des conférences et ateliers nationaux accessible à tous les étudiants. En visio conférence ou en direct, plusieurs experts se succéderont pour présenter des concepts innovants en matière d'Intelligence Artificielle, de Sécurité Informatique ou de Développement et Stratégie.</p>
<p><iframe width="500" height="300" src="https://www.youtube.com/embed/b2u-Bk3mXw8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<h2>Les Ydays pour réaliser vos projets</h2>
<p>Enfin, nous retrouvons cette année encore la formule Ydays qui a fait ses preuves ! Avec 160 heures consacrées à vos projets et vos besoins d'évolution ou de perfectionnement, vous aurez le choix de créer et d'expérimenter sur les sujets qui vous passionnent !</p>
<h2>Une phase d'intégration pour souder le groupe et maîtriser la plateforme</h2>
<p>Pour introduire ces nouveautés après plusieurs années dans le système scolaire classique, il est évident qu'il faut passer par une phase d'adaptation. Celle-ci commence souvent dès votre inscription en prenant en main votre adresse email, et en devenant autonome par rapport aux informations qui vous sont transmises. Vous êtes invité régulièrement à participer à votre future vie étudiante.</p>
<p>Dès la rentrée, <strong>vous serez accompagné dans cette grande transformation</strong>. Personne n'est laissé à lui-même dans un premier temps. L'intégration dure 4 semaines. Cette phase est intensive tant en terme d'acquisitions techniques et de mises à niveau que d'activités d'inclusion au groupe d'étudiant.</p>
<p><iframe width="500" height="300" src="https://www.youtube.com/embed/XLn0TSo_mrU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<blockquote>Plutôt qu'une immersion en mode piscine, nous voyons cette période comme une piste de décollage vers votre autonomie et votre future vie professionnelle.</blockquote>
<h2>Organisation en demi-journée</h2>
<p>Sur le Campus Ynov, les journées de cours ne dépassent pas 6 heures. Cette organisation en demi-journée vous donne plus de liberté pour tout le reste. Vous avez du temps pour développer vos propres projets ou améliorer vos acquis.</p>
<h2>Des évaluations croisées</h2>
<p>Les évaluations ne sont pas conçues comme des pièges mais bien comme <strong>une mesure fiable de notre efficacité combinée</strong>. Si un étudiant n'a pas le niveau prévu, nous revoyons sa méthode, si toute la classe n'a pas réussi, nous revoyons notre méthode. C'est pour cela que nous utilisons aussi des évaluations croisées. Nous évaluons chaque étudiant mais ce n'est pas la seule vision qui compte. Les étudiants évaluent - selon les situations - leurs pairs ainsi que leurs enseignants. Les enseignants évaluent les étudiants mais aussi le fonctionnement du groupe : ici, pas question de voler solo ! On travaille en équipe et tout le groupe progresse ensemble.</p>
<p>Cette vision de l'enseignement en école informatique diffère de ce que l'on peut constater dans certains systèmes. On trouve en effet sur le marché de la formation privée des établissements très exigeants mais qui laissent beaucoup de jeunes sur le côté. Au sein d'Ynov, nous pensons au contraire que l'on peut allier l'excellence et la solidarité, la performance et le travail en équipe ; tout en restant à la pointe des nouvelles technologies.</p>
<p>Si cette vision vous parle, n'hésitez pas à nous contacter, il reste peut-être quelques places pour la prochaine rentrée !</p>
</div>
And this is the CSS code :
.container-job {
max-width: 1440px;
margin-left: auto;
margin-right: auto;
}
.column-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.container-job img {
max-width: 100%;
height: auto;
}
iframe {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
The CodePen if you want : https://codepen.io/mathildebaudino/pen/rNOvXow
Thank you in advance for your help !
I have two patterns in html page the only difference between them is an existance of aditional text after the closed strong tag. Here is an example:
Sample 1 (with additional text after the tag strong):
<p><strong>14h45 De violents combats ont lieu à Zawiyah</strong>, à 40km à l'Ouest de Tripoli entre les insurgés et les forces restées fidèles au colonel Kadhafi. Un témoin oculaire, cité par l'agence de presse italienne Ansa, affirme: "C'est un massacre, il est difficile d'estimer le nombre de morts". Il y aurait une centaine de victimes, selon la BBC. </p>
Sample 2 (without additional text):
<p><strong>Quitte à revenir dans l'euro quelques années plus tard?</strong> </p>
I need two XPath so I can get text inside tags '<strong>...</strong>' for both cases.
Right now I m using
'//p//strong//text()[normalize-space()]'
but it captures text from both samples while I need two separate XPaths.
Any help is appreciated.
UPD
Also is there a way to handle cases when
<p>
<a href="http://www.slate.com/id/2286172/" target="_blank">
<strong>Combien coûte un mercenaire?</strong>
</a>
Alors que le régime de Kadhafi semble avoir recours à des combattants étrangers pour réprimer les insurgés, Slate se penche sur leur fonctionnement... et leur émoluement (en anglais).
</p>
The XPath
"//p//strong[not(following-sibling::text()[normalize-space()])]//text()"
will return:
Combien coûte un mercenaire?
However there is a text after the tag
You can use following-sibling::text()[normalize-space()] in predicate for strong to get only strong elements that is followed by non-empty text nodes :
//p/strong[following-sibling::text()[normalize-space()]]/text()
and use the opposite predicate not(following-sibling::text()[normalize-space()]) to get the rest of the strong elements :
//p/strong[not(following-sibling::text()[normalize-space()])]/text()
Notes: the above will work assuming that is considered a white-space in the XPath library that you're using. Otherwise, you might need to compare the length of the text node following the strong element with the length of the text , to determine if the text node is more than just a white space ( ), something like :
following-sibling::text()[string-length(normalize-space())>string-length(' ')]
I have html with the next structure (see below) and need to get all texts between <p></p> and <h3></h3> or <h2></h2> which are on the same level in html structure.
Here is an example:
<p>..</p>
<p>..</p>
..
<p>"<em>Ce que nous voulons souligner, c'est que la Tunisie est sur la bonne voie</em>", a déclaré Mona Richmaoui, membre de la mission. </p>
<h3 class="intertitre title_delta">SANCTIONNER LES VIOLATIONS DES DROITS DE L'HOMME</h3>
<p>Le ministère tunisien de l'Intérieur a engagé lundi une procédure visant à la dissolution... </p>
..
<p>..</p>
<div>...some text over there ....</div>
..
<h2>some text</h2>
..
<p>..</p>
The output should be:
"Ce que nous voulons souligner, c'est que la Tunisie est sur la bonne voie", a déclaré Mona Richmaoui, membre de la mission.
SANCTIONNER LES VIOLATIONS DES DROITS DE L'HOMME
Le ministère tunisien de l'Intérieur a engagé lundi une procédure visant à la dissolution...
..
some text
I m using the next XPath but it ignores text between <h3></h3> tags:
//p//text()[normalize-space()]
If you are trying to get the text of all the elements:
//*//text()
If you want to specify elements:
//p//text()|//h3//text()|div//text()
I'm using twitter bootstrap (not sure if that's the issue but it might be worth mentioning) and wordpress. This is a custom page and I wrote it entirely using the html editor (nothing was done with the wysiwyg editor)
I want to do a clickable thumbnail that is followed by a caption
<li class="span4">
<a class="thumbnail text-center" href="#">
<center><img alt="" src="[acf field='thumb1']" /></center>
<h3>Mobilier de Bureau</h3>
</a>
Nous avons un vaste choix de mobilier de bureau pour tous types de besoins. Notre premier objectif: fournir un mobilier de bureau de qualité, assorti d'un service après-vente personnalisé. Les meubles montrés sur notre site ne sont qu'une infime partie de ce que nous pouvons vous proposer. N'hésitez pas à nous contacter. S'il vous faut un mobilier, nous l'avons.
</li>
But when I go to my page, I get a strange unwanted anchor tag that comes from nowhere:
<li class="span4">
<a class="thumbnail text-center" href="#">
<center>
<img alt="" src="http://www.jeango.net/burama/assets/mobilier.png"/>
</center>
<p/>
<h3>Mobilier de Bureau</h3>
</a>
<p>
<a class="thumbnail text-center" href="#"/> <------------ Unwanted anchor
<br/>
Nous avons un vaste choix de mobilier de bureau pour tous types de besoins. Notre premier objectif: fournir un mobilier de bureau de qualité, assorti d’un service après-vente personnalisé. Les meubles montrés sur notre site ne sont qu’une infime partie de ce que nous pouvons vous proposer. N’hésitez pas à nous contacter. S’il vous faut un mobilier, nous l’avons.
</p>
</li>