THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

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

Offline

#1 [TUTO] Personnaliser son template Thélia

(01-03-2017 21:50:08)

*** Personnaliser son template Thélia ***

  1. Créer son dossier de template perso :

    faites une copie du dossier <root>/templates/frontOffice/default
    renomez le en <root>/templates/frontOffice/demo

  2. Selectionnez le template à modifier sur le FontOffice :

    -->BackOffice/configuration/gestion des variables :
    | Nom du modèle de front-office actif | active-front-template | demo |

  3. Passer Thélia en mode dev :

    -->BackOffice/configuration/gestion des variables :
    | Compiler les ressources du modèle actif à chaque changement (1 = oui, 2 = non) | process_assets | 1 |

    Modifiez le fichier <root>/templates/frontOffice/demo/layout.tpl

    remplacez 

    {declare_assets directory='assets/dist'}

    par 

    {declare_assets directory='assets/src'}

    remplacez

    {default_translation_domain domain='fo.default'}

    par 

    {default_translation_domain domain='fo.demo'}

    remplacez 

    {stylesheets file='assets/dist/css/thelia.min.css'}
            <link rel="stylesheet" href="{$asset_url}">
          {/stylesheets}

    par 

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

    Modifiez le fichier <root>/templates/frontOffice/demo/ajax/order-delivery-module-list.html

    remplacez

    {default_translation_domain domain='fo.default'}

    par 

    {default_translation_domain domain='fo.demo'}

    Modifiez le fichier <root>/templates/frontOffice/demo/includes/addedToCart.html

    remplacez

    {default_translation_domain domain='fo.default'}

    par 

    {default_translation_domain domain='fo.demo'}

  4. Accéder à la page en mode dev : 

    http://mon-thelia/index_dev.php

  5. Dossiers de travail :

    <root>/templates/frontOffice/default/assets/src/less

        /vendors = framework : les ressources externes (bootstrap, etc.)
        /theme = visuels : spécialisation des styles bootstrap, et définitions des styles spécifiques Thelia
        /thelia = structures : positionnements et dimensionnements

  6. Faites vos modifications …………………………………

  7. Repassez en mode Prod

    -->BackOffice/configuration/gestion des variables :
    | Compiler les ressources du modèle actif à chaque changement (1 = oui, 2 = non) | process_assets | 0 |
    Enjoy

  8. Ressources :
    THELIA Forum
    THELIA Doc
    THELIA School

Last edited by AnTeBiOs (04-03-2017 21:06:20)

Offline

#2 Re: [TUTO] Personnaliser son template Thélia

(01-03-2017 22:05:57)

Super, merci !

J'ajouterais un point : remplacer les occurences de {default_translation_domain domain='fo.default'} par {default_translation_domain domain='fo.demo'}, en principe dans layout.tpl, ajax/order-delivery-module-list.html et includes/addedToCart.html

Si vous voulez pouvoir basculer simplement d'un template à l'autre sans passer par le back office, voyez le module TemplateSwitcher: https://github.com/roadster31/TemplateSwitcher

OpenStudio Toulouse

Offline

#3 Re: [TUTO] Personnaliser son template Thélia

(01-03-2017 22:21:10)

Merci,

j'ai corrigé smile

Offline

#4 Re: [TUTO] Personnaliser son template Thélia

(02-03-2017 11:56:48)

Merci pour le mode d'emploi smile

Petit truc agaçant : certaines traductions (celles de la footer-banner notamment) ne sont pas francisées lorsque l'on utilise cette méthode --> il faut repasser par la traduction des libellés.

Last edited by Triumph31 (02-03-2017 13:10:49)

Offline

#5 Re: [TUTO] Personnaliser son template Thélia

(02-03-2017 13:22:09)

Petite question : est-il normal qu'il reste encore quelques références au dossier "assets/dist" dans la page layout.tpl ? Notamment le logo.

Offline

#6 Re: [TUTO] Personnaliser son template Thélia

(02-03-2017 16:32:34)

Les assets du template de base de Thelia sont générés par Grunt (http://gruntjs.com/) à partir du dossier src, pour constituer le dossier dist. Le principe est expliqué dans cet article de Thelia School : http://thelia-school.com/utiliser-grunt … helia.html

En développement, 2 solutions :

1) Utiliser le principe du tuto ci-dessus, qui utilise le traducteur LESS intégré à Thelia pour générer le CSS. Comme le CSS est généré dans src, il faut donc référencer src/less dans le template pour pouvoir utiliser le résultat de la génération. Ça a aussi un impact sur les ressources utilisées dans les fichiers less (images, polices, etc.), qui doivent se trouver dans src.
Comme dist et src ont des structures quasi identiques, ça fonctionne bien, mais on utilise finalement que le dossier src, et en toute rigueur, il faudrait supprimer les références à dist dans le template.

2) Utiliser grunt sur la machine de développement (et notamment la tache watch ...) qui permet de générer le dossier dist à dès qu'un des fichiers de src est modifié. Dans ce cas, il n'est pas nécessaire de modifier les chemins qui figurent dans le template. C'est la solution que je préfère, mais elle nécessite un grunt watch qui tourne dans une console.

OpenStudio Toulouse

Offline

#7 Re: [TUTO] Personnaliser son template Thélia

(04-03-2017 18:18:40)

Merci pour ces infos,

voilà qui est plus clair !

j'ai corrigé le post d'origine.