[RÉGLÉ] Présenter un article sur deux colonnes

[THIEBEN]

Bonjour à toutes et tous,
Je souhaiterais présenter certains articles en deux colonnes style journal presse écrite. J'utilise Joomla 3.9.25 avec le template ja purity III et JCE 2.8.15. J'ai vu des bouts de code anciens qui permettaient de le réaliser, mais je ne sais pas trop comment faire. Si quelqu'un à une idée un conseil je suis preneur. Merci

[Helloo]

Bonjour,

Avec la version pro 2.9.4 de JCE c’est possible :

https://www.joomlacontenteditor.net/purchase

Voir un peu plus bas sous « Columns » Flexbox

[THIEBEN]

Merci Helloo, avec JCE Pro ok, mais sans JCE Pro il n'existe rien d'autre style une extension ou bien du code facile à mettre en place. Je continue mes recherches merci.

[Helloo]

... il n'existe rien d'autre style une extension...

JCE Pro EST une extension.

[lomart]

Bonsoir,

Une petite règle CSS fera l'affaire

selecteur_bloc {
column-count: 2;
column-gap: 20px;
}

il faut remplacer selecteur_bloc par le bon sélecteur

[THIEBEN]

Merci lomart pour ton code, en revanche je ne sais pas comment l'utiliser. Ja purity utilise plusieurs fichiers css et je patauge un peu n'étant pas un grand spécialiste. Je pense que quelques conseils supplémentaires me permettraient d"y voir plus clair. J'ai fait des recherches, j'avais trouver un vieux topic pour la version 2.5 de joomla, mais les colonnes apparaissaient seulement en back end. voir ICI

[lomart]

Il faut ajouter ce code au fichier css/custom.css de ja purity

.deux-cols { column-count: 2; column-gap: 20px; }

Puis attribuer la class deux-cols au bloc qui contiendra le texte

Une autre solution plus simple est d'utiliser UP. Il suffit d'entourer le texte avec ce shortcode

{up html=div | style=column-count: 2; column-gap: 20px;}
le texte. bla bla ....
{/up html}

Voir le lien pour télécharger UP dans ma signature

Si le texte est lisible sur smartphone, il faudra prévoir un affichage sur une seule colonne pour les petits écrans. Ce peut-être fait avec ceci

{up div=deux-cols | css-head=.deux-cols[column-count: 2; column-gap: 20px;]@media(max-width:480px)[.deux-cols[column-count: 1]]}
le texte. bla bla ....
{/up div}

[Helloo]

Hey super ! Je ne connaissais pas, merci lomart , je n’avais jamais fait attention à votre signature, merci pour votre travail

[THIEBEN]

Bonjour Lomart et merci pour ton UP. J'ai fait un essai sur un article mais il apparaît en front end dans une iframe et le texte est sur une seule ligne. voir image

[lomart]

Bonsoir,
C'est pas normal. J'ai testé avant de mettre le code.
Un lien vers le problème ?

[THIEBEN]

lomart merci, tu veux quoi comme lien vers le problème? Ne serait ce pas du au T3 Framework avec ja purity III?

[lomart]

un lien vers l'article pour voir l'erreur en situation. même en Message Privé

[lomart]

Bonjour Thieben

Pourquoi avoir inclus mon shortcode dans une balise PRE. Cela l'inactive. Voici le résultat :

<pre class="bbcode_code">
<div id="up-178-1" style="column-count: 2;column-gap: 20px">
<p>Lorem ipsum dolor sit amet, ...</p>
</div>
</pre>

[THIEBEN]

Bonjour Lomart, effectivement je n'avais pas vu le PRE comme s'il s'était mis automatiquement au moment où j'ai collé le code up. Maintenant en enlevant la balise j'ai bien mon article avec le texte en deux colonnes. Un grand merci pour tes supers conseils