Mise en page sur un site Joomla 4.1

[Pierrot2607]

Bonsoir,

J'ai un problème de mise en page sur un site sous Joomla 4.1. (voir image ci-jointe)



Le texte touche les bords à droite et à gauche et j'aimerais laisser une marge de chaque côté (les bords gris marquent une séparation entre les modules de droite et de gauche). Le template de ce site est "Cassiopeia".

Est-ce possible de modifier cette présentation et si oui, quelqu'un pourrait-il m'indiquer le chemin à suivre?

Par avance merci et passez de bonnes fêtes.

[RobertG]

Bonjour,

Pour ne mettre de marge qu'au corps des articles, tu peux définir dans le fichier user.css du template (media/templates/site/cassiopeia/css/user.css) la valeur en em, % ou px :

.com-content-article__body {
    margin-left:2em;
    margin-right:2em;
}​

Si tu veux que ça s'applique à toute la partie article, y compris l'en-tête, ainsi qu'à l'affichage en blog, utilise à la place

.com-content-article, .blog, .blog-featured{
    margin-left:2em;
    margin-right:2em;​
}​

[jps0302]

Bonjour

Jusqu'à présent , j'utilisais ce genre de procédé :
<p style="text-align: justify; padding-left: 10px; padding-right: 10px;"> pour gérer les marges droites et gauche.

Je trouve que la méthode de RobertG est plus efficiente.

N'utilisant pas le template cassiopeia, à quel endroit puis je trouver ce fichier user.css ?

Faut-il le créer sous media/templates/site/montemplate/css/user.css ?

merci

[RobertG]

Bonjour,

En effet, ce chemin est valable pour Cassiopeia, pas forcément pour les autres templates.
Par exemple, ceux basés sur un Framework peuvent avoir leur propre zone de CSS personnalisé dans la gestion du style, et/ou utiliser un fichier externe dont le nom peut être fixé par l'auteur ou libre et précisé dans le style (cas d'Astroid par exemple).

[jps0302]

Merci pour la réponse
je vais interroger l'éditeur du template ol_liquid qui utilise le framwork Helix ...

[Pierrot2607]

Bonsoir,
Merci pour ces réponses. Je suis assez limité en informatique, donc j'y vais pas à pas. Avec Filezilla je suis bien arrivé au fichier: user.css (en pièce jointe). Où dois-je coller ce code que vous m'avez envoyé:

.com-content-article__body {
margin-left:2em;
margin-right:2em;
}

Mon fichier user.css:

.container-header nav, .container-header .navbar-brand, .brand-logo {
margin-left: auto;
margin-right: auto;
}
.card-header {
background-color:#FFDC52 !important;}

.container-header,.container-header .grid-child, div.site-grid, container-footer .grid-child {
background-color: #ACB9B5 !important;
background-image:none !important;
}
.container-component {
background-color: #fff !important;
}

Par avance, merci de vos réponses.

Bonne soirée à vous.

[RobertG]

Bonsoir,

Tu peux le coller où tu veux.

[Pierrot2607]

Magnifique !!

Encore merci pour l'aide.

Passez de bonnes fêtes

[jps0302]

Merci pour la réponse
je vais interroger l'éditeur du template ol_liquid qui utilise le framwork Helix ...

Réponse de l'éditeur :
Inserez dans le custom.css le code
.article-details p {
text-align: justify; padding-left: 10px; padding-right: 10px;
}

Et cela fonctionne ...