Menyiasati Persoalan Background Editor (TinyMCE) pada Web Joomla!

Bagi pengguna web Joomla! 1.0.x, mungkin pernah mengalami persoalan, di mana saat ingin menuliskan artikel ataupun mengeditnya (menggunakan mode TinyMCE editor), merasa terganggu gara-gara background editornya berwarna gelap atau bahkan hitam yang menyebabkan tulisannya tidak dapat dibaca. Dalam hal ini jika pemilik atau desainer template web tersebut memilih warna gelap atau hitam untuk background halaman webnya. Ini tidak lain karena background TinyMCE editor menggunakan warna background halaman (body) yang ada pada file template_css.css yang sedang aktif.

Beberapa artikel yang bisa didapatkan via Google, memang telah memberikan solusi untuk hal ini, seperti yang dibahas di Forum Joomla!. Namun kebanyakan harus melakukan perubahan pengaturan pada beberapa file yang mesti diakses via "backdoor" (cpanel) web. Ini bukan masalah jika admin ataupun desainer web mempunyai akses untuk itu. Toh, beberapa pemilik dan pengelola situs hanya memberikan hak akses kepada desainer web, atau tepatnya desainer template, sebatas menginstalasikan templatenya via halaman administrator (back-end) Joomla!, sementara admin web yang ada hanya difokuskan pada pengelolaan konten web.

So?

Coba sekarang kita menggunakan pendekatan terbalik. Jika dicermati, yang menjadi sandungan persoalan yang ada adalah bahwa Joomla! memberlakukan pengaturan tunggal untuk background halaman web (front-end) dan juga editor (TinyMCE) termasuk halaman print preview. Seperti pada pengaturan di bawah ini:

