通常、既存の無料のテンプレートを調整し、色とフォントを変更するだけです。問題は、すでにJoomlaページをオンラインにしている場合、テンプレートcssを変更する最も簡単な方法は何ですか？

現在、Chrome開発ツールを使用して、プレビュー用の特定のスタイルを見つけて調整しています。気に入ったら、管理領域のオンラインエディターでテンプレートのcssファイルを直接調整します。

私が最初に始めてコンテンツがなかったとき、私はCSSとPHPコードを書くために適切なIDEを使用できるという利点を持っていたJoomlaでローカルウェブサーバーを使用しました。私はすでにいくつかのコンテンツを持っているので、私が行った変更が私が持っているコンテンツでどのように見えるかを見たいです。

これは基本的な質問であることは知っていますが、既存のサイトのデザインを調整したい場合に好ましいワークフローはありますか？

ライブサイトをAkeebaで複製し、ローカルにインストールしてから、必要に応じて調整します。SSH / FTPが完了したら、変更したファイルをライブサイトに戻します。

ライブサイトを「微調整」するのが賢明でない理由はたくさんあります。

ここでは、使いやすさ、自動化、またはコストのどちらに焦点を当てるかに応じて、いくつかのオプションがあります。

• ローカルインストールで以前に行ったことを正確に実行しますがconfiguration.php、ホストがリモートアクセスをサポートしている場合、インストール後、ローカルのJoomlaインストールを変更して、ライブのリモートMySQLデータベースを使用します。ただし注意してください-DBの変更はライブにロールオーバーされます...

• extplorerなどのコンポーネントを使用し、ブラウザでテンプレートファイルを直接編集します。別のタブを開いてサイトを表示し、Chromeの開発ツールを使用します。extplorerはコードの色付けを備えており、小さな変更をすばやく行うのに最適です。

• バージョン管理システムを使用して変更をプッシュします。たとえば、選択したIDEを使用してローカルのJoomlaインストールでテンプレートを開発し、テンプレートをリポジトリに配置します。完了したら、ライブサイトに変更をコミットします。コミット後フックを使用して、これらの変更を作業バージョンとしてチェックアウトします。設定はより複雑ですが、間違えた場合は常に古いテンプレートバージョンにロールバックできることを意味します。リモートMySQLを追加して、ローカルおよびライブ全体でデータの一貫性を確保します。

• 適切なテンプレート/テンプレートフレームワークの支払い-私の会社では、YooThemeテンプレートを使用しています。このテンプレートフレームワークには、「Customizr」と呼ばれる機能があります。これは基本的に、左側に数百のCSS変数（まあ、LESS変数）と右側にライブプレビューを表示する2ペインウィンドウです。これらの変数は、ガターのパディングからメニュー項目のテキストの影、およびその間のすべてまで、テンプレートのすべての要素の近くで制御します。変更はプレビューで即座に適用され、複数の「スタイル」を定義できるため、さまざまな変数構成で遊ぶことができます。これはすべて、他のテンプレートフレームワークには非常に類似した機能があると確信しています。

NB：ユーザーとして以外、extplorerやYooThemeとは関係ありません。

作成しているCSSの変更だけであれば、Chrome開発ツールでそれらを引き続きプレビューし、Cloud9やShiftEditなどのオンライン開発環境を使用して、FTP経由でサーバーに直接接続し、適切なIDEを使用してライブサイトを調整できますローカルでホストされていたときと同様です。

ただし、サイトを破壊する可能性のある大きな変更にはこれをお勧めしません（数年前に難しい方法を学びました）。これらについては、ローカルサーバー（またはkoding.comからの無料のVM）をセットアップし、Akeebaでサイトのクローンを作成し、テスト後にGit *を使用してライブサイトに変更をプッシュすることをお勧めします。

* GitHubでコードを公開したくない場合は、BitBucketが適しています。

方法1

私が使用した1つの方法は、独自のcssファイルをテンプレートのindex.phpファイルに追加することです。あなたがユーザーである場合にのみ、これをラップして追加できます。

これを拡張する方法は、ユーザーである場合にcssファイルを追加する単純なプラグインを作成することです。次の更新で置き換えられる可能性のあるテンプレートに直接変更を加えないように、これを使用してデフォルトの管理テンプレートを変更しました。

何かのようなもの...

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");
}

方法2

テンプレートの変更をプレビューするには、テンプレートを複製し、複製に変更を加えることができます。これらの変更を表示するには、URLに「？template = test」を追加します。これにより、テンプレートが上書きされます。"test"を、複製に使用することに決めた名前に置き換えます。

スタイルだけでなく、テンプレート全体を複製する必要があることに注意してください。admin GUIでは、スタイルとテンプレートの両方を複製できます。

URLのスタイルをオーバーライドすることは不可能だと思います。[PW：J3では、URLのスタイルをオーバーライドできることがわかりました。方法3を参照してください。]

方法3

方法2に似ていますが、スタイルがあります。「テスト」スタイルを使用し、メインテンプレートを変更してテストスタイルシートを含めます。URLのスタイルをオーバーライドするには、？templateStyle =を追加します。ここで、テンプレート識別子（数値）です。