Ajouter et utiliser une police locale dans Cassiopeia ?

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • #16
    Bonjour,

    Tu as oublié de préciser pour les variables css que l'on doit ajouter dans le fichier fonts-local_nom_police.css à la fin de chaque fichier.
    C'est nécessaire pour que l'appel soit la configuration font-family soit prise en compte.

    Ce qui est intéressant avec les variables, c'est justement que la configuration dans template.css est dynamique.
    On peut donc définir couleurs, nom de police et autres valeurs soit par une feuille de style ou dans l'entête de page sans modifier template.css ou effectuer une surcharge.





    Joomla User Group (JUG) Lille : https://www.facebook.com/groups/JUGLille/

    Commentaire


    • #17
      Désolé, je n'y arrive pas et je ne trouve pas quelle est mon erreur. Les options sont bien présentes dans la liste des polices locales du style.
      La police est dans fonts/italianno-v16-latin-regular du dossier cassiopeia (media).
      Le fichier fonts-local est bien dans le dossier css/global de Cassiopeia (media), voir le fichier joint.
      Y aurait-il une erreur dans les noms ? car j'ai la police par défaut quand je choisis Italianno, y compris si je la force pour body dans l'inspecteur du navigateur.

      Oh, il y a un truc avec cette police ! alors que dans la démo Google c'est une police "handwriting" italique (ce qui est le cas pour le titre général sur un site que je dois migrer), c'est une police de type standard, et quand je force en italique, ça n'a rien à voir avec l'exemple chez Google.
      Il faut que j'en essaie une autre.
      fonts-local_italianno-v16-latin-regular.txt

      PS : même souci avec la police "Beau Rivage", de type handwriting aussi !
      PS 2 : pourtant, si j'appelle la police Google distante, elle est bien affichée !
      Fichiers joints
      Dernière édition par RobertG à 06/09/2022, 10h32
      "Patience et longueur de temps font plus que force ni que rage..." (La Fontaine : Le Lion et le Rat) - "Il n'y a pas de problèmes; il n'y a que des solutions" (André Gide).
      MoovJla et LazyDbBackup sur www.joomxtensions.com - FaQ sur www.fontanil.info - Site pro : www.robertg-conseil.fr et sites perso chez PlanetHoster + sites gérés chez PHPNET, 1and1 et OVH

      Commentaire


      • #18
        Dans le fichier fonts-local_nomdufichier.css, tu as indiqué le chemin

        src: url("../fonts

        Hors, tu peux confirmer avoir changé pour mettre le chemin exact vers les fichiers ?
        L'inspecteur du navigateur indiq

        Pour te repérer, tu détermine le repertoire où est stocké le fichier fonts-local_nomdufichier.css
        normalement c'est media\templates\site\cassiopeia\css\global
        Par rapport à ce chemin, tu remonte au repertoire parent css via ".." puis le repertoire cassiopeia en ajoutant ".." espacé par des slashs (barre oblique).
        puis tu indique le repertoire fonts ainsi que le sous-repertoire du nom de lafonte.

        Le chemin indiqué est donc relatif à l'emplacement du fichier css vers le repertoire de la fonte.

        Ainsi tu devrais avoir par exemple...
        url("../../fonts/roboto/Roboto-Regular.woff")

        exemple de fichier fonts-local_italianno.css :

        Code:
        /* italianno-regular - latin */
        @font-face {
        font-family: 'Italianno';
        font-style: normal;
        font-weight: 400;
        src: url('../../fonts/italianno-v16-latin-regular.eot'); /* IE9 Compat Modes */
        src: local(''),
        url('../../fonts/italianno/italianno-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../../fonts/italianno/italianno-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('../../fonts/italianno/italianno-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
        url('../../fonts/italianno/italianno-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../../fonts/italianno/italianno-v16-latin-regular.svg#Italianno') format('svg'); /* Legacy iOS */
        }
        
        :root {
        --cassiopeia-font-family-body: "Italianno", sans-serif;
        --cassiopeia-font-family-headings: "Italianno", sans-serif;
        --cassiopeia-font-weight-headings: 400;
        --cassiopeia-font-weight-normal: 400;
        }
        Dans le fichier templateDetails.xml, j'ai ajouté
        <option value="media/templates/site/cassiopeia/css/global/fonts-local_italianno.css">Italianno (local)</option>
        au niveau du groupe fonte local.

        Dans le cas de l'utilisation d'une police cursive, je te conseille de combiner avec une police sans serif pour le contenu principal (body) et d'utiliser la cursive uniquement pour les titres (headings) ce qui peut se faire en indiquant les paramètres des deux fontes dans le même fichier css.





        Joomla User Group (JUG) Lille : https://www.facebook.com/groups/JUGLille/

        Commentaire


        • #19
          Envoyé par RobertG Voir le message
          Désolé, je n'y arrive pas et je ne trouve pas quelle est mon erreur.
          Y aurait-il une erreur dans les noms ? car j'ai la police par défaut quand je choisis Italianno, y compris si je la force pour body dans l'inspecteur du navigateur.

          PS : même souci avec la police "Beau Rivage", de type handwriting aussi !
          PS 2 : pourtant, si j'appelle la police Google distante, elle est bien affichée !
          Testé avec succès avec italianno ( je t'ai indiqué le fichier fonts-local_italianno.css que j'ai utilisé dans le message précédent) ainsi que "beau rivage'

          Joomla User Group (JUG) Lille : https://www.facebook.com/groups/JUGLille/

          Commentaire


          • #20
            En effet, je me suis aperçu que le code récupéré avec la police nécessitait en fait de remonter de deux niveaux.
            Après correction, plus d'erreur, enfin !
            Il me restera à m'en souvenir dans la vraie vie, avec une série de sites à migrer en leur donnant le même look (exigences des clients...).

            Merc Yann !

            Mais je crois qu'en plus de potasser ton futur tuto sur Cassiopeia, il va me falloir reprendre de zéro l'apprentissage de CSS, de Grid, Flexbox, etc. A mon âge !

            Il faut maintenant que je m'attaque à l'insertion des polices dans le fichier editor.css, sachant qu'utilisateur de JCE depuis des années, je n'ai quasiment jamais eu à le paramétrer...
            "Patience et longueur de temps font plus que force ni que rage..." (La Fontaine : Le Lion et le Rat) - "Il n'y a pas de problèmes; il n'y a que des solutions" (André Gide).
            MoovJla et LazyDbBackup sur www.joomxtensions.com - FaQ sur www.fontanil.info - Site pro : www.robertg-conseil.fr et sites perso chez PlanetHoster + sites gérés chez PHPNET, 1and1 et OVH

            Commentaire


            • #21
              En ce qui concerne Astroid, la méthode est plus simple : ajout des fichiers woff et woff2 à la racine du dossier fonts, déclarations dans le fichier css/custom.css, et les polices apparaissent dans la liste en tant que polices personnalisées (ou custom fonts). Merci à Chacapamac pour ses conseils dans la discussion Github.
              "Patience et longueur de temps font plus que force ni que rage..." (La Fontaine : Le Lion et le Rat) - "Il n'y a pas de problèmes; il n'y a que des solutions" (André Gide).
              MoovJla et LazyDbBackup sur www.joomxtensions.com - FaQ sur www.fontanil.info - Site pro : www.robertg-conseil.fr et sites perso chez PlanetHoster + sites gérés chez PHPNET, 1and1 et OVH

              Commentaire


              • #22
                @robertg: tu n'est pas obligé d'utiliser editor.css. Ce fichier ne sert que pour les règles spécifiques à l'éditeur.
                Dans les paramètres de tinymce, tu peux indiquer directement le fichier user.css du template. Comme cela, les classes utilisées et personnalisées sont utilisable directement.
                Le fichier editor.css n'est à utiliser que si tu souhaites un affichage different pendant l'édition par exemple, la classe H1.title en rouge durent l'édition, et une fois édité et le contenu en ligne , la classe h1.title soit en vert(cas pour touts les documents déja édités).
                si tu souhaites utiliser le fichier editor.css, prépares en un spécifique pour chaque groupe d'utilisateurs et crées un set de paramètres pour chaque groupe.COmme cela chaque groupe auras ses propres spécificités d'édition..
                Un site pour comparer des solutions : https://comparatifs-informaticien51.joomla.com
                un site personnel, sur Joomla, linux, windows et Powershell : https://informaticien51.joomla.com/

                Commentaire


                • #23
                  Merci des infos lefabdu51 , mais pour le moment, j'ai renoncé à cette modification. Je reverrai peut-être la question plus tard en forçant peut-être certains styles spécifiques définis dans le user.css.
                  "Patience et longueur de temps font plus que force ni que rage..." (La Fontaine : Le Lion et le Rat) - "Il n'y a pas de problèmes; il n'y a que des solutions" (André Gide).
                  MoovJla et LazyDbBackup sur www.joomxtensions.com - FaQ sur www.fontanil.info - Site pro : www.robertg-conseil.fr et sites perso chez PlanetHoster + sites gérés chez PHPNET, 1and1 et OVH

                  Commentaire


                  • #24
                    J'apporte ici un complément d'informations à propos de l'affichage tinymce avec les styles du front sous Cassiopeia.

                    Dimitris Grammatiko, que l'on a rencontré au mois de mai 2022 lors du joomladay fr, a publié une amélioration de tinymce en "vrai wysiwyg" !

                    https://wysiwyg.dgrammatiko.dev/

                    Cette extension s'installe normalement et configuré pour le template Cassiopeia.
                    Dans la documentation, il explique comment utiliser cette fonctionnalité pour les autres templates.

                    RobertG N'hésite pas à nous faire un retour sur le sujet !
                    Au besoin tu peux aussi envoyer un PR sur le projet sur github ou indique ici sur ce fil et on le transmettra.
                    https://github.com/dgrammatiko/wysiwyg-tinymce-j4.1



                    woluweb aime ceci.
                    Joomla User Group (JUG) Lille : https://www.facebook.com/groups/JUGLille/

                    Commentaire


                    • #25
                      Envoyé par daneel Voir le message
                      J'apporte ici un complément d'informations à propos de l'affichage tinymce avec les styles du front sous Cassiopeia.

                      Dimitris Grammatiko, que l'on a rencontré au mois de mai 2022 lors du joomladay fr, a publié une amélioration de tinymce en "vrai wysiwyg" !

                      https://wysiwyg.dgrammatiko.dev/

                      Cette extension s'installe normalement et configuré pour le template Cassiopeia.
                      Dans la documentation, il explique comment utiliser cette fonctionnalité pour les autres templates.
                      Merci Yann de rementionner ça : j'avais vu passer mais j'avais oublié...

                      Je viens de tester sur un site qui n'utilise que Cassiopeia :
                      - j'ai installé
                      - le plugin est bien activé
                      - mais aucun effet ni en front, ni en back on dirait (même qd je mets son exemple de code mentionné dans la doc)

                      Ca fonctionne chez toi ?
                      Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

                      Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

                      Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

                      Commentaire


                      • #26
                        Envoyé par woluweb Voir le message
                        Ca fonctionne chez toi ?
                        oui cela fonctionne.

                        Sans le plugin "wysiwyg tinymce"



                        Avec "wysiwyg tinymce" installé, les fontes sont bien présentes dans le menu et les styles sont appliqués dans le contenu.
                        Cela correspond en tout point à la demande de Robert sur le sujet... et sans avoir besoin de gérer une feuille de style spécifique.



                        A noter que la feuille de style qui est utilisé est template.min.css, c'est à dire la version minifiée de template.css qui appelle les variables heading et body font family comme expliqué précédemment.

                        Les paramètres de style du template cassiopeia que le webmaster a choisi depuis l'administration du site sont donc bien repris dans l'éditeur et appliqué comme pour le front.


                        Joomla User Group (JUG) Lille : https://www.facebook.com/groups/JUGLille/

                        Commentaire


                        • #27
                          Ben mince.
                          Je prends son exemple de l infobox... puis rien !
                          Quel pourrait être le souci ? Je vois vraiment pas...
                          Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

                          Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

                          Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

                          Commentaire


                          • #28
                            Bonjour et merci !

                            Je confirme l'efficacité du plugin sur TinyMCE avec Cassiopeia. En revanche, après copie des fichiers du plugin sur les templates Astroid One et Zero, ça n'a rien changé dans l'éditeur.

                            Mais d'une part j'utilise JCE sur tous les sites dont je m'occupe, d'autre part j'ai pour le moment renoncé à ajouter des polices qui soient disponibles dans l'éditeur de texte.
                            "Patience et longueur de temps font plus que force ni que rage..." (La Fontaine : Le Lion et le Rat) - "Il n'y a pas de problèmes; il n'y a que des solutions" (André Gide).
                            MoovJla et LazyDbBackup sur www.joomxtensions.com - FaQ sur www.fontanil.info - Site pro : www.robertg-conseil.fr et sites perso chez PlanetHoster + sites gérés chez PHPNET, 1and1 et OVH

                            Commentaire


                            • #29
                              Envoyé par woluweb Voir le message
                              Quel pourrait être le souci ? Je vois vraiment pas...
                              N'ayant pas reproduit l'erreur, cela me semble difficile. Essaye de voir directement avec Dimitris.

                              Pour Robert, effectivement si c'est jce, on n'est plus dans l'objectif initial.
                              Au moins, on aura fait le tour de la question.


                              Dernière édition par daneel à 13/09/2022, 10h15
                              Joomla User Group (JUG) Lille : https://www.facebook.com/groups/JUGLille/

                              Commentaire

                              Annonce

                              Réduire
                              1 sur 2 < >

                              C'est [Réglé] et on n'en parle plus ?

                              A quoi ça sert ?
                              La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                              Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                              Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                              Comment ajouter la mention [Réglé] à votre discussion ?
                              1 - Aller sur votre discussion et éditer votre premier message :


                              2 - Cliquer sur la liste déroulante Préfixe.

                              3 - Choisir le préfixe [Réglé].


                              4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                              2 sur 2 < >

                              Assistance au forum - Outil de publication d'infos de votre site

                              Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                              Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                              Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                              UTILISER À VOS PROPRES RISQUES :
                              L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                              Problèmes connus :
                              FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                              Installation :

                              1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                              Archive zip : https://github.com/AFUJ/FPA/zipball/master

                              2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                              3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                              4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                              5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                              6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                              et remplacer www. votresite .com par votre nom de domaine


                              Exemples:
                              Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/
                              Pour executer le script: http://www..com/fpa-fr.php

                              Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/cms/
                              Pour executer le script: http://www..com/cms/fpa-fr.php

                              En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                              Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                              Voir plus
                              Voir moins

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X