Accueil » Code » Joomla » Apprendre Joomla 1.5 - Installation| Utilisation| Personnalisation

Tuto Joomla | Enrichissement typographique avec Tuto Joomla 1.5 Installation| Utilisation| Personnalisation

vidéo 24/43
  • Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

    Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

    La suite de cette vidéo est accessible après achat de la formation.
    previous
    summary
    resume
    next
    play
    Enrichissement typographique avec Tuto Joomla 1.5 Installation| Utilisation| Personnalisation
    00:00 / 08:12
    HD
    fullscreen

Ce cours vidéo fait partie de la formation Apprendre Joomla 1.5 - Installation| Utilisation| Personnalisation

Détails de la formation

Enrichissement typographique avec Tuto Joomla 1.5 Installation| Utilisation| Personnalisation
Nous allons dans cette séquence parler de l’enrichissement typographique du contenu de vos articles. Nous allons pour cela utiliser au fur et à mesure de cette démonstration un pluging qui n’est pas existant dans l’installation par défaut de Joomla et qui s’appelle XTypo CSS, nous allons pour cela dans un nouvel onglet retourner sur Joomla.org, dans la partie extension et utiliser XTypo comme mot clé, nous sélectionnons le bouton download. C’est un pluging qui est à la fois compatible avec 1.0 et 1.5 natif, donc nous allons ici télécharger la version pour Joomla 1.5 et je vais donc ensuite procéder à l’installation dans la partie back-office, extensions, installer, désinstaller, parcourir, je l’avais enregistré sur le bureau donc je vais l’ouvrir et ensuite lancer l’installation. Comme tout pluging je vous rappelle, il faut penser à activer ses plugings, nous allons en faite ici non pas utiliser le bouton et le lien direct pour activer ce pluging, mais directement le faire depuis l’interface du réglage de ce pluging puisqu’il y a pas mal d’informations ici dont nous allons en parler. Dans un premier temps bien entendu nous allons activer ce pluging qui est l’équivalent du lien rapide que nous avions tout à l’heure. Et l’intérêt de ce pluging c’est qu’il contient un certain nombre de mis en forme déjà prédéterminé, vous avez quelques exemples dans le bandeau de gauche, avec par exemple ici une mise en évidence du texte à la fois avec le picto et également avec la bande jaune et les bordures orangées, vous avez des déclinaisons comme ceci différentes, vous avez d’autres exemples pour présenter du texte sous cet aspect là, vous avez d’autres exemples ici. Nous allons donc utiliser ce modèle-ci que nous allons infecter dans notre article à cette partie du descriptif de ce produit. Pour vous aider à identifier le code qu’il va falloir saisir, vous avez tout simplement dans l’exemple l’élément qu’il va falloir intégrer, comme tout pluging et tout code associé à ce pluging, le pluging va la plupart du temps être intégré entre accolades et souvent la fermeture de ce code va intervenir avec une barre de fraction, donc qui rappelle le début du code et qui simplement ici en terme de différence va se voir ajouter cette barre de fraction. Nous allons utiliser ce code pour nous en souvenir, il suffit tout simplement utiliser le press-papier pour cela, nous allons sauvegarder puis nous avions tout à l’heure activé ce pluging et nous retournons de suite dans l’article. Nous choisissons, non pas le paragraphe sur lequel nous souhaitons affecter ce réglage puisque la particularité du pluging est que nous allons encercler ce paragraphe du code qu’il nous a proposé tout à l’heure. Comme nous avons tout à l’heure mémorisé cela dans le presse-papier, nous allons à nouveau faire appel au presse-papier, encore appelons ce code et la fermeture de ce code se fait avec la même syntaxe si ce n’est que l’on rajoute la barre de fraction. Nous allons de suite faire un test de cette mise en forme, nous allons côté site, actualisé et vous constatez la différence de mise en forme. L’autre intérêt également de ce pluging c’est qu’il va vous permettre, si jamais je quitte cet article et que je retourne dans le réglage du pluging XTypo, il va vous proposer bien entendu d’autres variantes un petit peu sur le modèle que nous avons employé ici puisque, il est décliné en gris, en blanc, en bleu et également en rouge, donc à chaque fois vous avez un petit code différent. Là vous voyez que la différence se situe surtout au niveau du numéro qui va être employé et ce numéro est intéressant puisque tous les réglages qui sont issus ou la plupart des réglages qui sont issus de cette mise en forme vont être également présents sur le côté ici. Si jamais on veut aller rapidement à la ligne concernée, on peut utiliser le moteur de recherche de Firefox qui je vous rappelle, est disponible avec le raccourci clavier contrôle F, nous allons par exemple taper « rounded », suivant et donc vous avez le début ici du réglage, nous allons par exemple ici changer la couleur du texte qui dans notre exemple était en blanc, nous allons par exemple lui donner une couleur orangée, en tapant ce code hexadécimal, je reviens tout en haut de la liste, appliquer, je reviens sur mon site, j’actualise et voyez qu’automatiquement j’ai changé cette zone. Nous pouvons faire un autre test, je retourne dans XTypo et j’aurai souhaité par exemple mettre en évidence cet élément avec la partie du texte qui se trouve ici par exemple sur le titre. Nous repérons simplement le code associé, nous utilisons presse-papier, nous allons ensuite retourner dans l’article, nous allons intégrer le code sans sélectionner et à la fin du code nous ressaisissons ce code, toujours fermé d’une barre de fraction, nous appliquons les modifications, nous retournons sur le site, actualiser et voyez ici que le texte a été mise en évidence telle que nous le souhaitions. Vous voyez une mise en œuvre assez rapide puisqu’il me faudra simplement un laps de temps très court pour l’appliquer à nouveau sur un titre, plus bas, barre de fraction, je remonte sauvegarder, j’actualise, je reviens sur le site et voyez que j’ai uniformisé mon texte. Si vous aviez également quelques notions de CSS, vous pourriez directement depuis le code source de cet article faire quelques modifications. Nous allons par exemple sur le premier paragraphe dans le début est ici, vous avez déjà un élément style qui est passé dans et infecté au paragraphe que vous avez ici, on va rajouter simplement une ou deux petites fonctions, comme par exemple d’aller y intégrer une couleur de fond en rajoutant les deux points d’abord, le signe # ensuite et donc rajouter par exemple par un triple zéro du noir en fond et nous allons colorer le texte cette fois-ci en blanc et fermer par un point virgule. Le reflet est à l’immédiat dans l’aperçu nous allons quand même vérifier que sur le site que la formation soit à jour correctement et nous avons bien ici les modifications souhaitées.

Cette formation Joomla est également disponible dans les packs suivants

0 Notes et avis
Note moyenne:
5 5 0 1
1
Donnez votre avis sur la formation Apprendre Joomla 1.5 - Installation| Utilisation| Personnalisation !
Vous devez acheter cette formation pour écrire des commentaires