tutoriels frameworks / templates

Tutoriels sur Gantry, Vertex, Helix ... etc ...

(documentation personnelle ou traduction de la documentation originale)

Sous-catégories

Tutoriels Gantry5

Gantry5 remplace avantageusement Gantry4 !

Retrouvez-ici toutes les procédures pour prendre en main cet outil !

Tutoriels Helix

Retrouvez les tutoriels et toute la documentation Du framework Helix de Joomshaper traduite en français. (http://www.joomshaper.com/documentation/helix/)

Tutoriel Astroïd

Tutoriel ASTROÏD

Documentation en français sur le framework astroïd Pour Joomla

https://astroidframe.work/

par

Astroid c’est quoi ?

Astroid est un puissant framework moderne conçu pour les designers et les développeurs ou simplement pour vous aider à créer votre premier site web. Son interface intuitive vous aidera à créer des sites web et des templates basés sur Joomla cc réactifs, rapides et robustes. Astroid utilise les dernières technologies web et intègre et améliore les capacités de base de Joomla.

Caractéristiques

Construit pour Joomla 4, Joomla 5 & au delà!
Crée des sites web à chargement rapide
Structure 100 % réactive avec des contrôles utilisateur avancés par appareil
Compatible Bootstrap 5, Sass Ready, Custom CSS & SCSS si necessaire
Constructeur de mise en page ergonomique par glisser-déposer avec une flexibilité totale en matière de conception
Options flexibles pour le logo et l'en-tête (logo Retina, menu « collant », contrôles de la mise en page...)
Font Awesome 6 (Chargement externe ou locale)
Icônes sociales, téléphone et partage
Conception accessible et instructions textuelles Prêt pour le RTL/LTR
Animations des sections et des éléments et contrôles étendus de l'arrière-plan
Options avancées des menus (bannières de pages, icônes, sous-titres, badges...)
Sections off-canevas et options puissantes de " Mega Menu "
Contrôles typographiques avancés pour les polices externes (Google, etc.) ou auto-hébergées
Options avancées de blog (Informations sur l'auteur, Articles connexes, Temps de lecture, Partage social, Commentaires...)
Options de type d'article personnalisé (vidéos, galerie, audio, commentaires, citations et badges d'articles...)
Intégration illimitée de codes et de fichiers personnalisés (Javascript, CSS, code de suivi...)
Profils et thèmes personnalisés avec paramètres d'importation/exportation
Lazy Loading et optimisation du code JS et CSS
Open Graph
Possibilité d'intégration totale des modèles enfants de Joomla
Administration Ajax et thèmes de couleurs claires et foncées avec commutateur pour les visiteurs
Expérience utilisateur améliorée. Créez facilement le design que vous avez en tête.
Code de base remanié, amélioration de toutes les versions
Disponible dans plusieurs langues
Système puissant de widgets
Et plus encore ...
N'activez que ce dont vous avez besoin et demandez-nous de nouvelles fonctionnalités !

Pour démarrer :

Vous avez 2 minutes ?

Découvrez un aperçu vidéo du framework Astroid

Pour chaque mise en page vous pouvez charger une feuille de style spécifique. Cette fonctionnalité peut vous être utile lorsque vous avez différents styles pour un template et que vous ne voulez pas les inclure à tous les styles de templates. Cela peut avoir un impact positif sur la vitesse de chargement de votre site.

Étape 1: Créer un fichier LESS

Tout d'abord, vous devez créer un fichier LESS. Le fichier doit se trouver dans le répertoire suivant :

/templates/[nom_du_template]/less/

Étape 2: Charger le fichier créé

Ensuite, éditer un fichier de mise en page à partir du répertoire suivant:

/templates/[nom_du_template]/tpl

Dans la section head, vous devez ajouter le code suivant :

<?php $this->addCompiledStyleSheet(JMF_TPL_URL.DIRECTORY_SEPARATOR.'less'.DIRECTORY_SEPARATOR.'new-layout.less', true, JMF_TH_TEMPLATE); ?>

Jetez un œil sur l'exemple :

<head>     <?php $this->renderBlock('head'); ?>     <?php $this->addCompiledStyleSheet(JMF_TPL_URL.DIRECTORY_SEPARATOR.'less'.DIRECTORY_SEPARATOR.'new-layout.less', true, JMF_TH_TEMPLATE); ?>     </head>

Étape 3: Ajouter un fichier LESS à la map LESS

Une fois que vous avez ajouté un nouveau fichier LESS dans la section head, vous devez ajouter ce fichier dans la map LESS. De cette façon, le fichier sera recompilé en CSS quand n'importe quel autre fichier LESS en relation avec le nouveau (par exemple les variables inclus) sera modifié.

Pour ce faire, modifiez le fichier suivant :

/templates/[nom_du_template]/lib/jm_template.php

Ensuite, recherchez le code suivant :

$common_all = array( 'bootstrap_variables.less', 'template_variables.less', 'override/ltr/mixins.less', 'template_mixins.less' ); $this->lessMap['offcanvas.less'] = $common_all; $this->lessMap['djmenu.less'] = $common_all; $this->lessMap['djmenu_fx.less'] = $common_all; $this->lessMap['custom.less'] = $common_all; $this->lessMap['comingsoon.less'] = $common_all;

Au-dessus du code vous devez ajouter votre nouveau fichier LESS comme suit :

$this->lessMap['offcanvas.less'] = $common_all; $this->lessMap['djmenu.less'] = $common_all; $this->lessMap['djmenu_fx.less'] = $common_all; $this->lessMap['custom.less'] = $common_all; $this->lessMap['comingsoon.less'] = $common_all; $this->lessMap['new-layout.less'] = $common_all; //new-layout.less added

Cela signifie que quand l'un de ces fichiers sera modifié, alors le fichier new-layout.less sera compilé en CSS automatiquement :

bootstrap_variables.less, template_variables.less, override/ltr/mixins.less, template_mixins.less

Étape 4: Ajouter des styles

Maintenant, vous pouvez ajouter des styles LESS ou CSS au fichier LESS.
Vous devriez vous rappeler d'importer les variables et mixins si vous voulez profiter d'eux :

/* ====================    VARIABLES import    ==================== */     @import "template_variables.less"; @import "bootstrap_variables.less";    /* ====================    MIXINS import    ==================== */    @import "override/ltr/mixins.less"; @import "../../../plugins/system/jmframework/includes/assets/template/bootstrap/less-ext/mixins-ext.less"; //JM extended mixins @import "template_mixins.less";

Le personnaliseur de thème est un outil inclus dans le framework EF4 qui permet de changer les styles LESS liés au design du template sans avoir à modifier les fichiers du template. Toutes les modifications que vous pouvez prévisualiser dans...

Lire → Présentation

Activez le panneau

Tout d'abord, vous devez activer le panneau du Personnaliseur de Theme.
Rendez-vous dans les paramètres du template de votre Joomla back-end :

Extensions -> Templates-> [nom_du_template]

Cliquez sur l'onglet fonctionnalités avancées et vous verrez les paramètres suivants...

Lire → Configuration

Dans notre exemple, nous allons ajouter un paramètre pour modifier la couleur d'arrière-plan du pied de page.
Pour afficher un paramètre dans le personnaliseur, il doit exister dans les paramètres du template.

Ajouter un nouveau paramètre aux paramètres du template

Commençons...

Lire → Ajouter un nouveau paramètre

Plus d'articles...

Page 17 sur 25

Tutoriels sur Joomla et la création de site