Mengapa menggunakan CSS override?
Itu selalu merupakan ide yang baik untuk menjaga gaya CSS Anda terpisah dari styling template yang ada, jika Anda menggunakan template Joomla yang sudah dibuat sebelumnya.
- Lebih mudah dirawat
- Perubahan Anda tidak akan hilang jika Anda meningkatkan templat
- Anda dapat dengan mudah menyalin / memindahkan modifikasi ke templat lain atau situs lain.
Bagaimana cara kerja penimpaan CSS?
CSS berarti "Cascading Style Sheets", "Cascading" dalam konteks ini yang berarti bahwa karena lebih dari satu aturan stylesheet dapat diterapkan pada bagian HTML tertentu, aturan yang digunakan dipilih dengan menurunkan dari aturan yang lebih umum ke aturan khusus yang diperlukan ( kebanyakan aturan spesifik dipilih), atau berdasarkan urutan aturan untuk elemen apa pun (aturan terakhir yang ditemukan dipilih).
Selama file CSS kustom Anda dimuat setelah file template CSS default, Anda dapat menambahkan gaya Anda sendiri untuk menimpa elemen tertentu yang diperlukan (ada beberapa pengecualian, lebih pada yang di bawah ini).
Penggunaan umum
Untuk memuat lembar gaya khusus di <head>tag Joomla , kode berikut dapat ditambahkan ke index.phpfile templat Anda ( YOURDOMAIN.COM/templates/yourtemplate/index.php), tepat sebelum </head>tag penutup untuk memastikan file Anda dimuat terakhir.
JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/custom.css');
(File CSS dapat memiliki nama apa pun, dan tidak harus berada di / css / subfolder, tetapi lebih bersih dari itu.)
Anda juga dapat menambahkan <link>tag normal , tetapi ini kurang fleksibel daripada opsi yang disebutkan di atas:
<link rel="stylesheet" href="/joomla//templates/mytemplate/css/custom.css" type="text/css" />
!Penting
Beberapa ekstensi mungkin memuat gaya CSS mereka setelah milik Anda (atau bahkan menambahkan gaya langsung di file index.php), sehingga mengabaikan penggantian Anda. Ini biasanya dapat diselesaikan dengan menambahkan !importantgaya Anda, misalnya.h1{color:red!important;}
Penggunaan dalam kerangka kerja yang berbeda
Sekarang bagian yang menyenangkan: Banyak kerangka kerja kerangka memiliki kemungkinan bahwa pengguna ingin membuat perubahan pada kerangka mereka, sehingga menambahkan cara mudah untuk memasukkan penimpaan CSS Anda. Berikut adalah beberapa metode yang digunakan:
RocketTheme Gantry 4
Templat RocketTheme diberdayakan oleh Kerangka Gantry, dan file CSS yang disesuaikan akan dimuat secara otomatis jika ditemukan. File CSS harus ditempatkan dalam /templates/yourtemplate/css/folder, dan nama harus menjadi YOURTEMPLATEFOLDER-custom.css.
Contoh: Jika Anda menggunakan Afterburner 2templat gratisnya , direktori templat default adalah /templates/rt_afterburner2/. Tambahkan file yang disebut rt_afterburner-custom.css(hati-hati dengan garis bawah dan tanda hubung) ke / css / subfolder, dan itu akan dimuat secara otomatis oleh kerangka kerja Gantry.
Bentuk 5
Templat bentuk 5 dikirimkan dengan custom.cssfile kosong di subdirektori / css / templat Anda. Cukup tambahkan gaya Anda ke file ini dan mereka akan dimasukkan dalam tata letak Anda.
Gavick Pro
Templat Gavick Pro dikirimkan dengan overrides.cssfile kosong di subdirektori / css /. Tetapi perhatikan bahwa file ini tidak dimuat secara default, Anda harus mengaktifkannya Override CSSdi tab Advanced Settings di pengaturan template.
Joomla Shine
Buat file CSS khusus di / css / subfolder dari template Anda, mis. custom.cssDan tentukan nama file di Extensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s).
Kerangka T3
Templat yang didasarkan pada Kerangka T3 mungkin / mungkin tidak termasuk custom.cssfile dalam / css / subfolder dari templat Anda (cukup buat jika tidak ada), tetapi saat ini, file akan dimuat setelah file CSS lainnya.
Kerangka Warp
Templat yang didasarkan pada Kerangka Warp secara otomatis memuat custom.cssfile yang ditemukan di / css / subfolder. File CSS tambahan dapat dimuat dengan menambahkan
$this->warp->stylesheets->add('css:yourcssfile.css');
ke file /layouts/template.config.php.