Méthode pour surcharger un template sans changer ses fichiers d'origine ?

**RobertG** · 07/09/2014, 15h59

Re : Méthode pour surcharger un template sans changer ses fichiers d'origine ?

Bienvenue !

En général, un template Joomla! ne se met pas à jour.
Si tu fais des modifications, tu as intérêt à les noter pour le cas où l'auteur du template proposerait une mise à jour, afin de pouvoir les reproduire.

**graphozzie1068** · 07/09/2014, 18h12

Re : Méthode pour surcharger un template sans changer ses fichiers d'origine ?

Merci pour cette réponse rapide !

**PhilJ** · 07/09/2014, 18h13

Re : Méthode pour surcharger un template sans changer ses fichiers d'origine ?

Bonsoir,

Envoyé par RobertG Voir le message

En général, un template Joomla! ne se met pas à jour.

...C'est très optimiste — ou trop général.

Un template est un logiciel. Il est normal qu'il soit mis à jour (il = le template lui-même et / ou le framework, s'il en utilise un).

Exemple récent de gros souci : mise à jour de Joomla => 2 sites Joomla 3.x en vrac avec le template JSN Boot (page blanche

). => Obligation de mettre à jour le template.

**PhilJ** · 07/09/2014, 19h28

Bonsoir,

Envoyé par graphozzie1068 Voir le message

J'ai bien compris la méthode de la surcharge qui permet aux fichiers d'un template de "prendre le pas" sur des fichiers de Joomla, ce qui permet de ne pas perdre mes modifications quand Joomla sera mis à jour. Je compte utiliser un template acheté et le modifer. Mais si je modifie directement les fichiers du template acheté, je perdrai ces modifications en cas de mise à jour du template. Est-ce qu'il existe une procédure équivalente sous Joomla ?

...Comme on dit : bonne question !

Afin d'éviter toute (mauvaise) surprise, on peut se donner comme règle de ne JAMAIS modifier aucun des fichiers originaux du template et / ou des autres extensions.

Concernant les modifications de styles : quasi-inévitables, même sur des projets modestes, elles se font surtout en CSS (même si des surcharges des « vues » sont souvent possibles en PHP / HTML).

La solution consiste en premier lieu à centraliser toutes les modifications (de toutes les extensions utilisées aussi bien que du template installé) dans une seule feuille de style CSS.

Il existe nombre de plugins Joomla qui permettent d'injecter une telle feuille de style (souvent nommée custom.css) à la volée.

Ce qui, à mon avis, différencie ces diverses extensions les unes des autres, c'est leur capacité ou incapacité à cibler l'endroit du code source final des pages où l'appel à la feuille de style sera inséré. Sur le principe de « c'est le dernier qui parle qui a toujours raison », si l'injection se fait un peu au hasard / au beau milieu des balises <HEAD>, certaines directives personnalisées seront ignorées car écrasées par les directives suivantes.

Pour mieux comprendre ce souci potentiel, voyez cet exemple :

<head>

...
<link rel="stylesheet" href="templates/mon-template/css/custom.css" type="text/css" />
...
<link rel="stylesheet" href="templates/mon-template/css/template.css" type="text/css" />
...

</head>

La feuille originale template.css étant chargée après la feuille de personnalisation, ce sont ses directives qui vont être prises en compte, et les personnalisations seront purement et simplement ignorées.

...Sauf si l'on ajoute l'attribut !important au directives en question dans le custom.css.

Par exemple, avec l'ordre de chargement évoqué ci-dessus, si le template.css contient :

p {

font-size: 12px;

}

la modification :

p {

font-size: 14px;

}

dans le custom.css n'aura aucun effet :-\

=> Il sera nécessaire de « crier plus fort », avec :

p {

font-size: 14px !important;

}

Mais : (1°) le procédé est lourd, surtout s'il faut ajouter l'attribut !important un peu partout dans le custom.css, et (2°) il peut aussi arriver, toujours en considérant le même ordre de chargement des feuilles de style, que le template.css comporte déjà une ou des directives avec !important.

Par exemple, si l'on a :

Dans le template.css :

p {

font-size: 12px !important;

}

L'instruction qui suit dans le custom.css ne sera pas prise en compte :

p {

font-size: 14px !important;

}

C'est pourquoi l'idéal n'est pas d'utiliser l'attribut !important.

Ma solution : utiliser le petit plugin 'Head and Body'. Il est gratuit moyennant un 'Like' chez Facebook : http://www.openpotion.com/website-de...oomla/#plugins.

