Customizing the WYSIWYG Editor

[108]

Hi,

In short:
I need to be able to change the background color of the WYSIWYG editor to black, for both NEW entries and EDITing of existing entries. Changing the background color of the editor via rendering of it's HTML contents is not acceptable in this instance. I need the actual editor code to make the background of the text field permanently black. Is there any way at all to do this?

More in-depth:
I am using serendipity as an admin interface for updating the HOME and NEWS pages of a website. The WYSIWYG editor is employed in the admin panel for the site owner to add/edit entries, then the product is sent out via RSS so that the website (and other sites) can fetch and render the corresponding feed into the appropriate IFrame of the site.

The website is constructed primarily with AP DIV layers with a great emphasis on alpha channel transparencies, and the only way I can properly render the RSS feeds is by incorporating a background=transparent parameter to the document. The background of each RSS feed as rendered on the website is not just flat black, but it is close enough. So all I need is a black background in the WYSIWYG editor for the owner to be able to easily and properly construct the necessary updates for the RSS feeds.

With a white background, it will be virtually impossible for the site owner, whom has very little computer experience, to effectively use it to update his site when logging in to the admin suite as he will want to use the full HTML editing features of the editor, such as colors. So the background of the editor has got to be somewhere between #000000 and #333333 in color.

Thanks!!
108

[garvinhicking]

Hi!

I'm not sure if I understand correctly.

Do you "just" want to change the look of the WYSIWYG editor to have a black color, or do you need the WYSIWYG editor to insert code into the actual entry to add a black-colooured DIV?

The first should be easy to achieve by editing the CSS files of Xinha (htmlarea/htmlarea.css).

The second would be a pain; probably easiest would be to edit the templates/default/admin/entries.tpl file and there where the "textarea" elements for the WYIWYG editors are, insert a

Code: Select all

<textarea style="width: 100%" name="serendipity[body]" id="serendipity[body]" cols="80" rows="20">
{$entry_vars.entry.body|@escape|@default:'<div style="background-color: black"></div>'}</textarea>

so that you get an empty wrapping black div when you first create the entry, which should then be still there when you re-edit those entries...

HTH,
Garvin

[108]

Thanks for your response!

I can't have a black colored background element of any kind on the entry, as I've designed the entries via the CSS in serendipity to render with transparent backgrounds.

So in the second method you've described, is the black div something that would have to be edited out later if I didn't want to have it displayed in my entries? I can't have that.

I just tried adding/replacing the code you posted into the template but it doesn't change the background color of the editor.

I can't find a WYSIWYG editor anywhere that is readilly customizable in this regard. How utterly frustrating.

Any other suggestions?

Thanks,
108

[garvinhicking]

Hi!

The background color of the editor would best be changed in htmlarea.css!

You haven't properly answered my question though - do you WANT a seperate DIV in your entry with the black color, or do you not want that? Where exactly do you need the DIV to have a black background color?

My main problem is that I don't understand why you can't solve it with CSS?

Regards,
Garvin

[108]

I don't understand why I can't solve this with CSS either, so welcome to the club!


AAAHH! Update... I finally figured out how to do it. I was editing the wrong htmlarea.css file!!

I finally tried editing the htmlarea.css file in the /default/ folder and it worked!

Sorry to take up your time with this. I do appreciate all your help!


108