THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

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

Offline

#1 Problème css

(16-02-2018 00:30:56)


Bonsoir,

Bon, je sais que ce n'est visiblement pas comme ça qu'il faut faire, mais jusqu'à présent, j'ai toujours modifié mon style css en modifiant le fichier qui porte un nom avec plein de lettres et de chiffres mélangés, en .css, se trouvant dans web/assets/frontOffice/blabla/template-assets/assets/css.

Jusqu'à présent ça a toujours fonctionné.

Mais désormais, dès que je modifie ne serait-ce qu'un chiffre dans ce fichier, toutes les modifications que j'avais apporté à ce fichier disparaissent (couleurs, polices, tailles de texte, etc...), et je suis obligée de le supprimer dans FileZilla et de le réimporter depuis ma sauvegarde sur mon pc (et de vider mon cache de navigateur) pour que tout revienne à la normale.

Alors j'ai bien compris que ce n'est pas la façon de faire, que je suis censée modifier les fichiers .less se trouvant ici : web/assets/frontOffice/blabla/template-assets/assets/less
Mais le soucis, c'est que quand je suis sur ma page, dans mon navigateur et que j'utilise DevTools en faisant un clic droit sur l'élément que je veux modifier, il m'indique la ligne à modifier dans ce fameux fichier dont le nom est composé de lettres et de chiffres. Et c'est bien pratique !

Du coup y a-t-il une solution à mon problème?
Comment continuer à modifier ce fichier sans tout perdre à chaque fois?

Ou alors comment faire pour que DevTools m'indique la ligne à modifier dans les fichiers .less ?

Bonne soirée/nuit !

Last edited by Frugi (16-02-2018 00:31:25)

Offline

#2 Re: Problème css

(16-02-2018 08:42:08)


c'est bien les less qui faut modifier, perso j'utilise grunt dans le terminal, et ca générera automatiquement les css
thelia-school.com/utiliser-grunt-et-bow … helia.html
attention a faire l'adaptation du tuto, le template a un peut changé depuis

un autre poste util
forum.thelia.net/viewtopic.php?pid=72194

Last edited by gimly (16-02-2018 08:43:12)

Offline

#3 Re: Problème css

(16-02-2018 09:01:39)


En fait il ne faut pas modifier les fichiers dans /web qui sont des versions mises en caches des fichiers du template il me semble.

Il faut modifier les fichiers dirrectements dans ton template qui se trouve ici : /templates/frontOffice/nomdetomtemplate/assets

Offline

#4 Re: Problème css

(16-02-2018 13:51:39)


@gimly, j'ai réussi à installer Grunt et Bower (sans trop savoir à quoi ça sert ^^"), mais pour ce qui est de la partie "Inclure Grunt et Bower dans Thelia", je patauge...
Quand ils indiquent: "Grâce à votre terminal, placez-vous dans le repertoire des templates du frontoffice :", de quel terminal ils parlent? (c'est quoi un terminal? oO)
Je suis censée taper "cd templates/frontOffice/" dans Node.js ?

Offline

#5 Re: Problème css

(16-02-2018 13:57:13)


tu est sur quel système d'exploitation ?

si tu te demandes ce qu'est le terminal, grunt n'est pas pour toi je pense

Offline

#6 Re: Problème css

(16-02-2018 14:05:02)


Windows 8.1...

Oui, je suis clairement une noob...
C'est pour ça que modifier une feuille de style en .css ou .less me semblait le plus simple pour moi.
J'ai réussi à obtenir le rendu que je voulais en trifouillant sur le net pour trouver comment faire.

Mais mis à part modifier ou créer un fichier .html, .less ou .css, mes compétences s'arrêtent clairement là...

Offline

#7 Re: Problème css

(16-02-2018 14:12:18)


pour faire simple grunt est un mini logiciel en ligne de commande qui permet de faire une reduction/compilation de tes css/less

si tu n'en est pas la passe a la 2 eme solution, que je n'utilise pas, donc il faudra te dépatouiller seul ou avec une autre personne

Offline

#8 Re: Problème css

(16-02-2018 19:19:00)


Thelia permet de compiler à la demande les fichiers LESS pour produire un fichier CSS. Pour ce faire il faut suivre la méthode suivante :

1) Travailler en mode développement, comme on devrait toujours le faire quant on fabrique une boutique Thelia 2. Voir ici comment ça marche : http://forum.thelia.net/viewtopic.php?id=11787
2) Dans la configuration, positionner la variable process_assets à 1, que qui indique à Thelia qu'il doit surveiller les modifications apportées aux assets. Na pas oublier de la remettre à 0 une fois en production, ça consomme de la ressource.
3) Dans le fichier layout.tpl, remplacer {stylesheets file='assets/dist/css/thelia.min.css'} par {stylesheets file='assets/src/less/thelia.less' filters='less'}, ce qui veut dire qu'on va compiler thelia.less chaque fois que ce fichier ou une de ses dépendances sera modifiée.
4) Toujours dans layout.tpl, modifier {declare_assets directory='assets/dist'} en {declare_assets directory='assets/src'}. Pour info, cette fonction permet de copier tous les assets statiques (fonts, images, js, etc.) dans le cache qui est dans web/assets.

