Maklumat

Tulisan-tulisan terkini dapat juga didapatkan di halaman Kompasiana di alamat https://kompasiana.com/didikaha

Khusus untuk konten-konten sastra seperti puisi, cerpen dan esai silahkan kunjungi http://blog.edelweis-art.com. Terima kasih (Penulis)

Jumat, Januari 09, 2009

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?

Tidak ada komentar:

Posting Komentar