Alur kerja untuk mengembangkan / menyesuaikan template

16

Biasanya saya hanya menyesuaikan template gratis yang ada dan mengubah warna dan font. Pertanyaannya adalah, ketika saya sudah memiliki halaman Joomla saya online, apa cara termudah untuk membuat perubahan pada template css?

Saat ini, saya menggunakan Alat Pengembangan Chrome untuk menemukan dan menyesuaikan gaya khusus untuk pratinjau. Jika saya suka, saya menyesuaikan file css dari template secara langsung di editor online di area administrasi.

Ketika saya pertama kali memulai dan saya tidak memiliki konten apa pun, saya menggunakan server web lokal dengan Joomla yang memiliki keuntungan, bahwa saya dapat menggunakan IDE yang tepat untuk menulis kode CSS dan css. Karena saya sudah memiliki beberapa konten sekarang, saya ingin melihat bagaimana perubahan yang saya buat terlihat dengan konten yang saya miliki.

Saya tahu bahwa ini adalah pertanyaan dasar, tetapi apakah ada alur kerja yang disukai ketika seseorang ingin menyesuaikan desain situs yang ada?

halirutan
sumber

Jawaban:

10

Kloning liveite dengan Akeeba, instal secara lokal, lalu sesuaikan sesuai kebutuhan. Setelah selesai SSH / FTP, file Anda yang diubah kembali ke situs langsung.

Ada banyak alasan bagus mengapa tidak bijaksana untuk "mengubah" di situs langsung ...

Seth Warburton
sumber
Perhatikan bahwa jika Anda mengubah database yang diubah (misalnya, Anda mengubah urutan modul), maka ini tidak akan berfungsi.
Flimm
@ Flimm Pertanyaannya adalah tentang mengubah CSS, bukan menyinkronkan perubahan yang disimpan dalam DB.
Seth Warburton
10

Anda memiliki beberapa opsi di sini, tergantung pada apakah fokus Anda adalah kemudahan penggunaan, otomatisasi atau biaya:

  • Lakukan persis apa yang Anda lakukan sebelumnya dengan instalasi lokal Anda, tetapi setelah diinstal, ubah instalasi Joomla lokal untuk menggunakan database MySQL jarak jauh Anda yang aktif configuration.php, jika host Anda mendukung akses jarak jauh. Berhati-hatilah - perubahan DB apa pun akan bergulir menjadi siaran langsung ...

  • Gunakan komponen seperti extplorer dan edit file template langsung di browser, dengan tab lain terbuka menampilkan situs, masih menggunakan alat dev Chrome. extplorer memiliki fitur pewarnaan kode dan sangat bagus untuk membuat perubahan kecil dengan cepat.

  • Gunakan sistem kontrol versi untuk mendorong perubahan - misalnya, kembangkan templat Anda di instalasi Joomla lokal menggunakan IDE yang Anda pilih, dengan templat dalam repositori. Setelah selesai, komit perubahan ke situs langsung Anda. Gunakan kait pasca-komitmen untuk memeriksa perubahan itu sebagai versi yang berfungsi. Meskipun lebih rumit untuk diatur, itu berarti Anda selalu dapat mengembalikan ke versi templat lama jika Anda melakukan kesalahan. Tambahkan MySQL jarak jauh untuk memastikan konsistensi data di seluruh lokal dan langsung.

  • Membayar untuk kerangka / templat kerangka kerja yang tepat - di perusahaan saya, kami menggunakan templat YooTheme . Kerangka kerja templat ini memiliki fitur yang disebut 'Customizr', yang pada dasarnya adalah jendela 2-pane yang menampilkan ratusan variabel CSS (well, variabel KURANG) di sebelah kiri dan pratinjau langsung di sebelah kanan. Variabel-variabel ini mengontrol hampir setiap elemen template, dari selokan hingga bayangan teks item menu, dan semua yang ada di antaranya. Perubahan diterapkan secara instan dalam pratinjau dan beberapa 'gaya' dapat ditentukan sehingga Anda dapat bermain dengan berbagai konfigurasi variabel. Ini semua berkata, saya yakin kerangka kerja template lain memiliki fitur yang sangat mirip.

NB: Saya tidak memiliki afiliasi dengan extplorer atau YooTheme selain sebagai pengguna.

tangan coding
sumber
6

Jika itu hanya perubahan CSS yang Anda buat, Anda dapat melanjutkan melihat pratinjau mereka di Alat Pengembangan Chrome dan menggunakan lingkungan pengembangan online seperti Cloud9 atau ShiftEdit. Anda dapat terhubung langsung ke server Anda melalui FTP dan membuat tweak ke situs langsung menggunakan IDE yang tepat mirip dengan yang Anda lakukan saat dihosting secara lokal.

Namun saya tidak akan merekomendasikan ini untuk perubahan besar yang dapat merusak situs Anda (saya belajar dengan cara yang sulit beberapa tahun yang lalu). Untuk ini saya sarankan menyiapkan server lokal (atau VM gratis dari koding.com ), kloning situs dengan Akeeba dan menggunakan Git * untuk mendorong perubahan ke situs langsung Anda setelah mereka telah diuji.

* Jika Anda tidak ingin kode Anda dipublikasikan di GitHub, salah satu alternatif yang baik adalah BitBucket .

Adam B
sumber
5

Metode 1

Salah satu metode yang saya gunakan adalah menambahkan file css saya sendiri ke file index.php template. Ini dapat dibungkus untuk hanya menambahkannya jika Anda adalah pengguna.

Cara memperluas ini adalah dengan menulis plugin sederhana yang menambahkan file css jika Anda adalah pengguna. Saya telah menggunakan ini untuk membuat perubahan pada template admin default, untuk menghindari membuat perubahan secara langsung pada template yang mungkin diganti oleh pembaruan berikutnya.

Sesuatu seperti...

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

Metode 2

Untuk melihat pratinjau perubahan templat, Anda dapat menduplikasi templat, dan membuat perubahan dalam duplikat. Untuk melihat perubahan itu, tambahkan "? Template = test" ke url, yang menimpa template. Ganti "test" dengan nama apa pun yang telah Anda putuskan untuk digunakan untuk duplikat.

Perhatikan bahwa Anda perlu menduplikasi seluruh templat, dan bukan hanya gaya. Baik gaya dan templat dapat diduplikasi di admin gui.

Saya tidak percaya itu mungkin untuk mengganti gaya di url. [PW: Saya baru tahu bahwa di J3, Anda bisa mengganti gaya di url. Lihat metode 3.]


Metode 3

Mirip dengan metode 2 tetapi dengan gaya. Gunakan gaya "tes" dan modifikasi templat utama untuk memasukkan lembar gaya pengujian. Untuk mengganti gaya dalam url, tambahkan? TemplateStyle =, di mana pengenal template (yaitu numerik).

Peter Wiseman
sumber
@ Peter Saya menyukai gagasan plugin, saya masih berpikir Anda harus kode jarak jauh dan checkin ke kontrol sumber tetapi jika itu dibagikan dengan tim pengujian mencoba beberapa tes bisa baik
tristanbailey
1
@tristanbailey Terima kasih. Ya, pengkodean jarak jauh jauh lebih bersih, tetapi pertanyaannya dijadikan rujukan untuk melakukan ini secara online di situs yang ada.
Peter Wiseman