Et voilà ! Chaque modification dans un fichier less sera automatiquement prise en compte.

Inconvénients de cette méthode :

1) la compilation des LESS consomme pas mal de ressources, du coup, chaque modif de style est un peu laborieuse si votre site ne tourne pas sur une machine puissante. C'est d'ailleurs en partie pour ça qu'on préfère générer les assets différemment, avec grunt ou webpack, qui permettent de faire bien plus que de juste compiler du less.

2) On doit désormais travailler dans le dossier assets/src, et non plus dans assets/dist. Du coup, même en prod, on va rester dans assets/src. Ce n'est pas forcément un problème, mais il faut bien garder ça à l'esprit et ne plus faire de modifs dans assets/dist.

Les détails sont dans la doc : http://doc.thelia.net/en/documentation/ … generation

Sur Windows, pour les allergiques à la console, une autre solution pour compiler à la demande les fichiers less est d'utiliser WinLess ( http://winless.org/ ) qui lui aussi permet de surveiller les répertoires des assets et de génère un fichier css à partir d'une collection de fichiers less.

Pour les pas allergiques à la console qui ne veulent pas utiliser grunt, vous pouvez installer node.js, npm, et less.js : http://lesscss.org/, avec en:prime less-watch-compiler pour surveiller les changements et compiler automatiquement. Mais bon, si bous savez déjà faire ça, autant utiliser grunt.

J'épingle ici une version un peu enrichie de ce post : https://forum.thelia.net/viewtopic.php?id=12838


OpenStudio Toulouse

Offline

#9 Re: Problème css

(16-02-2018 20:52:23)


Merci pour ta réponse claire et précise @Roadster31 !

Quand tu dis "Dans la configuration, positionner la variable process_assets à 1", tu veux dire dans le BO ?

Si oui j'ai un problème, je ne me souviens plus du tout de mon mot de passe...
Du coup j'ai suivi ton conseil trouvé ici :
http://forum.thelia.net/viewtopic.php?id=6116
Dans PhpMyAdmin, j'ai modifié la table admin : j'ai mis un nouveau mot de passe à la ligne password, et dans le menu déroulant à côté, ai choisi PASSWORD, puis ai fait "exécuter".
Mais rien à faire, j'ai recommencé l'opération 10 fois avec des mdp et/ou login différents dans PhpMyAdmin, je n'arrive pas à me connecter à mon BO...
Est-ce qu'il faut un mot de passe particulier? Du style avec un nombre précis de majuscules, chiffres et caractères spéciaux ?
Je ne comprends pas pourquoi je n'arrive pas à me connecter -_-

Offline

#10 Re: Problème css

(16-02-2018 22:43:52)


Oui, la variable se trouve dans le BO -> Configuration -> Gestion des variables (ou Paramètres de configuration en 2.3.4).

Pour des raisons de sécurité, tu ne peux pas modifier un mot de passe directement en base de données, les mots de passe sont en fait calculés par Thelia, et non plus par la fonction PASSWORD() de MySQL.

Tu peux par contre utiliser dans une console la commande php Thelia admin:updatePassword  pour mettre en place un nouveau mot de passe. Exemple sur windows (en supposant que tu as php dans ton PATH) pour attribuer un nouveau mot de passe à l'utilisateur "admin" :

Z:\Thelia2\thelia>php Thelia admin:updatePassword admin --password=tartemuche46

admin admin password updated
new password is : tartemuche46

OpenStudio Toulouse