Usman Didi Khamdani, Monday, 02 February 2009 07:00
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 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?
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?
| Comments |
|
|
|
|
|
|
Only registered users can write comments!
Powered by !JoomlaComment 3.26
3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."
JUG Indonesia
Id-joomla.com adalah situs resmi Joomla User Group (JUG) Indonesia dan Joomla Translation Team
Download Terjemahan Joomla terakreditasi dari JoomlaCode dan laporkan bugs, ide dan saran nya di Sub Forum Hanacaraka
Login
Artikel
We have 600 guests online
