|
2.04 Les styles généraux des modules |
|
|
|
|
Concevoir sa feuille de styles -
2. Déclaration des Styles CSS
|
|
Écrit par Jean Louis Servais
|
|
06-05-2006 |
 | Joomla! 1.0.x |
 |
06/06/2006 : Première mise en ligne.
|
 |
07/06/2006 : Il faut réviser cette page afin de mettre en évidence les différentes méthodes de publication (publication par défaut, publication horizontale, brute, x-joomla! et coins étirables). Ceci afin de dégager les régles générales et simplifier ainsi les explications sur les différentes pages des modules. Le but visé est de limiter les pages des styles de chaque modules aux styles du contenu de chaque module...
|
 |
Ce qui va suivre peut de prime abord paraître compliqué et totalement incompréhensible. Il va de soit que cela nécessite l'examen en parralléle du tutoriel Les positions de publication de Joomla! pour les fonctions en objet.
Les répétitions sont volontaires.
Le code n'a pas été testé.
|
Les styles CSS à définir pour les modules sont fonction :
| |
- des paramètres définis dans le fichier index.php du template pour les foncions mosLoadModules présentes,
- et des valeurs mentionnées dans l'édition des modules du site pour la rubrique Modules Class Suffix.
|
2.4.1 Cas des modules publiés avec l'une des fonctions suivantes :
|
mosLoadModules ( $nom_position )
mosLoadModules ( $nom_position , 0 )
mosLoadModules ( $nom_position , 1 )
|
Voici un modèle des déclarations à insérer dans la feuille de styles CSS de votre template :
|
table.moduletable {
}
table.moduletable th {
}
table.moduletable td {
}
|
Ceci concerne tous les modules sans Module Class suffix.
Dans le cas ou des valeurs ont été définies pour cette donnée dans l'édition des modules, il faut définir de nouveau tous ces styles pour chaque valeur des Module Class suffix :
|
table.moduletable-suffix {
}
table.moduletable-suffix th {
}
table.moduletable-suffix td {
}
|
2.4.2 Cas des modules publiés avec la fonction suivante :
|
mosLoadModules ( $nom_position , -2 )
|
Voici un modèle des déclarations à insérer dans la feuille de styles CSS de votre template :
|
div.moduletable {
}
div.moduletable h3 {
}
|
Ceci concerne tous les modules sans Module Class suffix.
Dans le cas ou des valeurs ont été définies pour cette donnée dans l'édition des modules, il faut définir de nouveau tous ces styles pour chaque valeur des Module Class suffix :
|
div.moduletable-suffix {
}
div.moduletable-suffix h3 {
}
|
2.4.3 Cas des modules publiés avec la fonction suivante :
|
mosLoadModules ( $nom_position , -3 )
|
Voici un modèle des déclarations à insérer dans la feuille de styles CSS de votre template :
|
div.module {
}
div.module div {
}
div.module div div {
}
div.module div div div {
}
div.module div div div h3 {
}
|
Ceci concerne tous les modules sans Module Class suffix.
Dans le cas ou des valeurs ont été définies pour cette donnée dans l'édition des modules, il faut définir de nouveau tous ces styles pour chaque valeur des Module Class suffix :
|
div.module-suffix {
}
div.module-suffix div {
}
div.module-suffix div div {
}
div.module-suffix div div div {
}
div.module-suffix div div div h3 {
}
|
|
Les spécialistes en CSS peuvent simplifier ce qui peut l'être. Les débutant éviteront de prendre des raccourcis.
Le paragraphe 2.4.1 est adapté aux templates en <table>.
Le paragraphe 2.4.2 est parfait pour les templates en <div>.
Le paragraphe 2.4.3 peut être assimilé avec un peu d'imagination à une série de poupée Russes. Il vous reste à apposer judicieusement la couche de peinture. Toutes ces balises <div> n'ont pas d'autre fonction que de réceptionner les images nécessaires afin d'obtenir des coins arrondis.
|
 Participez à cette page !
|
|
Dernière mise à jour : ( 12-07-2006 )
|
