Ajouter et utiliser une police locale dans Cassiopeia ?

[daneel]

Pour le complément d'information, ce que tu partages c'est ce que tu fais plus loin avec tes clients ou un service à venir?

Je le fais déjà avec mes clients mais je vais également le partager !

[herve]

Bonjour
daneel
Merci pour ces précisions.
En te lisant et me relisant, je m'aperçois que je n'étais pas clair. Quand je disais que je mettais tout dans un seul dossier, c'était celle du template enfant (même structure car je préférai stocker là sauf contre indication, sinon je disperse trop mes fichiers :-( )

Je disais aussi qu'en utilisant user.css , je n'ai pas touché à templateDetails.xml

Pour le chargement et l'ordre des polices, j'ai aussi lu https://developer.mozilla.org/fr/doc...text/Web_fonts
ou j'ai repris Helvetica, "Trebuchet MS", Verdana, sans-serif;
pour mettre maintenant dans le user.css en dessous de la déclaration des fontes

h1{
color: #fff;
font-weight: 700;
font-family: "Lobster Two", Helvetica, "Trebuchet MS", Verdana, sans-serif;
}

Pour le complément d'information, ce que tu partages c'est ce que tu fais plus loin avec tes clients ou un service à venir?

[daneel]

1/ thème enfant
après avoir suivi ton tuto, quand j'ys suis arrivé, j'ai tout mis dans le template enfant, juste pour regrouper tout ce que je fais dans un seul dossier que je sauvegarde plus facilement.
Est-ce que tu verrais une contre-indication ?

Je te déconseille de mélanger dans un seul repertoire vu que le template enfant fonctionne aussi avec le repertoire media exemple : \media\templates\site\cassiopeia\css\global\

La distinction entre le repertoire template et media permet de mettre les ressources en commun dans media ( css, etc.) donc plus simple à gérer entre template parent/enfant, des techniques de compression et de cache, ainsi que pour le référencement et les droits pour les robots d'indexation (robots.txt).

Si tu lis attentivement mon tutoriel, j'avais déjà commencé à expliquer dans une autre discussion en passant par user.css ( le point 2), l'alternatif (le point 3) correspond à la solution avec le template enfant donc on ne doit pas confondre ces deux solutions.

De mon avis, Tout dépend si tu est seul à gérer et que tu souhaite avoir qu'un seul style défini pour ton template alors la première solution (user.css) semble être indiqué. Si au contraire, tu souhaite proposer une selection en backend et étendre les fonctionnalités de joomla alors cette alternative en seconde solution (template enfant) est celle qui doit être utilisé. Cela te permet de comprendre le fonctionnement interne de cassiopeia.

Quand tu copie la css de google-webfont-helper, il te propose effectivement 1. la version qui offre le meilleur support ou 2. l'autre pour les navigateurs modernes donc uniquement les format woff et woff2.

Perso, je conserve pour l'instant le meilleur support (oet, ttf, woff, woff2..) pour des raisons de compatibilité car certains de mes clients ont des vieux macs qui ne souhaitent pas changer pour x raisons donc impossible pour eux de faire evoluer les navigateurs. C'est leur choix et je dois faire avec. (mais lls sont bien au courant des limites de leur os ). Parfois, j'interviens en sous-traitance d'un projet donc sans contact, je privilégie la compatiblité donc le meilleur support.

Dans ton code, il y a un mélange de deux fontes lobster et roboto. Roboto n'est pas une police système mais une police de google fonts qui n'est pas une alternative de lobster donc reprends le tuto notamment cette partie : https://forum.joomla.fr/forum/joomla...s-joomla/page2

Voilà !

Petit complément d'informations : Suite aux remarques et suggestions de Robert, j'ai travaillé sur l'amélioration de Cassiopeia de deux façons.

La première, c'est d'introduire un téléchargement de la liste de google font avec la clé api afin de selectionner et assigner le choix et style de caractères pour les balises titres (h1 à h6) et le corps principal (body) plus des styles spécifiques. Pour cela, j'ai ajouté un champ spécifique pouvant se répéter et le champ api pour la clé. C'est ce que l'on retrouve dans la plupart des frameworks de template actuels. Pour ce qui est de la copie en local, je laisse le plugin aldef s'en charger
https://forum.joomla.fr/forum/joomla...e-google-fonts C'est une solution que j'utilise pour mes templates bâtis sur le modèle de cassiopeia.

La deuxième solution, c'est de pouvoir installer une fonte comme on installe une extension. J'ai développé un service pour créer l'archive qui sera reconnue automatiquement par le template modifié (soit un template enfant de cassiopeia, soit un template "compatible" ayant déjà des fontes). L'incorporation de fontes est un dérivé de ce que j'ai fait avec le chargement d'archives généré avec fontello.com en glisser/déposer pour incorporer mes propes icônes (en plusieurs couleurs), en complément de font-awesome inclus dans joomla. Actuellement je développe des templates pour les proposer sur ce concept qui permet d'obtenir des exemples de sites indépendant de tous les service en ligne ( fontes, captcha, analytique, etc...).

