THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

Rejoignez la communauté sur le Discord Thelia : https://discord.gg/YgwpYEE3y3

Offline


Bonsoir,
Comment change t'on la police principale d'un thème? Par exemple je souhaite utiliser la police du backoffice en frontoffice, j'agis ou?

Last edited by PLG (31-03-2020 13:13:57)

Offline


Le template "default" de Thelia utilise Open Sans tel que défini dans templates/frontOffice/default/assets/src/css/thelia.css. Tu peux modifier la police directement dans ce fichier (en dupliquant le dossier pour créer ton propre template).

Autre approche surcharger le style de la balise body dans ton propre fichier CSS.

Offline


Merci NOG pour la piste mais cela ne fonctionne pas du tout, aucune action sur le changement de police en chargeant la balise Body. J'utilise le template Spiced en mode dev mais rien n'y fait. Le css de l'admin semble utiliser la même police mais l’apparence est différente. Je vais insister car la police bien que très lisible n'est pas sympa.

Offline


Apparemment lorsque je fais une modif sur mon css de templates/frontOffice/default/assets/src/css/thelia.css ce n'est pas ce dernier qui est pris en compte pour générer le css des assets lorsque je vide le cache ou non mais celui de template-assets/assets/...
Une explication pour expliquer pourquoi ce n'est pas le fichier thelia.css qui sert de modèle au css des assets?

Last edited by PLG (29-03-2020 15:56:47)

Offline


J'ai réussi à changer la police du template Spiced de Lora vers Montserrat en procédant ainsi :

Méthode 1 :
Dans templates/frontOffice/spiced/assets/dist/css/thelia.min.css j'ai remplacé

@import url(http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic);

par

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

et remplacé toutes les occurrences de Lora par Montserrat dans ce même fichier.


Méthode 2:
Créer un fichier police.less contenant le code suivant:

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

body {
	font-family: 'Montserrat', sans-serif;
}

et modifier le fichier layout.tpl en ajoutant

    {stylesheets file='assets/src/less/police.less' filters='less'}
        <link rel="stylesheet" href="{$asset_url}">
    {/stylesheets}

au niveau de la ligne 75 par exemple

Méthode 3 :
Replacer dans templates/frontOffice/spiced/assets/src/less/theme/variables.less

ligne 2 @import url(http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic);
...
ligne 26 @font-family-sans-serif:            'Lora', sans-serif;

par

ligne 2 @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
...
ligne 26 @font-family-sans-serif:            'Montserrat', sans-serif;

et dans templates/frontOffice/spiced/layout.tpl, remplacer

    {stylesheets file='assets/dist/css/thelia.min.css'}
        <link rel="stylesheet" href="{$asset_url}">
    {/stylesheets}
    {*
     If you want to generate the CSS assets on the fly, just replace the stylesheet inclusion above by the following.
     Then, in your back-office, go to Configuration -> System Variables and set process_assets to 1.
     Now, when you're accessing the front office in developpement mode (index_dev.php)  the CSS is recompiled when a
     change in the source files is detected.

     See http://doc.thelia.net/en/documentation/templates/assets.html#activate-automatic-assets-generation for details.

    {stylesheets file='assets/src/less/thelia.less' filters='less'}
        <link rel="stylesheet" href="{$asset_url}">
    {/stylesheets}

    *}

par

    {stylesheets file='assets/dist/css/thelia.min.css'}
        <link rel="stylesheet" href="{$asset_url}">
    {/stylesheets}
    {*
     If you want to generate the CSS assets on the fly, just replace the stylesheet inclusion above by the following.
     Then, in your back-office, go to Configuration -> System Variables and set process_assets to 1.
     Now, when you're accessing the front office in developpement mode (index_dev.php)  the CSS is recompiled when a
     change in the source files is detected.

     See http://doc.thelia.net/en/documentation/templates/assets.html#activate-automatic-assets-generation for details.

    *}
    {stylesheets file='assets/src/less/thelia.less' filters='less'}
        <link rel="stylesheet" href="{$asset_url}">
    {/stylesheets}

Offline


J'ai suivi les différentes pistes comme précisé et sans succès pour les 2 premières solutions par contre j'ai regardé le fiché variables.less dans le dossier theme/ et la première ligne est une importation  de ce type @import url(http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic); je l'ai changé par la police adéquate et ça a fonctionné. Merci NOG pour les différentes pistes.
Que d'effort pour un changement de police.
Les méandres de la simplicité sont bien  compliquées.

Offline


"...par contre j'ai regardé le fiché variables.less dans le dossier theme/ et la première ligne est une importation  de ce type @import url(http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic); je l'ai changé par la police adéquate et ça a fonctionné..."

C'est ce que j'indique dans la méthode 3 ;-)

Cela peut paraître compliqué mais il s'agit simplement de retrouver ses petits dans le code du template que tu n'as pas défini. Se plonger dans du code écrit par quelqu'un d'autre demande toujours un petit effort.

L'autre possibilité est de définir ton propre template à partir de zéro ;-)

Thelia 2.4 introduit la notion "d'héritage" de template qui devrait faciliter le développement et la personnalisation surtout de template.

Offline


Oui, oui, ce que je voulais dire c'est que je n'ai fait que ça de la méthode 3.