Son intérêt : (1°) comme beaucoup d'autres plugins de cette sorte, il permet d'injecter n'importe quel code (= appel à un fichier CSS, Javascript, HTML...) dans les pages, mais (2°) il se démarque des autres par son intelligence. Il rend en effet possible de choisir l'endroit du code source des pages où le code sera injecté.

En particulier, il permet d'injecter l'appel à une feuille de style juste avant la fermeture </HEAD>, lui assurant ainsi d'être mieux « entendue » — ou même d'être à 100 % efficace sans utiliser un seul !important.

=> Comparez le résultat ci-après, dans lequel la feuille custom.css est chargée en tout dernier, avec l'ordre incertain évoqué plus haut :

<head>

...
<link rel="stylesheet" href="templates/mon-template/css/template.css" type="text/css" />
...
<link rel="stylesheet" href="templates/mon-template/css/custom.css" type="text/css" />

</head>

Bonne soirée,

PhilJ

**lefabdu51** · 07/09/2014, 22h14

Re : Méthode pour surcharger un template sans changer ses fichiers d'origine ?

le plus simple est encore de copier ton template sous un autre nom et ensuite travailler sur cette version.

Comme cela, aucune mise à jour n'affecteras celui ci.
Si l'originl se est mis à jour, c est a toi de répercuter ou non les changements dus a la mise a jour sur ta version du template.

Pour copier un template extensions > gestion des templates > clic sur le nom du template (colonne de droite) > copier le template.

**PhilJ** · 08/09/2014, 04h04

Re : Méthode pour surcharger un template sans changer ses fichiers d'origine ?

Envoyé par lefabdu51 Voir le message

le plus simple est encore de copier ton template sous un autre nom et ensuite travailler sur cette version.

Comme cela, aucune mise à jour n'affecteras celui ci.
Si l'original est mis à jour, c est a toi de répercuter ou non les changements dus a la mise a jour sur ta version du template.

...On peut en effet modifier une copie du template, mais c'est une méthode que je n'utiliserais pas, car :

En cas de mise à jour, il faut reprendre les modifications faites sur la copie, lesquelles peuvent être disséminées dans plusieurs fichiers CSS.
—
Et, surtout, cette méthode ne permet pas de centraliser les altérations de style de tout le site : elle ne peut concerner que les modifications de style du template, non le site tout entier (= le template + Joomla + les extensions utilisées). Elle oblige de ce fait à altérer de nombreux fichiers CSS un peu partout (= dans de nombreux dossiers), ce qui est loin d'être pratique et rapide, surtout en cas de mises à jour de Joomla et des extensions utilisées. — a fortiori lorsque les mises à jour sont fréquentes.

Amicalement,

PhilJ

**lefabdu51** · 08/09/2014, 09h51

Envoyé par PhilJ Voir le message

...On peut en effet modifier une copie du template, mais c'est une méthode que je n'utiliserais pas, car :

En cas de mise à jour, il faut reprendre les modifications faites sur la copie, lesquelles peuvent être disséminées dans plusieurs fichiers CSS.
—
Et, surtout, cette méthode ne permet pas de centraliser les altérations de style de tout le site : elle ne peut concerner que les modifications de style du template, non le site tout entier (= le template + Joomla + les extensions utilisées). Elle oblige de ce fait à altérer de nombreux fichiers CSS un peu partout (= dans de nombreux dossiers), ce qui est loin d'être pratique et rapide, surtout en cas de mises à jour de Joomla et des extensions utilisées. — a fortiori lorsque les mises à jour sont fréquentes.

Amicalement,

PhilJ

ah bon, quand je travailles sur une copie du template, je peut intégrer les styles spécifique à un composant sans soucis.
quand à la mise à jour des composants, elle ne changent rien au template.
quand un composant a des modifications de css, les modifs sont a répèrcuter de toute facon, et ce quelquesoit le template.
La seule chose à verifier, ce sont les surcharges crées .

Second point, ou tu as vu que je parlais de style de template?
Je parles de copier le template et non de copier un style. (la difference entre la colonne de gauche et celle de droite )...

Si on travailles sur une version originale d'un template, en cas de mise a jour, on peut copier les fichiers css de l ancienne version sans soucis, ce qui réapplique automatiquement la meme mise en page. (si on as fait une sauvegarde avant).

de plus, ce que tu dit vas a l encontre de la doc officielle :

J3.x:Modifying a Joomla! Template - Joomla! Documentation

http://docs.joomla.org/J3.x:Modifying_a_Joomla!_Template

Ils disent qu il faut copier le template pour le mettre a l'abri des mises à jour....

un autre élément de doc qui pourras être utile :