[herve]

Bonjour
Bon ça y est je pense y être arrivé après quelques soucis.

daneel

1/ thème enfant
après avoir suivi ton tuto, quand j'ys suis arrivé, j'ai tout mis dans le template enfant, juste pour regrouper tout ce que je fais dans un seul dossier que je sauvegarde plus facilement.
Est-ce que tu verrais une contre-indication ?

2/ templateDetails.xml
dans ton tuto , j'ai fais la solution la plus simple
* copie des fontes
* copie de la déclaration des fontes recopiés de https://google-webfonts-helper.herokuapp.com puis l'affectation des h1 ... dans le user.css
je n'ai pas vu l'intérêt de mettre templateDetails.xml de ton 4). Du coup cette partie n'est-elle pas plutôt rattachés uniquement à 3) ?

3/ erreur de fonctionnement
J'avais repris un code d'exemple :

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: "Lobster Two", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 700; }

qui a ensuite fonctionnait avec

h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
font-family: "Lobster Two";
font-weight: 700;
}

est-ce qu'à tout hasard, tu vois un bloqueur?

4/ modern navigateur
Il ya qq années quand j'avai déjà regardé ce sujet, je me souvenais d'avoir vu que l'on pouvait privilégier les fichiers plus récent comme ".woff2" et négliger les anciens navigateurs pour ds raisons de performance. Qu’en penses-u

En fait, tu n'est pas loin de la solution. Je vais essayer d'expliquer la méthode utilisée dans Cassiopeia selon ma propre approche du problème, étape par étape

1) Par défaut, je vais chercher les polices dans google font via https://google-webfonts-helper.herokuapp.com/fonts
Je les insère dans des répertoires distincts portant le nom de chaque police directement dans le repertoire fonts dans les ressources media de cassiopeia

\media\templates\site\cassiopeia\fonts\nomdefonte

2) je personnalise la css en implantant directement le code css dans user.css
A ce niveau, je peux décider également d'assigner le choix des polices pour les balises titres, le contenu principal et d'autres classes personnalisées. Cela consiste simplement à indiquer la fonte ainsi que les polices de secours. C'est ce que j'ai expliqué dans la discussion sur l'implantation d'une police cursive.
https://forum.joomla.fr/forum/joomla...29#post2041929
Cette personnalisation ne permet pas de choisir dans les paramètres du template vu que l'on a effectué l'assignement dans user.css

3) Alternativement, si on veut que l'utilisateur puisse choisir la ou les polices, il faut oublier l'étape 2, pas de user.css et créer un template enfant dans la même logique que les créateurs de cassiopeia donc créer une css par fonte.

Sous notepad++, tu créé un nom de fichier indiquant fonts-local_nomdelafonte.css
Tu reprends les font-faces comme celle indiqué par https://google-webfonts-helper.herokuapp.com/fonts
en prenant soin de suivre le chemin vers la fonte donc logiquement, ce sera par exemple
url("../../fonts/nomdelafonte/nomdelafonte.woff")

Le fichier sera sauvegardé dans

\media\templates\site\cassiopeia\css\global\fonts-local_nomdelafonte.css

L'astuce sera alors d'editer ce même fichier et d'ajouter après les font-face, le paramétrage de choix de fonte pour les balises titres (heading 1 à h6) et le corps de la page (body) en utilisant les variables css utilisés par cassiopeia ! ce qui donne :

:root {
--cassiopeia-font-family-body: "nomdelafonte", sans-serif;
--cassiopeia-font-family-headings: "nomdelafonte", sans-serif;
--cassiopeia-font-weight-headings: 600;
--cassiopeia-font-weight-normal: 300;
}

le nom de la fonte est celui que l'on a défini dans le fichier à font-family.
le weight étant l'épaisseur défini également dans le font-face.

Si on a qu'une seule fonte pour les titres et le corps de la page alors ce sera le même nom mais si vous avez besoin de définir une combinaison de deux polices de caractères alors il faudra ajouter les font-face des deux fontes.

Vous pouvez créer autant de fichier fonts-local_nom.css que vous voulez, du moment que les fichiers soient bien disponibles dans le dossier fonts et que chaque fichier respecte cette structure font-face + variables css assignant le choix pour les balises titres hx et le corps.

4) Dernière étape, on edite le templateDetails.xml du template enfant en ajoutant le nom des fichiers css créés dans l'étape 3 à la ligne 98 comme pour roboto,

<option value="media/templates/site/cassiopeia/css/global/[B]fonts-local_nom.css[/B]">Nom de la police ou de la combinaison</option>

...

[daneel]

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.

[RobertG]

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.

[woluweb]

Ben mince.
Je prends son exemple de l infobox... puis rien !
Quel pourrait être le souci ? Je vois vraiment pas...

[daneel]

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.

[woluweb]

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 ?

[daneel]

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

[RobertG]

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.

[lefabdu51]

@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..

[RobertG]

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.

[RobertG]

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...

[daneel]

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'