Rubah warna background TinyMCE WYSIWYG Editor

Sebenernya masalah ini aku hadapin sendiri… maklum masih newbie…. pas aku lagi mo edit artikel.. eh tiba tiba… kok warna background aku di TinyMCE jadi item… ga jelas gituh..kayak PLN mati listrik… duhh bingung deh……. akhirnya dengan bantuan teman teman di Joomla… yaitu myfia,  Mcsmon ama jxl akhirnya ketemu deh permasalahannya….. jadinya bisa bener lagi deh.. dan bisa terang *Jreng..* Editor background aku…. Thanks ya teman teman..

Aku sekedar mo share aja… maap kalo informasi ini udah umum banget…

Langkah pertama :

Buat file .css baru .. contentnya adalah… [ buat aja dimana aja.. kalo aku sih di Dreamweaver.. ]

/* CSS Document */

/* Editor Assigned Styles */
/*make sure that any styles you put here also exist
in your template_css.css file or they will have no
effect in the front end */

p.rightalign {
text-align: right;
}

.red {
color: #c00;
}

.green {
color: #0c0;
}

.highlight {
background-color: Yellow;
color: Blue;
padding: 0;
}
p.code {
background-color: #ddd;
border: 1px solid #bbb;
}

.small {
color: #999999;
font-size: 10px;
}

/* Body Tag for Background Color and Font Specs. */

body {
font-family: Arial, Helvetica, Sans Serif;
font-size: 12px;
color: #333333;
background: #ffffff;
}

/* Optional Basic Stuff you can use to make everything look like it does on the site itself */
/* you can get this stuff right out of your template_css.css file, or you can just leave it out */

ul
{
margin: 0;
padding: 0;
list-style: none;
}

li
{
line-height: 16px;
padding-left: 16px;
padding-top: 0px;
background-image: url(‘/../images/arrow.png’); /* use the real image path that you have on your site. An absolute path is OK */
background-repeat: no-repeat;
background-position: 0px 2px;
}

td {
text-align: left;
font-size: 12px;
}

a, a:link, a:visited {
color: #c64934; text-decoration: none;
font-weight: bold;
}

a:hover {
color: #900; text-decoration: none;
font-weight: bold;
}

abis itu save file tsb dengan nama : editor_content.css

2. Upload File editor_content.css ke Directory templates.. contohnya…  xxx.com/www/mambots/editors/tinymce/jscripts/tiny_mce/themes/advanced/css/

3. Setelah selesai, masuk ke web Admnistrator Joomla.. lalu pilih ke Mambots trus Sites Mambots abis itu muncul banyak mambots file kan di bawahnya….
Piilih deh… TinyMCE WYSIWYG Editor trus klik Edit Setelah itu coba di lihat di sebelah kanan nya.. di bagian Parameter… coba liat ke bawah nya.. cari tulisan ‘Template CSS Classes’ nilainya di rubah jadi ‘No’ trus dibawah persisnya.. ada ‘Custom CSS Classes’ trus di dalam kotak isikan.. alamat file editor_content.css yang tadi baru di upload .. contohnya… xxx.com/www/mambots/editors/tinymce/jscripts/tiny_mce/themes/advanced/css/editor_content.css
Abis itu… klik SAVE deh…

*JREngg.. Brubah deh.. background yang tadinya Geleeppzz……*
Makasih buat semua yang udah bantu yaa…..  Popcorn

Share