[RÉGLÉ] marges des articles

[pjuignet]

Bonjour à tous,
j'utilise le template natif Protostar et je voudrais régler les marges, car mes lignes de texte sont trop longues ce qui rend la lecture fastidieuse.
Quelqu'un pourrait-il me dire où ce règles les marges des articles dans le template.css ?
Merci d'avance.

Site http://www.philosciences.com/Pss/

[pmleconte]

Re : marges des articles

Bonjour,

Pour calculer la largeur du contenu (vos articles), Protostar contrôle s'il y a des modules à gauche ou à droite. Si c'est le cas, il réduit la largeur des articles. Donc, essayez de mettre des modules à droite ou à gauche pour habiller votre page (position-7 et position-8).

Sinon, vous pouvez modifier le index.php dans le répertoire /templates/protostar pour forcer la largeur: le calcul de la largeur se fait à partir de la ligne 93 (valeur de $span que l'on retrouvera en ligne 182 : <main id="content" role="main" class="<?php echo $span; ?>">).

Pascal

[lefabdu51]

Re : marges des articles

plus simple :
créer un fichier user.css dans le dossier css de protostar, et ajouter ceci dedans :

.articleBody {margin: 0 5em;}

A ajuster au besoin

[pjuignet]

Re : marges des articles

merci pour vos réponses.

@pmleconte : je ne souhaite pas mettre de modules car je veux des pages simples et claires.

@lefabdu51 : j'ai créé un fichier user.css dans le dossier css avec le code indiqué cela n'a eu aucun effet malgré plusieurs essais (de 05 em à 50 em).

[pmleconte]

Re : marges des articles

Bonjour,

Quelle version Joomla utilisez-vous ?

Dans les versions récentes (depuis joomla 3.5), le template protostar charge les parties spécifiques css dans un fichier user.css.

Pascal

[pjuignet]

Re : marges des articles

Bonjour,

Quelle version Joomla utilisez-vous ?

Dans les versions récentes (depuis joomla 3.5), le template protostar charge les parties spécifiques css dans un fichier user.css.

Pascal

J'ai un fichier user.css qui fonctionne et avec lequel j'ai modifié les polices et la taille des caractères. Le code donné par lefabdu51 concernant les marges ne doit plus être le bon.

[fynhooft]

Re : marges des articles

Bonjour,

la solution à ton problème se trouve sur ce post du forum
Tu mets ce code dans ton fichier user.css et tu rajoutes, dans ton cas, le code de lefabdu51 : margin: 0 5em;

Au final, tu as :

[class^="leading-"] {
    border-bottom: 3px solid red;
    margin: 0 5rem;
}
[class^="leading-"]:last-child {
    border: none;
}

Tu peux, bien sûr, changer les couleurs ou les enlever et ne laisser que les marges.

[pjuignet]

Re : marges des articles

Bonjour fynhoof,

j'ai fait :

[class^="leading-"] {
    border-bottom: 3px solid red;
    margin: 0 5em;
}
[class^="leading-"]:last-child {
    border: none;
}
.articlebody {
  margin: 0 5em;
}

ça marche pour la page d'accueil (c'est déjà ça!), mais pour les articles, rien...

Il y peut être une classe du genre [class^="article-"] qui permettrait que ça s'applique à tous les articles ??

[pmleconte]

Re : marges des articles

Essayez articleBody et non articlebody (B majuscule).

Pascal

[pjuignet]

Re : marges des articles

oui merci j'ai essayé, mais ça ne marche pas non plus.
j'ai aussi changé la valeur, je l'ai mise en pixel, etc. , marche pas non plus.
Le code n'est pas reconnu.

[pmleconte]

Re : marges des articles

en fait articlebody est un itemprop et non une classe, donc essayez de mettre
[itemprop="articleBody"] {....<vos définitions> ...}

Pascal

[fynhooft]

Re : marges des articles

Bonjour,

Pour les articles, tu mets :

.item-page > div {
    margin: 0 5rem;}

[pjuignet]

Re : marges des articles

Merci à Pascal et fynhooft
le code: .item-page fonctionne.

àfynhooft : Mais pourquoi noter rem au lieu de em ?

[pmleconte]

Re : marges des articles

Bonjour,

Une petite suggestion: vous pourriez mettre vos articles sur 2 colonnes au lieu d'avoir des lignes aussi longues.

Au niveau css : ajoutez:

two-columns {
-webkit-column-width: 160px;
-moz-column-width: 160px;
column-width: 160px;
-webkit-column-gap: 50px;
-moz-column-gap: 50px;
column-gap: 50px;
}

.two-columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}

nobreak{
display: inline-block;
}

et dans vos articles, ajoutez <div class='two-columns"> votre article </div>

Le nobreak permet d'avoir des paragraphes qui restent sur une même colonne.

Pascal

[fynhooft]

Re : marges des articles

Bojour,

@fynhooft : Mais pourquoi noter rem au lieu de em ?

Parce que j'ai pris l'habitude d'utiliser cette unité suite à la lecture de cet article sur les rem