Beez 5 - Nombre de colonnes

[rescator]

Bonjour
Je viens vers vous pour trouver de l'aide.
J'ai installé joomla 3.3.6 en local avec le template Beez5. Je voudrais présenter la plupart des pages sous forme de blog d'articles en vedette et blog de catégories.
Le problème est que je n'arrive à avoir des pages avec plus de 4 colonnes. J'ai cherché partout à modifier les paramètres d'affichage des colonnes au niveau des articles, des liens de menu, des paramètres globaux mais sans résultat. Si on selectionne 5 colonnes ou plus, l'affichage se fait en 1 colonne avec qq articles décalés ça et là.
Quelqu'un aurait-il ici la soluce à ce problème? Un paramétrage que j'ai oublié?

Merci pour votre réponse

rescator

[Rajoz]

Re : Beez 5 - Nombre de colonnes

Bonsoir rescator,

Je suppose qu'il s'agit de Beez3 (Beez5 n'existe pas dans J! 3.3.6).

Dans le fichier CSS qui se trouve en templates/beez3/css/position.css, les largeurs des colonnes des blogs sont définies à partir de la ligne 391.

Mais elles ne sont définies que pour cols-1, cols-2 et cols-3, il n'y a pas de définition pour un plus grand nombre de colonnes. Il faudrait donc ajouter le code CSS pour 4 colonnes, 5 colonnes et ainsi de suite selon le nombre total de colonnes souhaité.

L'affichage natif du blog utilise, en plus des classes column-X, les classes Bootstrap prévues pour utiliser jusqu'à 12 colonnes, il y a donc deux autres possibilités au choix :

1) Configurer Beez3 pour utiliser Bootstrap pour le contenu (si cela ne pose pas de problème pour d'autres affichages) : aller dans "Extensions > Gestion des templates > Beez3 - Défaut > Paramètres avancés > Composants requérant Bootstrap" et y mettre la valeur com_content

2) Remplacer Beez3 par un template basé directement sur Bootstrap. Par exemple Protostar pour rester dans les templates natifs de J!, mais il en existe beaucoup d'autres.

Amicalement,
Rajoz

[lefabdu51]

Re : Beez 5 - Nombre de colonnes

beez 3 est comme beez 5. l'affichage se fait sur 3 colonnes au maximum. left- content- right ou content-left-right

Apres, tout depend ou tu veut tes colonnes.
Il y a plusieurs solutions a ton probleme.

