Formation Logo Joomla Joomla!


Paramétrer son template


Par défaut, Joomla! 3.x est livré avec quatre templates : deux pour le panneau d'administration (Hathor et Isis) et deux pour la partie "public" du site (Protostar et Beez 3).
Le contenu des 3 articles qui suivent est basé sur le template Protostar qui est le template défini par défaut après une installation standard de Joomla! 3.x.


Paramétrer son template Joomla!



Le template par défaut

Nous l'avons vue en préambule, Protostar est le template "par défaut". Cela signifie que ce sont les styles et les positions de ce template qui seront utilisées pour l'affichage en frontend. Le template "par défaut" est symbolisé par une icône "étoile".


Paramétrer son template Joomla!


Lors de l'installation, Joomla! assigne les styles du template Protostar à l'ensemble des éléments de menu créés. Cependant, il est possible de modifier un style de ce template en affectant des styles de template différents aux éléments de menu souhaités afin d'obtenir un affichage différent.

Il est possible d'assigner un style de template de deux manières :

  • directement depuis le template : "Extensions puis "Template" puis en sélectionnant le template par défaut,
  • en modifiant l'élément de menu : "Menus" puis "Nom du menu" puis en sélectionnant l'élément de menu.


Les paramètres avancés

Entrons dans le vif du sujet et découvrons les paramètres avancés du template. A partir du panneau d'administration de votre site, suivez "Extensions puis "Template" puis cliquez sur "Protostar - Défaut". Cliquez ensuite sur l'onglet "Paramètres avancés".


Paramétrer son template Joomla!


Les différents paramètrages possibles concernent :

  • le choix de la couleur principale du template,
  • le choix de la couleur d'arrière-plan,
  • l'ajout d'un logo,
  • le titre et la description,
  • choisir d'utiliser une Google font pour les titres,
  • opter entre un affichage fluide ou statique,

Nous allons maintenant passer en revue ces différents paramètres et voir comment cela affecte notre présentation en frontend.


Couleur principale du template : ce paramètre vous permet de choisir la couleur des titres, du texte des éléments de menu, les boutons et autres styles du template. Si vous ne connaissez pas le code couleur hexadécimal (sous la forme #FFFFFF), vous pouvez utiliser la palette de couleur pour trouver et sélectionner la couleur de votre choix. Enregistrez vos modificatiosn et affichez le frontend.


Paramétrer son template Joomla!


Couleur d'arrière-plan : ce paramètre vous permet de modifier la couleur des marges extérieures du conteneur principal de votre site. Grâce à la palette de couleurs, vous pouvez définir et choisir la couleur d'arrière-plan.


Paramétrer son template Joomla!


Enregistrez votre saisie et affichez le frontend pour constater la modification :


Paramétrer son template Joomla!


Logo : en cliquant sur "Sélectionner", vous pouvez ajouter un fichier images en tant que logo. Téléchargez le fichier depuis votre ordinateur et ajoutez-le depuis le gestionnaire des médias. Par défaut, le logo est affiché dans la position "logo" du template.
La mise en page par défaut avec Protostar permet soit d'afficher un logo, soit le titre du site qui apparaîtra dans le header de la page. En insérant votre logo de cette façon, Protostar ajoute automatiquement sur votre logo, un lien vers la page d'accueil de votre site


Paramétrer son template Joomla!


Dès que vous aurez enregistré votre saisie, votre logo s'affichera en frontend :


Paramétrer son template Joomla!


Titre : si vous n'avez pas de fichier image pour afficher votre logo, le template affichera le titre indiqué ici.


Paramétrer son template Joomla!


Description : par defaut, Protostar affiche cette description (ou sous titre) sous votre logo ou sous votre titre.


Paramétrer son template Joomla!


Votre description s'affichera en frontend après avoir enregistré votre saisie :


Paramétrer son template Joomla!


Polices Google des titres : si vous souhaitez que votre site utilise une Google fonte pour les balises de titre (de H1 à H6), sélectionnez "Oui". La police par défaut est "Open+Sans". Si vous souhaitez utiliser vos propres fontes, sélectionnez "Non".


Nom de police Google : pour spécifier une autre Google fonte, vous devez indiquer son nom ici. Si celle font possède un nom composé comme "Droid Sans", chaque mot doit être séparé d'un signe "+" : Droid+Sans.
Les Google font sont disponibles à cette adresse : https://www.google.com/fonts.


Affichage fluide (adaptable selon la largeur).

:

Protostar est un template "Responsive Design". Vous avez la possibilité d'opter pour un affichage statique ou fluide, qui sont 2 approches différentes.

Statique : c'est l'affichage que nous avons vu jusqu'ici. Si vous préférez des points de rupture suivant le type d'appareil, choisissez de préférence ce type d'affichage. Le conteneur central et la colonne s'affichent jusqu'à une largeur de 980 pixels. En dessous de cette valeur et jusqu'à 767 pixel, la colonne et la zone de contenu deviennent plus étroits. Finalement, pour des largeurs d'écran inférieures à 767 pixel, les éléments s'affichent les uns en dessous des autres, y compris des éléments de menu.


Paramétrer son template Joomla!


Fluide : dans ce cas, le site s'affichera sur la totalité de la largeur de la fenêtre du navigateur. Ce type d'affichage est plutôt recommandé pour les sites ayant besoind'une grande largeur sur les écrans les plus larges. La largeur des colonnes est exprimée en pourcentage de la largeur de l'écran, cela peut ne pas convenir à tous les contenus.


Paramétrer son template Joomla!



Affecter à un menu

Grâce à Joomla!, vous avez la possibilité d'utiliser différents templates pour différentes pages. Dans cet onglet, vous pouvez sélectionner les pages qui devront s'afficher avec Protostar. Pour cela, il est nécessaire que les pages doivent avoir été créées grâce aux menus avant de pouvoir être sélectionnées ici.


Paramétrer son template Joomla!



Quizz

Dans le prochain article, nous verrons les modifications avancées d'un template. Mais avant cela, je vous invite à répondre à une question portant sur l'article que vous venez de lire.


L'un de ces templates n'est pas installé par défaut avec Joomla :





Please answer the question.


Et ensuite...

 

web-eau.net is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is
used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.