body { background-color: #0000ff; }

Pengaturan ini akan menjadikan semua background berwarna biru.

Secara langsung, dari file template_css.css, kita tidak bisa melakukan pengaturan khusus untuk background editor. Namun, jangan lupa, kita 100% bisa melakukan pengaturan background halaman front-end.

Untuk itu, yang perlu kita lakukan adalah memberikan pengaturan khusus untuk background halaman front-end berupa class ataupun id. Katakanlah secara umum background berwarna putih dan tanpa dekorasi ataupun gambar apapun. Namun untuk halaman front-end yang dikunjungi orang umum, kita ingin background-nya berwarna hitam dengan gambar latar burung garuda di tengah-tengahnya. Simak pengaturan berikut:

body { background-color: #ffffff; }

body.frontend {
background-color: #000000;
background-image: url(../images/garuda.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}

Pengaturan body yang pertama akan memberikan efek atau style secara umum berupa background yang berwarna putih. Sementara pengaturan di bawahnya (dengan diberi class frontend) akan memberikan pengaturan khusus berupa background yang berwarna hitam dengan latar gambar garuda yang akan tetap berada di tengah-tengah halaman meski saat discroll sekalipun.

Namun pengaturan ini tidak akan langsung memberikan efek tersebut di atas terhadap halaman front-end. Sementara ini, tetap saja halaman front-end akan mempunyai background berwarna putih.

Untuk menjalankannya, buka file index.php untuk template yang kita buat atau sedang digunakan. Edit baris atau tag:

body

Sisipkan class yang telah kita buat menjadi:

body class="frontend"

atau menggunakan id misalnya:

body id="khusus"

Jangan lupa save file tersebut.

Sekarang coba buka halaman front-end dan editor (TinyMCE). Bagaimana?

Sederhana, bukan?

Utak-atik Joomla! di PC dan Laptop Pribadi

Ini memang bukan hal baru. Namun jika Anda belum mengetahuinya, maka tulisan ini mungkin layak untuk Anda simak. Ya, menjalankan Joomla! dari PC atau laptop Anda.

Sebagaimana kita maklumi bersama, penulisan script Joomla! menggunakan dokumen PHP, di mana untuk mengolah script yang ada dibutuhkan sebuah server. Berbeda dengan HTML dan atau JavaScript yang bisa langsung dieksekusi atau ditampilkan oleh web browser semacam Firefox dan Internet Explorer. Ini yang menyebabkan mengapa Joomla! sulit dijalankan pada komputer Windows. Namun, banyak jalan menuju Roma. Sulit bukan berarti tidak bisa, bukan?

Untuk menjalankan Joomla! di PC ataupun laptop yang berbasis Windows, kita bisa menggunakan paket server instan yang terdiri dari Apache, MySQL dan PHP yang terangkum dalam paket WampServer yang merupakan pengembangan dari WAMP5. Meski WampServer memang bukan satu-satunya paket server instan untuk Windows—sebut saja yang lain misalnya PHPTriad, XAMPP dan Reactor Server, namun instalasi dan pengoperasian WampServer yang simpel dan user friendly, membuat WampServer patut dijadikan rujukan.

Hingga tulisan ini dibuat, WampServer telah dirilis hingga versi 2.0 yang bisa didownload secara GRATIS dari situsnya yaitu www.wampserver.com. Dan uraian berikut ini mengacu pada versi tersebut.

1. Download file WampServer 2.0 dari www.wampserver.com/en/download.php


2. Buka dan instal file WampServer 2.0 yang telah selesai didonwload dengan mengikuti petunjuk yang ada


3. Saat pertama kali file WampServer 2.0 dibuka akan muncul peringatan seperti gambar di bawah; tekan "Yes" untuk melanjutkan proses instalasi, kecuali jika sebelumnya Anda telah menginstal WampServer versi 1.x maka Anda harus meng-uninstalnya terlebih dahulu
   
   


4. Pada bagian "Select Destination Location", secara default instalasi Wampserver akan tersimpan di folder c:\wamp, namun jika Anda ingin menempatkannya di folder lain, klik tombol "Browse" di samping kanannya lalu pilih folder yang dikehendaki


5. Pada bagian "Select Additional Tasks", centang kotak "Create a Quick Launch icon" untuk membuka pilihan mengaktifkan WampServer langsung selesai proses instalasi dan atau centang kotak "Create a Desktop icon" untuk membuat ikon Wampserver di layar deskop


6. Pada bagian "PHP mail parameters" biarkan parameter sebagaimana adanya, langsung tekan "Next" untuk melanjutkan


7. Setelah proses instalasi selesai, secara otomatis WampServer akan aktif yang diindikasikan dengan munculnya ikon Wampserver di pojok kanan bawah desktop seperti terlihat pada gambar di bawah. Untuk mengaktifkan WampServer secara manual bisa dengan mengklik ikon Wampserver yang ada di layar desktop atau dengan membukanya dari menu Programs (Start —> Programs —> WampServer —> Start WampServer). Untuk menonkatifkan WampServer bisa dengan mengklik kanan ikon aktif WampServer lalu pilih "Exit"
   
   


8. Saat baru diaktifkan, mula-mula sebagian ikon aktif WampServer berwarna merah, tunggu hingga warna merah tersebut hilang berganti dengan warna putih semua dan WampServer pun siap digunakan. Untuk menguji apakah WampServer telah benar-benar aktif atau belum, buka alamat http://localhost dengan web browser yang ada atau dengan mengklik ikon aktif WampServer lalu klik "Localhost" di bagian paling atas shortcut list (lihat gambar di bawah), jika berhasil maka akan tampil halaman depan (homepage) WampServer
   
   

Sekarang saatnya menginstalasikan Joomla!.

1. Donwload file Joomla! dari www.joomla.org/download.html baik untuk Joomla versi 1.0.x maupun versi 1.5.x


2. Ekstrak file Joomla! yang telah didownload ke dalam folder www di dalam folder instalasi WampServer (c:\wamp atau yang ditentukan sebelumnya)


3. Ganti nama folder file Joomla! hasil ekstrak, misalnya dengan joomla1 atau joomla15


4. Buka file Joomla! tersebut dengan menggunakan web browser dengan mengetikkan alamatnya (misal http://localhost/joomla1 atau http://localhost/joomla15) untuk memulai proses instalasi


5. Ikuti langkah-langkah instalasi secara berurutan


6. Pada bagian "Pre-installation Check", jika muncul peringatan misalnya "PHP magic_quotes_gpc setting is 'OFF' instead 'ON'" untuk Joomla! versi 1.0.x atau peringatan bahwa "Display Errors" seharusnya "Off" untuk Joomla! versi 1.5.x, kita bisa mengatur ulang settingan tersebut dengan cara mengklik ikon aktif WampServer —> PHP —> PHP settings lalu klik settingan yang dimaksud untuk mengaktifkan ataupun menonaktifkannya—jika muncul peringatan seperti pada gambar di bawah, klik "OK", setelah itu klik kembali ikon aktif WampServer lalu pilih "Restart All services". Jangan lupa refresh halaman "Pre-installation Check" hingga semua settingan yang disyaratkan terpenuhi, lalu lanjutkan ke bagian berikutnya
   
   


7. Pada bagian "Step 1" pada Joomla 1.0.x atau bagian "Database" pada Joomla! 1.5.x, isi konfigurasi sebagai berikut:
   
   
   
   • Hostname: localhost
   
   
   • MySQL User Name: root
   
   
   • Password: [kosongkan]
   
   
   • MySQL Database Name: [terserah, misal proyek_joomla1, joomla atau database_joomla]
   
   
   • MySQL Table Prefix: [misal jos_]
   
   


8. Pada bagian "Step 2" & "Step 3" pada Joomla 1.0.x atau bagian "Configuration" pada Joomla! 1.5.x, isi nama situs, email pribadi dan password untuk login ke halaman administrator (back-end) Joomla!


9. Khusus Joomla! 1.5.x, pada bagian "FTP Configuration" (sebelum bagian "Configuration"), pilih "No" pada "Basic Settings"


10. Jangan lupa pilih "Install Sample Data" pada bagian "Step 1" pada Joomla! 1.0.x atau "Configuration" pada Joomla 1.5.x


11. Terakhir, setelah selesai, hapus folder installation yang ada di folder Joomla! di folder www

Nah, sekarang Joomla! pun ready dijalankan dan kita bisa masuk ke halaman administrator dengan username admin dan password seperti yang telah kita pilih sebelumnya untuk mengutak-atik Joomla!, dengan tanpa was-was lagi dengan koneksi internet yang bisa putus sewaktu-waktu, of course, fulus kita pun akan sedikit terhemat karena kita tidak memerlukan biaya lagi untuk mengakses internet.

Selamat ber-Joomla!