Bagaimana cara mengganti gaya CSS di templat saya?


21

Saat menggunakan templat Joomla gratis / komersial dari Templat Klub X / Y / Z, apa cara terbaik untuk memasukkan gaya CSS saya sendiri?


1
Tambahkan stylesheet custom.css. jika template Anda tidak mengambilnya secara otomatis, Anda dapat menambahkannya di head.php Anda biasanya path-nya adalah: templates / templatename / tpls / blocks / head.php <link rel = "stylesheet" href = "/ templates / templatename / css / custom.css "type =" text / css "/>
Tony M

Jawaban:


22

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.


2
Untuk penggunaan umum, saya sarankan menggunakan JHtml::_('stylesheet', 'path/to/file')daripada yang addStyleSheetsudah diperdebatkan tentang jawaban lain :) Selain itu, jawaban yang bagus. Pasti akan berguna bagi orang
Lodder

Terima kasih, @Lodder. Saya harap info ini dapat bermanfaat bagi orang-orang. Mengenai saran Anda, saya memang membaca debat. Bagaimana bisa JHtml::_digunakan dengan $this->template?
johanpw

2
JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/style.css');
Lodder

3
Sebenarnya, tema roket yang lebih baru menggunakan KURANG. Yang harus Anda lakukan adalah membuat file di folder KURANG yang disebut template-custom.less dan memasukkan kode Anda ke dalamnya. Maka Anda dapat menikmati trik yang KURANG bawa. Warp 7 memungkinkan Anda untuk membuat "style" Anda sendiri di folder styles dan Anda benar-benar dapat menempel file custom.css di folder ITU (di dalam folder css sendiri). Dengan begitu setiap gaya dapat memiliki CSS khusus sendiri. Itu juga membuatnya tahan terhadap peningkatan templat. Menggunakan file custom.css default berarti ditimpa setiap kali Anda meningkatkan tema.
Brian Peat

1
Jawaban yang bagus dan sangat berguna! Opsi lain yang mungkin ingin Anda tambahkan untuk kerangka / kerangka kerja yang tidak termasuk ketentuan untuk file CSS khusus adalah penggunaan ekstensi pihak ketiga seperti ekstensi CSSConfig.joomla.org/extensions/style-a-design/templating/… yang dirancang untuk tujuan yang tepat ini.
Neil Robertson

7

Joomla 3.5+ (Templat Protostar)

Pada Joomla 3.5, Anda dapat membuat file yang dipanggil user.cssdan menempatkannya di:

templates / protostar / css / user.css

Catatan: nama file harus menjadiuser.css


Templat protobintang akan memeriksa apakah:

  • File itu ada
  • Ukuran file adalah > 0.

Jika kedua kondisi terpenuhi, itu akan secara otomatis mengimpor file ini untuk Anda.

Lihat Permintaan Tarik di Github


5

Helix Framework ( JoomShaper )

Kerangka kerja template Joomla lain, yang memfasilitasi alur kerja penyesuaian.

Templat Helix Framework juga menyediakan cara mudah untuk menambahkan gaya khusus Anda dengan 2 metode yang mudah.

  1. Di panel kontrol template di backend, ada bidang Custom CSS. Di sini Anda dapat mengetikkan css Anda, yang akan ditambahkan sebagai elemen gaya di bagian kepala halaman Anda dan karenanya, itu juga akan diutamakan daripada file css eksternal lainnya. Tentu saja opsi ini bukan yang ideal, jika Anda berencana untuk menulis banyak baris css, maka ada metode kedua.

  2. Seperti banyak kerangka kerja templat lainnya, Helix juga menyediakan kemampuan untuk membuat file custom.css Anda sendiri. Cukup buat, dan letakkan di dalam folder css pada templat. Template akan menguraikannya dan akan memasukkannya di bagian kepala halaman Anda.


3

Johanpw telah melakukan pekerjaan yang sangat baik dengan jawabannya pada pertanyaannya sendiri ... terutama mengenai penggantian css untuk banyak template komersial.

Saya hanya ingin menambahkan dua sen saya di sini ...

Seperti yang digarisbawahi oleh Johanpw, membuat penggantian CSS adalah praktik yang disarankan. Menyimpan CSS khusus Anda dalam satu file yang Anda tahu tidak akan dihapus atau diganti setelah pembaruan sangat penting.

Ini penting untuk diingat untuk semua ekstensi Joomla. Jangan mencoba mengubah file css inti modul atau komponen. Alih-alih, lebih baik mencoba membuat file template.css kustom Anda sendiri, memuatnya terakhir dan di sana buat semua gaya kustom Anda.

Dalam kasus di mana templat komersial tidak menyediakan cara untuk menambahkan css override maka Anda dapat menggunakan ekstensi seperti ini: Tambahkan Custom CSS , yang memungkinkan persisnya ini. Untuk membuat file override css kustom Anda dan memuatnya terakhir.

Opsi lain yang sering saya lakukan di situs yang saya kelola, adalah memodifikasi templat dan menambahkan tautan saya sendiri ke file custom.css saya , tepat sebelum tag penutup kepala templat. Ini adalah minor, mudah diingat dan mengembalikan modifikasi, yang boleh saya tangani, ketika pembaruan template tiba.


3

Gantry 5 (RocketTheme)

Gantry 5 adalah versi terbaru dari kerangka templat populer dan menyediakan banyak fitur dan kemampuan baru.

Mengenai pengubahan CSS, ada banyak fleksibilitas dan opsi.

Mengambil Tema Hidrogen yang dirilis sebagai templat Gantry 5 standar, ia menyediakan folder bernama kustom.

Folder ini disediakan bagi pengguna untuk menempatkan file / override khusus untuk kerangka gantry / templat (agar tidak bingung dengan override templat Joomla, yang tetap ada di folder templat / html). Anda dapat menempatkan di sana Anda membuat file custom.css. Kemudian melalui Panel Administrasi Templat Gantry, Anda dapat menyesuaikan tata letak templat dan menggunakan Partikel Atom CSS / JS Kustom (fitur gantry 5 baru), untuk menambahkan custom.css ke templat. Gantry 5 juga menyediakan apa yang disebut stream stream , (seperti pintasan), agar dapat dengan mudah menautkan file custom.css Anda.

Jadi dari dalam partikel Atom Anda akan menautkannya menggunakan:

gantry-theme://custom/thing.css

Cara gantry-theme://pintas, akan selalu merujuk ke folder template gantry saat ini.

Menggunakan pendekatan ini adalah cara yang efisien untuk menambahkan custom.css untuk kerangka templat spesifik dari template gantry5 Anda.

Pendekatan kedua, yang berfungsi secara global untuk seluruh templat gantry, adalah dengan menambahkan file custom.scss , di dalam:

template_directory/custom/scss/custom.scss

Dengan melakukannya, gantry5 akan selalu memuat dan mengkompilasi file scss ini, dan aturan css apa pun yang Anda terapkan akan menimpa aturan default templat.

Di dalam file scss Anda baik-baik saja baik menggunakan SCSS atau hanya css. Kompiler dapat mengkompilasi keduanya.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.
Judi bola