Configurer Beez3 pour utiliser Bootstrap pour le contenu (si cela ne pose pas de problème pour d'autres affichages) : aller dans "Extensions > Gestion des templates > Beez3 - Défaut > Paramètres avancés > Composants requérant Bootstrap" et y mettre la valeur com_content

la suite:
dans l'onglet paramètres avancés de chaque module. style de module html5 . le style par défaut etant xhtml, il ne prends pas boostrap en compte.

Ensuite tu peut utiliser directement les autres paramètres de cet onglet pour gérer bootstrap.

[rescator]

Re : Beez 5 - Nombre de colonnes

Merci pour vos réponses.
Il s'agit bien de Beez5 et à la ligne 298 du fichier position.css, on trouve ceci:

/* ++++++++++++++ blog ++++++++++++++ */

.cols-1
{
display: block;
float: none !important;
margin: 0 !important;
}

.cols-2 .column-1
{
width:46%;
float:left;
}

.cols-2 .column-2
{
width:46%;
float:right;
margin:0
}

.cols-3 .column-1
{
float:left;
width:29%;
padding:0px 5px;
margin-right:4%

}
.cols-3 .column-2
{
float:left;
width:29%;
margin-left:0;
padding:0px 5px
}
.cols-3 .column-3
{
float:right;
width:29%;
padding:0px 5px
}

.items-row
{
overflow:hidden;
margin-bottom:10px !important;
}

.column-1,
.column-2,
.column-3
{
padding:10px 5px
}

.column-2
{
width:55%;
margin-left:40%;
}

.column-3
{
width:30%
}

.blog-more
{
padding:10px 5px
}

Pourriez vous, me montrer ce qu'il faut rajouter comme lignes pour mettre une colonne de plus (soit 1 column-4 à 24% par exemple)? Car si pour le début du script cela parait évident; à partir de .items-row cela l'est moins.
Encore merci pour votre aide.

rescator

[Rajoz]

Re : Beez 5 - Nombre de colonnes

Bonjour rescator,

Beez5 vient de J! 2.5, il doit s'agir d'une mise à jour vers la 3.3.6.

Le code CSS pour quatre colonnes peut être le suivant, à mettre dans position.css avant .items-row :

.cols-4 .column-1 { float: left; width: 22%; margin: 0; padding: 0 1.5%; }
.cols-4 .column-2 { float: left; width: 22%; margin: 0; padding: 0 1.5%; }
.cols-4 .column-3 { float: left; width: 22%; margin: 0; padding: 0 1.5%; }
.cols-4 .column-4 { float: right; width: 22%; margin: 0; padding: 0 1.5%; }

Amicalement,
Rajoz

[rescator]

Re : Beez 5 - Nombre de colonnes

Merci Rajoz.
Effectivement j'ai fait une mise à jour depuis J 2.5!

Je vais modifier le position.css selon ce que tu me soumets. Mais après item-row je pense qu'il faut rajouter les noms des colonnes suivantes dans le css...... (column-4; -5, etc)

Amicalement

Rescator

[Rajoz]

Re : Beez 5 - Nombre de colonnes

bonjour rescator,

Les classes .columns-X du CSS après .items-row ne sont utilisées que quand le nombre de colonnes paramétré dans le lien de menu est supérieur au nombre de colonnes définies dans le CSS.

Par exemple, pour un paramétrage de quatre colonnes le code HTML généré pour la colonne 1 est (en résumé) :

<div class="items-row [B]cols-4[/B] row-0">
     <article class="item [B]column-1[/B]">...</article>

Avec le code que je t'ai indiqué la classe .cols-4 .column-1 est maintenant définie avant .items-row. Cette classe .cols-4 .column-1 est plus complète par l'utilisation de .cols-4 et elle est donc prioritaire sur les simples .column-1 qui sont définis après .items-row.
Les .column-X après .items-row ne sont donc pas utilisés pour un nombre de colonne allant maintenant jusqu'à quatre.

Avec un paramétrage de cinq colonnes le code HTML généré pour la colonne 1 est :

<div class="items-row [B]cols-5[/B] row-0">
     <article class="item [B]column-1[/B]">...</article>

Cette fois .cols-5 .column-1 n'est pas définie et maintenant les classes .column-X définies après .tems-row sont donc utilisées. Ce sont d'ailleurs elles qui étaient à l'origine de l'affichage incorrect que tu avais signalé dans ton premier post.

Amicalement,
Rajoz

[rescator]

Re : Beez 5 - Nombre de colonnes

Merci pour toutes tes explications. Je suis un vieux chnok qui a connu mambo à ses débuts et les arcanes des css me rebutent un peu malgré les multiples versions de joomla depuis....
Je vais modifier ce position.css dès que j'ai le temps et je te tiens au courant des progrès...

Merci encore Rajoz de répondre aussi clairement à des néophytes perdus

Amicalement

rescator

[rescator]

Re : Beez 5 - Nombre de colonnes

Bonjour Rajoz

Après modifs du position.css le résultat est bon pour la création de 5 colonnes mais pas pour 4 colonnes.
C'est à dire que tout changement de largeur des colonnes, marges etc... pour les 4 colonnes ne change rien à l'affichage.
Il y a 4 colonnes mais elles semblent répondre à des paramètres qui figurent ailleurs....

Au delà de 4 colonnes cela fonctionne.
Cela ne me gène pas trop car l'affichage est correct mais j'aimerais bien savoir ce qui régit les blog 4 colonnes dans les fichiers de beez5......
As-tu une idée?
Merci

Amicalement

Rescator

[Rajoz]

Re : Beez 5 - Nombre de colonnes

Bonsoir rescator,

Difficile d'expliquer ce qui se passe sans savoir quelles modifications ont été faites dans position.css, sans connaître la configuration du lien de menu du blog et sans pouvoir regarder le résultat sur le site avec un inspecteur d'élément comme celui de chrome.

Amicalement,
Rajoz