|
|
Derniers tutoriels
Tutoriels populaires
Les mieux notés
- Template Creator
- Livre sur les templates Joomla! 1.5
- Module de menu Maximenu_CK
- Plugin Mediabox_CK
- Module de menu mooCoverFlow_CK
Template Creator est l'outil indispensable pour créer vos propres templates Joomla!. Il s'installe sur un site Joomla! 1.6 ou 1.7 et permet de générer des templates en version 1.5 à 1.7. En quelques clics vous pouvez créer une architecture HTML et donner les styles CSS en remplissant simplement les champs et en utilisant les pipettes de couleur. Vous pouvez prévisualiser votre création avant de créer le package du template à installer sur n'importe quel site Joomla!.
Cette documentation de 160 pages vous guidera de A à Z à travers la construction des templates Joomla! 1.5. La première partie vous initiera aux bases HTML et CSS pour mieux comprendre leur fonctionnement. La partie de documentation technique aborde tous les aspects des templates : structure de fichiers, contenu, mais aussi les fonctions avancées, les suffixes CSS, les langues et paramètres d'administration. Enfin le tutoriel vous montrera pas à pas comment créer un template complet que vous pourrez également télécharger.
Accéder à la page du eBook Création de templates Joomla! 1.5
Le module Maximenu_CK offre de nombreuses possibilités. C'est un menu déroulant mootools basé sur le script moomenu. Chaque lien peut contenir une description sur une deuxième ligne, les sous-menus peuvent être organisés en multi-colonnes avec titre et largeurs spécifiques. Le menu peut également charger d'autres modules. Le module est orgranisé en thèmes graphiques que l'on peut télécharger.
Accéder à la page du module Maximenu_CK
Le plugin Mediabox_CK permet d'afficher vos images et contenus multimédias dans une fenêtre de type Lightbox. Basé sur la librairie mootools 1.2 le plugin permet d'afficher des titres et descriptions sur chaque image. Vous pouvez également créer des albums pour naviguer entre les éléments. Les médias qui peuvent être chargés sont nombreux : youtube, daylymotion, vimeo, images, mp4, mo3, flv, flash, mov (player intégré), twitter, facebook, flickr, sites web et contenus webs.
Le module mooCoverFlow_CK permet de créer un menu coverflow comme ceux présents sur les Macs d'Apple. Vous pouvez faire défiler des images avec les titres des liens, la navigation peut se faire à la souris ou au clavier et les liens s'ouvrent lors du double clique sur l'image courante. Vous pouvez aussi transformer ce superbe menu en galerie d'images qui s'ouvrent dans une fenêtre popup de type lightbox.
Menu principal
Template Creator CK
Créez vos propres templates Joomla! avec Template Creator CK
Templates Joomla!
Téléchargez le livre de création de templates Joomla!
320 pages de Documentation technique, 2 Tutoriels pour créer les templates Joomla!, et 3 templates inclus
Maximenu CK
Créez votre Megamenu Joomla! avec Maximenu CK. Multicolonnes, multirangés, chargement de module, nombreux effets, thèmes responsive.
28
Fév
2011
Suffixe de classe CSS
Note utilisateur: 
/ 10
On entend souvent parler de suffixe de classe CSS dans Joomla!, mais qu'est ce que c'est ? C'est simplement un paramètre que l'on peut utiliser pour personnaliser les classes CSS utilisées pour identifier les éléments de la page.
Suffixe de classe de module
Dans les options avancées de l'administration des modules on peut définir un suffixe de classe CSS. Ce suffixe sera ajouté au conteneur du module en fonction du style utilisé dans l'appel Jdoc. Je m'explique, dans le fichier 'index.php' du template on charge les modules avec le code suivant (un exemple avec la position-7) :
<jdoc:include type="modules" name="position-7" style="xhtml" />
Il existe plusieurs styles natifs mais nous ne verrons que le style 'xhtml' et le style 'rounded'.
Pour un style 'rounded', on obtient une structure 'div.module[sufffixe]'
Pour un style 'xhtml', on obtient une structure 'div.moduletable[suffixe]'
Exemple avec un suffixe '_gris'
Lorsque l'on ajoute un suffixe en un seul mot sans espace il se colle directement derrière le conteneur du module, voici donc la structure HTML que l'on récupère (avec un style xhtml) :
div.moduletable_gris
Dans les CSS on peut ainsi identiifer le module pour y appliquer ses propres styles :
div.moduletable_gris h3 {
background: #ddd;
}
De cette manière on rend le fond du titre du module gris. Le gros problème de cette technique c'est qu'elle supprime tous les styles qui sont appliqués par défaut car la classe '.moduletable' n'existe plus.
Exemple avec un suffixe ' gris'
En mettant un espace devant le suffixe (' gris') on crée une nouvelle classe. La structure HTML obtenue ressemble à cela :
div.moduletable gris
Et dans les CSS on peut alors identifier le module :
div.gris h3 {
background: #ddd;
}
De cette manière on conserve les styles du template qui sont appliqués à div.moduletable et on peut ajouter une personnalisation spécifique à chaque module grâce au suffixe.
Mentions légales
Site réalisé par Cédric KEIFLIN
Copyright © 2010 - 2011
http://tutoriels-joomla.joomlack.fr n'est ni affilié à Open Source Matters ou au projet Joomla ni approuvé par eux.
Le nom Joomla!® est utilisé sous license limitée de Open Source Matters, le propriétaire mondial de la marque de commerce.
Compteur de visites
 | Nombre de visiteurs | 854291 |
Qui est en ligne
Nous avons 61 invités et aucun membre en ligne