Habituellement, je règle uniquement les modèles gratuits existants et change les couleurs et les polices. La question est, quand j'ai déjà ma page Joomla en ligne, quelle est la façon la plus simple d'apporter des modifications au CSS de modèle?

Actuellement, j'utilise les outils de développement Chrome pour rechercher et ajuster des styles spécifiques pour un aperçu. Si je l'aime bien, j'ajuste le fichier css du modèle directement dans l'éditeur en ligne dans la zone d'administration.

Quand j'ai commencé et que je n'avais pas de contenu, j'ai utilisé un serveur Web local avec Joomla qui avait l'avantage de pouvoir utiliser un IDE approprié pour écrire du code CSS et PHP. Puisque j'ai déjà du contenu, j'aimerais voir à quoi ressemblent les changements que j'apporte avec le contenu que j'ai.

Je sais que c'est une question fondamentale, mais y a-t-il un flux de travail préféré lorsque quelqu'un veut ajuster la conception d'un site existant?

Clonez le site Web avec Akeeba, installez-le localement, puis ajustez-le si nécessaire. Lorsque vous avez terminé SSH / FTP, vos fichiers modifiés sont retournés sur le site en direct.

Il y a toute une série de bonnes raisons pour lesquelles il est imprudent de «modifier» un site en direct…

Vous avez quelques options ici, selon que votre objectif est la facilité d'utilisation, l'automatisation ou le coût:

• Faites exactement ce que vous avez fait auparavant avec votre installation locale, mais une fois installée, modifiez l'installation locale de Joomla pour utiliser votre base de données MySQL distante en direct dans configuration.php, si votre hôte prend en charge l'accès à distance. Attention cependant - toutes les modifications de la base de données seront transférées en direct ...

• Utilisez un composant comme extplorer et modifiez les fichiers de modèle directement dans le navigateur, avec un autre onglet ouvert affichant le site, toujours en utilisant les outils de développement de Chrome. extplorer propose une coloration du code et est idéal pour effectuer rapidement de petites modifications.

• Utilisez un système de contrôle de version pour pousser les modifications - par exemple, développez votre modèle dans une installation Joomla locale en utilisant votre IDE choisi, avec le modèle dans un référentiel. Une fois terminé, validez les modifications sur votre site en ligne. Utilisez un hook post-commit pour extraire ces modifications en tant que version de travail. Bien que plus compliqué à configurer, cela signifie que vous pouvez toujours revenir aux anciennes versions de modèle si vous faites une erreur. Ajoutez MySQL à distance pour assurer la cohérence des données sur les sites locaux et en direct.

• Payer pour un cadre de modèle / modèle approprié - dans mon entreprise, nous utilisons des modèles YooTheme . Ce cadre de modèle a une fonctionnalité appelée «Customizr», qui est essentiellement une fenêtre à 2 volets avec des centaines de variables CSS (enfin, moins de variables) à gauche et un aperçu en direct à droite. Ces variables contrôlent suffisamment près chaque élément du modèle, du remplissage de la gouttière à l'ombre du texte des éléments de menu, et tout le reste. Les modifications sont appliquées instantanément dans l'aperçu et plusieurs «styles» peuvent être définis afin que vous puissiez jouer avec différentes configurations variables. Cela dit, je suis sûr que d'autres cadres de modèles ont des fonctionnalités très similaires.

NB: Je n'ai aucune affiliation avec extplorer ni YooTheme autrement qu'en tant qu'utilisateur.

S'il ne s'agit que de modifications CSS, vous pouvez également continuer à les prévisualiser dans les outils de développement Chrome et à utiliser un environnement de développement en ligne tel que Cloud9 ou ShiftEdit, vous pouvez vous connecter directement à votre serveur via FTP et apporter des modifications au site en direct à l'aide d'un IDE approprié. similaire à ce que vous faisiez quand il était hébergé localement.

Je ne recommanderais cependant pas cela pour des changements plus importants qui pourraient casser votre site (j'ai appris à la dure il y a quelques années). Pour ceux-ci, je recommande de configurer un serveur local (ou une machine virtuelle gratuite de koding.com ), de cloner le site avec Akeeba et d'utiliser Git * pour pousser les modifications sur votre site en direct une fois qu'elles ont été testées.

* Si vous ne voulez pas que votre code soit public sur GitHub, une bonne alternative est BitBucket .

Méthode 1

Une méthode que j'ai utilisée consiste à ajouter mon propre fichier css dans le fichier modèle index.php. Cela peut être encapsulé pour l'ajouter uniquement si vous êtes l'utilisateur.

Une façon d'étendre cela est d'écrire un plugin simple qui ajoute un fichier css si vous êtes l'utilisateur. Je l'ai utilisé pour apporter des modifications au modèle d'administration par défaut, pour éviter d'apporter des modifications directement dans le modèle qui pourraient être remplacées par la prochaine mise à jour.

Quelque chose comme...

class plgSystemBB extends JPlugin {
    public function onBeforeCompileHead() {

    if (JFactory::getUser()->username == 'my.login.name.goes.here')
    {
        JFactory::getDocument()->addStylesheet("/templates/protostar/css/test.css");
    }

    if(!JFactory::getApplication()->isAdmin()){
        return;
    }   

    JFactory::getDocument()->addStylesheet("/templates/isis/css/admin-extra.css");
}

Méthode 2

Pour prévisualiser les modifications du modèle, vous pouvez dupliquer le modèle et apporter des modifications dans le doublon. Pour afficher ces modifications, ajoutez "? Template = test" à l'URL, qui remplace le modèle. Remplacez "test" par le nom que vous avez décidé d'utiliser pour le doublon.

Notez que vous devez dupliquer le modèle entier, et pas seulement un style. Les styles et les modèles peuvent être dupliqués dans l'interface d'administration.

Je ne pense pas qu'il soit possible de remplacer un style dans l'url. [PW: Je viens de découvrir qu'en J3, vous pouvez remplacer un style dans l'url. Voir méthode 3.]

Méthode 3

Similaire à la méthode 2 mais avec des styles. Utilisez un style "test" et modifiez le modèle principal pour inclure la feuille de style de test. Pour remplacer un style dans l'URL, ajoutez? TemplateStyle =, où est l'identifiant du modèle (c'est-à-dire numérique).