J3.x:How to use the Template Manager - Joomla! Documentation

http://docs.joomla.org/J3.x:How_to_use_the_Template_Manager

quand au probleme que tu évoques, je ne l ais jamais eu car je modifies directement le fichier personal.css de la copie.
Donc je n ais aucun besoin d'ajouter important.
Les rares fois ou j'utilise cet attribut, c'est pour attibuer des styles spécifique à un composant et que c est la seule manière de les faire accepter.
Le fichier custom.css est à utiliser avec gantry ou d autres templates qui le permette nativement.

Le style custom.css est quand à lui utilisable pour obtenir un template comme atomic...
On as tout le positionnement, mais aucun style affectant les éléments.
Si on souhaites récuperer les regles qui sont dans le fichier personal.css, une simple copie de celles ci dans le fichier custom.css est suffisante.

**graphozzie1068** · 09/09/2014, 14h00

Re : Méthode pour surcharger un template sans changer ses fichiers d'origine ?

Merci à PhilJ et lefabdu51 pour vos réponses très détaillées. En croisant vos informations et conseils je vais pouvoir établir une méthode. Je compte bien installer le plugin signalé par PhilJ car j'ai déjà rencontré le problème dont il parle (impossibilité de surcharger certains styles css qui figurent dans des feuilles de styles chargées dans la page après la mienne). Je reste bien sûr ouvert à toute autre contribution, je suis sûr que cela pourra être utile à de nombreuses autres personnes qui liront cette discussion. Merci encore à vous !

**webcrea** · 09/09/2014, 14h06

Re : Méthode pour surcharger un template sans changer ses fichiers d'origine ?

et si tu veux te passer d'un plugin, tu peux directement intégrer la balise vers ta feuille de styles perso juste avant la balise HEAD dans l'index.php de ton template

<link rel="stylesheet" href="http://www.ton-site.fr/templates/ton-template/css/perso.css" type="text/css" />

**PhilJ** · 09/09/2014, 16h24

Re : Méthode pour surcharger un template sans changer ses fichiers d'origine ?

Bonjour,

Envoyé par webcrea Voir le message

si tu veux te passer d'un plugin, tu peux directement intégrer la balise vers ta feuille de styles perso juste avant la balise HEAD dans l'index.php de ton template

...Oui, c'est possible aussi, mais ce procédé revient à altérer un fichier d'origine du template, ce qui ne correspond pas à la demande (voir le sujet de ce fil).

Ou alors il faut opérer cette modification sur une copie du template (=> le message de lefabdu51, ici : http://forum.joomla.fr/showthread.ph...=1#post1029817), non sur le template d'origine. Encore faut-il ensuite se souvenir de tout ce qu'on a fait (surtout au fil des siècles

).

Bonne continuation,

PhilJ

**PhilJ** · 09/09/2014, 17h06

Re : Méthode pour surcharger un template sans changer ses fichiers d'origine ?

Bonjour,

Envoyé par lefabdu51 Voir le message

quand je travailles sur une copie du template, je peut intégrer les styles spécifique à un composant sans soucis.

...Compris cette fois. Donc c'est une autre méthode, tout aussi valable.

Second point, ou tu as vu que je parlais de style de template?
Je parles de copier le template et non de copier un style. (la difference entre la colonne de gauche et celle de droite )...

J'avais bien compris.

ce que tu dit vas a l encontre de la doc officielle :
http://docs.joomla.org/J3.x:Modifying_a_Joomla!_Template
Ils disent qu il faut copier le template pour le mettre a l'abri des mises à jour.

La documentation Joomla officielle mentionne par définition les procédés nativement prévus par le noyau actuel de Joomla (en l'occurrence la version 3 de Joomla), rien d'autre. Elle ne peut pas évoquer tous les procédés possibles et qui sont tout aussi valides et efficaces. Elle n'est donc pas exclusive et ne prétend nullement l'être. Elle dit seulement ce qui est nativement possible dans la version de Joomla dont elle donne les clés, mais n'exclut pas expressément l'utilisation de méthodes alternatives satisfaisant à la même exigence de préservation des fichiers d'origine. Le JED (Joomla Extension Directory), qui est lui aussi un site officiel Joomla, recense d'ailleurs de telles méthodes alternatives (notamment dans cette section : http://extensions.joomla.org/extensi...tion/head-code, mais on en trouve aussi dans d'autres sections).

Cordialement,

PhilJ

Méthode pour surcharger un template sans changer ses fichiers d'origine ?

Méthode pour surcharger un template sans changer ses fichiers d'origine ?

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association