[RÉGLÉ] Helix3 : utilisation de fichiers LESS

[Visiteur]

Slt

Je me suis fait une installation pour apprendre a utiliser Helix3 et je vais aussi en profiter pour apprendre a utiliser LESS. J'ai regarde plusieurs tuto sur le net et j'ai compris l'idee. Sauf que pour mettre en pratique avec Helix3 je ne vois pas comment faire.

Dans l'administration de Helix3, Compiler de LESS vers CSS je suppose que c'est mieux de mettre sur Oui ?

J'ai un fichier custom.css qui me permettra de ne rien perdre a la prochaine mise a jour d'Helix3. J'aimerais utiliser LESS, mais je ne vois pas comment le mettre en place.

Quant j'ai lu les tutos sur LESS c'etait super clair, mais la c'est beaucoup moins clair pour l'utiliser

Merci d'avance pour votre aide.

[lomart]

Re : Helix3 : utilisation de fichiers LESS

Bonsoir,

Par défaut, Helix charge le fichier custom.css s'il existe dans son dossier css. Si on demande la compression des css, il est inclus dedans.
Dans ton cas, la bonne nouvelle est que cela ne chage rien à tes habitudes.

Si tu veux compiler un fichier custom.less en custom.css. Il faut le demander avec un plugin comme Less compiler

[Visiteur]

Re : Helix3 : utilisation de fichiers LESS

J'ai installe le plugin et fait un test. Sauf que le plugin fait beuger le site. Je vais deja explique comment j'ai fait mon test.

J'ai donc fait un fichier custom.less dans templates\shaper_helix3\less. J'ai deja le fichier custom.css dans templates\shaper_helix3\css. Pour la page test j'ai fait ce code HTML :

<p>Pellentesque habitant morbi tristique senectus et netus et <span id="test-less-01">LESS 01 praepositus cubiculi missus</span> malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. <span id="test-less-01">LESS 01 Quisque sit amet est et sapien</span> ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. <span id="test-less-02">LESS 02 Pellentesque habitant morbi</span></p>

Pour le CSS :

#test-less-01 {
	font-size:@taille-texte-01;
	color:@couleur-texte-01;
	font-weight:bold;
}

#test-less-02 {
	font-size:@taille-texte-02;
	color:@couleur-texte-02;
	font-weight:bold;
}

Pour le LESS :

// ID test-less-01
@couleur-texte-01 : #f00 ;
@taille-texte-01: 1em ;

// ID test-less-02
@couleur-texte-02 : #a38200 ;
@taille-texte-02: 2em ;

Les reglages de Less Compiler :


Mais quant j'actualise ma page test elle devient blanche avec plus rien dedans. Si je desactive le plugin la page redevient normale .

Par contre ce que je n'arrive pas a comprendre, c'est que si le plugin est desactive la compilation ne se fait pas, ca ok. Mais mon custom-less devrait etre pris en compte puisque Helix3 utilise le LESS.

[lomart]

Re : Helix3 : utilisation de fichiers LESS

L'unique fichier à créer est le fichier custom.less avec dedans

// ID test-less-01
@couleur-texte-01 : #f00 ;
@taille-texte-01: 1em ;

// ID test-less-02
@couleur-texte-02 : #a38200 ;
@taille-texte-02: 2em ;

#test-less-01 {
    font-size:@taille-texte-01;
    color:@couleur-texte-01;
    font-weight:bold;
}

#test-less-02 {
    font-size:@taille-texte-02;
    color:@couleur-texte-02;
    font-weight:bold;
}

Ensuite pour LESS Compiler, si l'on veut compiler custom.less, il est préférable de le dire ... sur la copie d'écran je vois template.less

[Visiteur]

Re : Helix3 : utilisation de fichiers LESS

Haaaa le code CSS et le code LESS doivent etre dans le meme fichier LESS !!!! deja ca c'est plus clair. Pour LESS Compiler, template.less c'est pour le template admin, alors que moi c'est pour le template du site que je veux faire la compilation.

[lomart]

Re : Helix3 : utilisation de fichiers LESS

Haaaa le code CSS et le code LESS doivent etre dans le meme fichier LESS !!!! deja ca c'est plus clair.

Le principe est que le fichier LESS sert a créer un fichier CSS

Pour LESS Compiler, template.less c'est pour le template admin, alors que moi c'est pour le template du site que je veux faire la compilation.

Exact, j'avais lu trop vite. Donc c'est OK

[Visiteur]

Re : Helix3 : utilisation de fichiers LESS

Le principe est que le fichier LESS sert a créer un fichier CSS

En fait j'avais pas compris comme ca dans les tutos que j'ai regarde. Maintenant c'est plus clair. Merci pour ton aide

Edit : pour la page blanche quant LESS Compiler esy actif, je vis ouvrir une nouvelle discution.

[lomart]

Re : Helix3 : utilisation de fichiers LESS

pour la page blanche quant LESS Compiler esy actif, je vis ouvrir une nouvelle discution.

En ce qui concerne LESS compiler, c'est une extension fiable. Du moins à l'époque où j'ai fait la traduction française.

Il faut isoler le coupable :
1-Teste ton code LESS par un copier-coller sur ce site http://winless.org/online-less-compiler pour vérifier sa validité.
2-met un fichier less minimal du genre .foo {color:#000;} pour tester l'extension

[Visiteur]

Re : Helix3 : utilisation de fichiers LESS

Interessant ton lien ! Je me le met de cote ca pourra servir . Mon code est bon et pour le fichier less minimal c'est le fichier custom.less avec uniquement ce code :

@couleur-texte-a : #000 ;
@couleur-texte-b : #a38200 ;

@taille-texte-a: 1.5em ;

.test-less-01 {
    font-size:@taille-texte-a;
    color:@couleur-texte-a;
	font-style:italic;
}

.test-less-02 {
    font-size:@taille-texte-a;
    color:@couleur-texte-b;
	font-weight:bold;
	font-style:italic;
}

Mais je doit avoir un souci quelque part avec le less (ou autre chose) car la mise en forme n'est pas prise en compte. Que ce soit le code less ou css (celui se trouvant dans le fichier custom.css). Meme si je purge le cache de joomla et de mon navigateur et que je purge les fichiers expires.

Je remet mon code html car j'ai fait quelque modif par rapport au 1° :

<p>Pellentesque habitant morbi tristique senectus et netus et <span class="test-less-01">LESS 01</span> malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. <span class="test-less-01">LESS 01</span> ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. <span class="test-less-02">LESS 02</span>
</p>

Edit : j'ai fait un test en mettant le code less dans le fichier theme.less, mais c'est pareil.

Edit 02 : rectification, en mettant le code dans le fichier theme.less ca marche !

Edit 03 : concernant le probleme avec le plugin j'ai fait une nouvelle discution.