Le template Protostar
Présentation
Le template utilisé pour ce site exemple est le template Protostar.
Avec le Bezz3, ce template est l'un des deux templates fourni par défaut avec Joomla.
Ce template, basé sur Bootstrap et l'interface utilisateur Joomla bibliothèque, est compatible avec les différents appareils de visualisation (smartphones, tablettes, stations).
Comme la majorité des templates, le Protostar propose des styles typographiques par défaut (voir ci-dessous).
Compatibilité
Le template Protostar est un template entièrement compatible smartphones, tablettes et stations (ordinateurs classiques).
Deux versions visuellement distinctes sont affichées selon le type d'appareil utilisé :
- une version large pour ordinateurs et tablettes en mode horizontal (à taille fixe ou fluide selon paramètre choisi) ;
- une version étroite pour smartphones et tablettes en mode vertical.
L'utilisation de Boostrap permet de fournir une feuille de style CSS qui contient des définitions de base pour tous les composants HTML, ce qui permet de disposer d'une apparence uniforme pour les textes, tableaux, et les éléments de formulaires. De nombreux éléments graphiques au format standardisé sont également fournis tels boutons, libellés, icônes, miniatures, barres de progression, etc.
Paramètres
Le template Protostar propose quelques paramètres comme la couleur des boutons et des liens, l'adaptation du titre et du slogan avec ajout possible de logo, l'utilisation des polices Google dans les titres avec choix de la police, et affichage fluide ou fixe du template (voir l'image ci-contre).
Comme vous pouvez le voir sur ce site exemple, il est possible de créer des menus déroulants pour la version ordinateur, cela grâce au style " nav-pills".
Note
Ce style est à appliquer dans le module de menu sous : "Paramètres avancés -> Suffixe CSS de menu".
L'espace devant le nom doit être conservé !
Styles des principales balises HTML (Formats)
Les exemples présentés dans les panneaux déroulants ci-dessous vous permettent de découvrir les styles appliqués aux principales balises HTML par le template Protostar.
Système XTypo - Application de styles CSS pour blocs de contenu
Présentation de XTypo
Le système XTypo permet d'appliquer des styles CSS pour créer des blocs de contenu distincts.
Il n'est pas nécessaire d'avoir des connaissances de programmation CSS pour utiliser ce système accessible à tous.
L'application des styles s'effectue par de simples clics sur les styles souhaités après avoir sélectionné l'élément à transformer.
Les styles sont disponibles par une fenêtre popup (voir la capture ci-contre) que vous pouvez ouvrir grâce à un bouton sous l'éditeur.
Xtypo - Fenêtre d'application de style
Processus d'utilisation
Pour appliquer un style Xtypo à du contenu vous devez :
-
Sélectionner la ligne ou la portion de texte souhaitée (Exemple visuel de texte sélectionné) ;
-
Cliquer sur le bouton XTypo disponible sous l'éditeur pour afficher la fenêtre des styles disponibles ;
-
Choisir le style souhaité dans la fenêtre affichée en cliquant sur sa représentation (voir ci-contre ->) ;
-
Refermer la fenêtre des styles en cliquant n'importe où à côté de la fenêtre ou, en cliquant sur la croix en haut à droite de la fenêtre ;
- Admirer le résultat...
Les exemples présentés dans les panneaux déroulants ci-dessous vous permettent de découvrir les styles XTypo à votre disposition.