Tutoriels Joomla!
- Détails
- Écrit par : Starter
- Temps de lecture: 10 mins
Il nous est arrivé de choisir des templates, des extensions pour un projet Joomla et de commencer à construire notre site. En ajoutant ces extensions lors du développement en local, le chargement et les performances du site ne semblent pas être un problème.
Lorsque le site est déménagé sur un serveur et après avoir investi plus d'une 100 d'heures, il est souvent difficile de supprimer des extensions ou réduire des fonctionnalités pour améliorer les performances du site.
C'est l'histoire de la plupart des personnes qui demandent de l'aide professionnelle pour optimiser leurs sites.
N'oubliez pas, plus c'est lourd ... Plus le chargement sera lent.
- Détails
- Écrit par : Lorenzo
- Temps de lecture: 4 mins
Voici la procédure à suivre pour intégrer une animation Adobe Edge dans un site Joomla
Tout d’abord installer le plugin Sourcerer de NoNumber qui va permettre d’insérer le script dans la balise <head> de notre article.
Pour rappel Joomla ne permet pas de le faire nativement.
Ensuite une fois que notre animation est publiée avec Edge, il suffit de prendre l’entièreté du dossier et le placer à la racine du site (et non à la racine de notre template).
Voici à quoi ressemble un dossier Edge publié:
Le fichier html généré peut être mis à la poubelle, car on ira le coller en partie dans un article Joomla.
Voici à quoi ressemble le fichier html généré par Edge, rien de bien compliqué:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="/nom-du-projet_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-124939132 { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End-->
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-124939132">
</div>
</body>
</html>
Il nous suffit de copier les balises <script> et <style> et d’aller les coller dans l’entête de notre article entre les balises {source}{/source} grâce au plug-in Sourcerer installé préalablement.
Petite remarque: l'adresse du script doit avoir un lien absolu, ce qui nous donnera une adresse du style:<script type="text/javascript" charset="utf-8" src="http://www.votre-site.com/projet-edge/nom-du-projet_edgePreload.js"></script>
Autre chose importante: afin que JCE ne rende pas les liens absolus en liens relatifs il faut décocher la validation HTML dans JCE Administration/Panneau de contrôle/Configuration globale
Ensuite il ne faut pas oublier d'aller copier la balise<div><div id="Stage" class="EDGE-124939132"></div>
dans le corps de notre article. Pour cela il est nécessaire de passer en mode code dans l'interface de JCE.
Les deux autres fichiers qui doivent être édités sont les suivants:
nom-du-projet_edge.js
nom-du-projet_edgePreload.js
Bon là ça va être un peu compliqué pour les afficher puisqu'ils sont minifiés (pour ceux qui ne le savent pas, minifier = supprimer tous les espaces et sauts de lignes superflus qui sont autant de données inutiles que l’on télécharge), pour cela il existe un service sur le web pour les déminifier http://jsbeautifier.org, il suffit de coller le code et d'appuyer sur le bouton prévu à cet effet pour déminifier.
Dans le sens inverse c'est ici: http://www.jsmini.com
Concernant le fichier nom-du-projet_edge.js on cherche la variablevar im = image/
et on la remplace avec l'adresse absolue du dossier image qui se trouve dans le dossier du projet Edge, on a donc ceci:var im = 'http://www.votre-site.com/projet-edge/images/';
On enregistre est c'est fait.
Vous pouvez ne pas passer par une déminification, mais alors il faudra vous procurer des lunettes...
Concernant le fichier nom-du-projet_edge.js les lignes à changer se trouvent à la fin du charabia, vous pouvez ici aussi passer ou non par une deminification.
On cherche les lignes suivantes:aLoader = [{
load: "edge_includes/jquery-1.7.1.min.js"
}, {
load: "edge_includes/edge.2.0.0.min.js"
}, {
load: "nom-du-projet_edge.js"
}, {
load: "nom-du-projet_edgeActions.js"
}];
et on les remplace comme auparavant avec les liens absolus de notre dossier du projet Edge qui se trouve à la racine de notre site, ce qui donne ceci:aLoader = [{
load: "http://www.votre-site.com/projet-edge/edge_includes/jquery-1.7.1.min.js"
}, {
load: "http://www.votre-site.com/projet-edge/edge_includes/edge.2.0.0.min.js"
}, {
load: "http://www.votre-site.com/projet-edge/nom-du-projet_edge.js"
}, {
load: "http://www.votre-site.com/projet-edge/nom-du-projet_edgeActions.js"
}];
Concernant la méthode avec l'iframe, il n'y a rien de bien compliqué, on place le dossier du projet Edge à la racine du site comme on l'a fait auparavant et on place la balise <iframe> dans notre article Joomla, ici pas besoin de lien absolu:
<iframe src="/projet-test-animate-oiseaux-web/this_is_responsive.html" width="100%" height="400px" frameborder="0" scrolling="no"></iframe>
... voilà, voilou, j'espère que cela sera utile à la communauté Joomla :)
Ce(tte) œuvre est mise à disposition selon les termes de la Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Pas de Modification 4.0 International.
- Détails
- Écrit par : Bertrand
- Temps de lecture: 9 mins
Comme le site SFK, votre site Aide-Joomla a fait peau neuve et est rentré dans l'ère Joomla 3.
Le choix du nouveau template a été long et s'appuyait sur 3 points principaux :
- Garder l'identité graphique de votre site favori
- Etre "Responsive" c'est a dire lisible sur les tablettes et smartphone
- Au mieux être libre (gratuit)
Nous nous sommes finalement décidés vers un développement via le framework Gantry.
Gantry est le « Framework » conçu par l'équipe de RocketTheme.com en licence OpenSource GPL 2.0. Il est utilisé, depuis décembre 2009, comme sous-couche de tous les templates RocketTheme.
Le pack Gantry c'est : Le Framework , un template « blanc » sur lequel on va s'appuyer pour personnaliser son propre site et une interface de gestion du template dans l'administration Joomla .
Découvrez ici les principaux points clefs.
Je retiendrais et rajouterais :
- Prêt pour Joomla 3.0
- Les mises à jour rapides via l'utilitaire Joomla
- Un forum dédié (en anglais)
- Template responsive – Vous pouvez même définir quel module apparaitra et où suivant la taille de l'écran défini (moniteur, tablette ou smartphone)
- La personnalisation aisée
- Intégration au composant gratuit RokSprocket qui permet de gérer les modules types « Features, Tabs, Lists, Mosaic & Headlines »
Je ne parlerais pas aujourd'hui de la migration joomla 2.5 vers joomla 3, mais de quelques trucs et approches pour développer et adapter son template sous Gantry en prenant pour exemple le site Aide-Joomla.
Dans un premier temps, télécharger ici et installer le site de démonstration de Gantry - Gantry RocketLauncher for Joomla 3.0 et découvrez le.
- Détails
- Écrit par : Starter
- Temps de lecture: 4 mins
Modification de la mise en page d'un article :
Par défaut, l'affichage d'un article se présente un peu comme ci-dessous.
Ce tutoriel va nous permettre d'obtenir cette présentation.
Tout cela grâce à la puissance des CSS.
Création de l'article :
Nous commençons par créer notre article.
Contenu ==> Gestion des articles ==> Ajouter un article
Nous lui donnons un titre, nous lui attribuons une catégorie, et nous ajoutons seulement une ligne.
{"loadposition perso10"} sans les ""
Ou perso10 qui sera la position du module qui affichera l'article.
Nous sauvegardons l'article en l'enregistrant
Création du module :
Nous nous rendons ensuite dans
Extensions ==> Gestion des modules
Puis
Nouveau ==> Contenu personnalisé
Nous donnons un titre au module (qui peut être le même que l'article) et nous lui attriburons la position perso10
Puis nous allons personnaliser le contenu de notre article.
Pour finir nous enregistrons notre module pour valider sa publication.
Voila, notre article est créé et devrait se présenter comme ci-dessous.
Le CSS :
Celle-ci sera compatible :
- Internet Explorer 10+
- Firefox, Firefox Mobile
- Chrome, Chrome Mobile
- Opera 11.1+
- Opera Mobile 11.1+
- Safari 3.2+
- Safari Mobile 3.2+
- Android Browser 2.1+
.multi-column2 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count:2;
-moz-column-gap: 40px;
-webkit-column-gap: 40px;
column-gap: 40px;
text-align: justify;
}
Pour 2 colonnes avec bordures :
.multi-column2-bordered{
-moz-column-count: 2;
-webkit-column-count: 2;
column-count:2;
-moz-column-gap: 40px;
-webkit-column-gap: 40px;
column-gap: 40px;
-moz-column-rule:4px outset #5C4C4D; /* Firefox */
-webkit-column-rule:4px outset #5C4C4D; /* Safari and Chrome */
column-rule:4px outset #5C4C4D;
text-align: justify;
}
Pour 3 colonnes sans bordure :
.multi-column3 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count:3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
column-gap: 30px;
text-align: justify;
}
Pour 3 colonnes avec bordures :
.multi-column3-bordered{
-moz-column-count: 3;
-webkit-column-count: 3;
column-count:3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
column-gap: 30px;
-moz-column-rule:4px outset #5C4C4D; /* Firefox */
-webkit-column-rule:4px outset #5C4C4D; /* Safari and Chrome */
column-rule:4px outset #5C4C4D;
text-align: justify;
}
Pour 4 colonnes sans bordure:
.multi-column4 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count:4;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;
text-align: justify;
}
Pour 4 colonnes avec bordures :
.multi-column4-bordered{
-moz-column-count: 4;
-webkit-column-count: 4;
column-count:4;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;
-moz-column-rule:4px outset #5C4C4D; /* Firefox */
-webkit-column-rule:4px outset #5C4C4D; /* Safari and Chrome */
column-rule:4px outset #5C4C4D;
text-align: justify;
}
Si vous le souhaitez, aidez-vous de ce site pour générer votre code.
http://www.debray-jerome.fr/outils/Generateur-de-multi-colonnes-en-css3.html
Quelques explications :
- -moz- Contrôle l'affichage sur Firefox
- -webkit - Contrôle l'affichage sur Chrome et Safari
- Column-count Permet de définir le nombre de colonnes
- Column-gap Permet de définir l'espace entre deux colonnes
- Column-rule Permet de définir le trait de séparation entre deux colonnes
Les valeurs pour ce trait sont les suivantes :
- La largeur en pixel
- Le style de ce trait :
- solid : trait continu
- dotted : pointillé
- dashed : tiret
- double : trait continu double
- grouve : rainuré
- ridge : relief
- inset : relief interieur
- outset : relief exterieur
- la couleur
Voila pour le css.
Maintenant nous retournons dans la gestion de notre module pour y appliquer l'une de nos différentes classes.
Les classes sont les suivantes :
- [espace]multi-column2
- [espace]multi-column2-bordered
- [espace]multi-column3
- [espace]multi-column3-bordered
- [espace]multi-column4
- [espace]multi-column4-bordered
Voila, il ne vous reste plus qu'à jouer avec l'intégration de vos modules
et classes CSS.
Consulter la seconde partie : Modification de la mise en page d'un article: 2° méthode
Ce(tte) œuvre est mise à disposition selon les termes de la Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Pas de Modification 4.0 International.
