Bonjour à tous,

Depuis la 1.5 le body obtient la classe css layoutLeftContentRight. Quand on regarde dans structure.css, on voit qu'il peut avoir différentes valeurs : layoutContentRight, layoutLeftContent, layoutContent.

Comment cette css est appliquée au body et d'après quels parametres ?

Bonne journée,

Salut Vincent,

elle indique le structure du site (le nombre de colonnes et dans quelle colonne est le contenu)
Si tu as : layoutContentRight, ça veut dire que c'est un site en deux colonnes, avec le contenu dans la colonne de gauche. layoutLeftContentRight veut dire 3 colonnes avec le contenu dans la colonne centrale.

Le nombre de colonnes étant spécifié dans le webo-facto, en fonction des zones où tu as autorisé les widgets et les menus.

Merci Nicolas,

C'est donc en fonction des widgets, c'est cool.
Dommage qu'on ne puisse pas contextualiser un widget en fonction de si on est dans une fiche produit ou non. Ca nous permettrait facilement de passer de 3 à 2 colonnes. Peut-être dans la 1.6 ;o)

A+

Enfin de compte j'ai mal compris, ce n'est pas en fonction de la config des widgets dans le manage, mais c'est lié comme le dit Nicolas, à la config du factory.

Du coup je ne vois pas trop l'intérêt si ce n'est qu'un fichier de css peut servir facilement à différentes configurations de site. Il n'y a que ca comme intérêt ?

voilà c'est bien ça Vincent.
Avant nous avion autant de jeux de template/css que de dispositions différentes, une horreur à chaque mise à jour.
Maintenant avec cette méthode, nous avons plus qu'un jeu de template à gérer, seules quelques propriétés css permettant de changer la disposition :-)
Même chose pour izi-media, quand on installe ce template pour un site izi-media, une classe izi-media se met en place et permet d'avoir quelques contextualisations spécifiques à cette solution.

Je n'ai pas fait le tour de toutes les css, mais ca ne risque pas d'ajouter trop de lignes ?

Moi non plus, je ne vois pas trop l'intérêt. Par contre, si ces classes étaient appliquées en fonction de la présence ou non, des widgets, ça serait beaucoup plus intéressant !! (ex. un site n'a pas forcément une colonne droite sur toutes les pages...)

J'ai abordé ca avec Manu en formation donc jva essayer de vous éclairer...

Si tu as un site avec des pages a 2 colonnes, et d'autres a 3 colonnes....

Tu crées un 1er modele graphique a 3 colonnes, tu fais toute ta mise en page qui va bien...

Tu crées un second modele graphique a 2 colonnes, dans ce modele la tu mets uniquement le fichier main_page.html du template, auquel tu retires ta colonne de droite.

Tu fais ton ajustement css (dans les css du Modéle 1) pour que ta colonne centrale de la mise en page 2 colonnes prennent la place que tu veux...

En fait sur ton modele2 une fois que tu as viré la colonne de droite de ton main page tu touches plus a rien, tout se passe dans les css du modéle 1.

Pour moi ca a quand meme le gros avantages de pas dupliquer les 3/4 du css pour ce qui est mise en page, couleurs etc...

Je sens bien que j'ai pas été clair ^^ j'vous invite a soliciter Manu qui sait expliquer ca bien :)

je viens de faire un test selon ce que tu dis. J'ai fait un 2e modèle 'cols2' qui ne contient que mainPage.html sans rightbar. Par contre j'ai toujours la classe layoutLeftContentRight sur le body.

Je pense que cette classe est appliquée selon la config des emplacements possibles pour les widgets dans le webo. Donc ta méthode ne fonctionne pas à moins que j'ai oublié un détail.

Non la classe est effectivement toujours la meme puisqu'elle est définie suivant ton paramétrage webo...

Maintenant que tu le dis j'ai oublié un élément qui permet de contextualiser, je recherche lequel et je vous dis ;)

Voila j'ai retrouvé, dans le main_page de ton 2eme modéle, tu contextualise ta balise body, par exemple moi j'ai mis : < body class="layoutLeftContent" >

Comme ca tu as une classe css dédiée à ce modèle là ;)

d'accord, c'est pas mal.

C'est dommage qu'il faut passer par un 2e modèle graphique.

Je pense que ça serait pas mal comme évolution du système.

Bonjour,

Avant tout, excellente année à toutes et à tous!

Pour ce cas de figure, le recours à un second modèle graphique permet d'avoir surtout un flux html cohérent. En effet, dans le cas d'une configuration en 3 colonnes pour la page d'accueil et 1 colonne pour toutes les autres pages, il est possible de masquer les zones leftbar et rightbar par des "display:none" et de contextualiser les widgets par rubriques. Dès lors on se retrouve avec des "div" vides sur les pages à 1 colonne...

Comme l'a souligné Benoît, l'intérêt est de gérer jusqu'à trois voir quatre modèles différents. Il suffit dans un premier temps de configurer les emplacements des widgets et les modèles via le webo-facto puis de récupérer le mainpage.html et enfin d'ajouter les classes suivantes sur l'élément body et le tour est joué :

- Pour une structure en 1 colonne : <body class="layoutContent">
- Pour une structure en 2 colonnes (contenu+rightbar) : <body class="templateContentRight">
- Pour une structure en 2 colonnes (leftbar+contenu) : <body class="templateLeftContent">
- Pour une structure en 3 colonnes (leftbar+contenu+rightbar) : <body> (pas besoin d'ajouter de classe supplémentaire)

Et voici le code css réajusté :

 
/* -------------------------
GABARITS DE MISES EN PAGE
-------------------------*/
 
/*3 colonnes : Col gauche | contenu | Col droite*/
.layoutLeftContentRight #container,
.layoutLeftContentRight #container {
        padding:0;
        width: 648px;
        margin-left: 188px;
}
 
.layoutLeftContentRight #leftbar {
        width: 188px;
        margin-left: -836px;
}
.layoutLeftContentRight #rightbar {
        width: 188px;
}
 
.layoutLeftContentRight .product_detail #ProductRightCol {
width: 160px;
}
.layoutLeftContentRight .cart table{
overflow: auto;
width: 475px;
display: block;
}
 
/*************************
            2 colonnes 
            *********
    - contenu | Col droite
    - col gauche | contenu 
*****************************/
.layoutContentRight  #container,
.templateContentRight #container {
        padding:0;
        margin: 0;
        width: 800px;
}
 
.layoutLeftContent  #container,
.templateLeftContent #container {
        float: right;
        padding:0;
        margin: 0;
        width: 800px;
}
 
.layoutContentRight #rightbar,
.layoutLeftContent #leftbar,
.templateContentRight #rightbar,
.templateLeftContent #leftbar {
        width: 224px;
}
 
.layoutLeftContent #leftbar,
.templateLeftContent #leftbar {
        margin: 0;
}
 
/*1 colonne : contenu*/
.layoutContent #container {
padding:10px;
width: 100%;
}
 

N'hésitez pas à tester cela ;)
Bonne journée

Moi non plus, je ne vois pas trop l'intérêt. Par contre, si ces classes étaient appliquées en fonction de la présence ou non, des widgets, ça serait beaucoup plus intéressant !! (ex. un site n'a pas forcément une colonne droite sur toutes les pages...)

Je seconde cela ! Ce serait beaucoup plus logique et intéressant.