WYSIWYG editor change colours

hi is there any way i can change the skin of the WYSIWYG editor to fit my dark template , many thanks

Yes, the TinyMCE has a css associated with it, actually two.  editor-style.css controls the appearance of the editor.  The other, content.css helps you to match the content appearance to the actually post appearance.  Go to the /plugins/tinyMCE and look around, you should be able to find it in one of the tinymce directories.

Great news thanks , im shore it needs updating this editer

Hi i found it what parts do i need to change for the dark effect , there is alot of code in the folders

I have not even looked so at this time can not say.  I always seem to be doing a hundred things at once; I can find the time, I will give a quick look at it.

Here are the 2 files attached

OK, maybe editor-style.css is used in a different version.  It would be the ui.css that you need to examine.  Let me look at this some more.

What you need to do is to look at the skins/themes of TinyMCE.  The advance theme comes with a dark skin.  You just need to select it.  Look at this page and it will show the different skins for the advance theme. http://www.tinymce.com/tryit/3_x/skins.php

You will add this to the tinymce init

        skin :"o2k7",
        skin_variant :"black",

open /templates/base/scripts/BxBaseEditorTinyMCE.php

For each of the tinymce inits where you want to have the dark theme you would add:

Let's look at the standard one:

     * Standard view initialization params
     */
    protected static $WIDTH_STANDARD = '630px';
    protected static $CONF_STANDARD = "
                        plugins: 'autolink,autosave,lists,inlinepopups,media,paste,fullscreen',
                        width: '100%',
                        height: '270',
                        theme: 'advanced',
                        theme_advanced_buttons1: 'bold,italic,underline,removeformat,|,bullist,numlist,|,justifyleft,justifycenter,justifyright,|,undo,redo,|,blockquote,formatselect',
                        theme_advanced_buttons2: 'hr,link,unlink,image,media,|,fullscreen,cleanup,pastetext,code',
                        theme_advanced_buttons3: '',
                        theme_advanced_toolbar_location: 'top',
                        theme_advanced_toolbar_align: 'left',
                        theme_advanced_statusbar_location: 'bottom',
                        theme_advanced_resizing: true,
                        theme_advanced_resize_horizontal: false,
                        theme_advanced_resizing_use_cookie: true,
                        theme_advanced_path: false,
    ";

You would choose the skin and the skin variant.  For o2k7 and black, It would be changed as follows and note the use of single quotes:

    /**
     * Standard view initialization params
     */
    protected static $WIDTH_STANDARD = '630px';
    protected static $CONF_STANDARD = "
                        plugins: 'autolink,autosave,lists,inlinepopups,media,paste,fullscreen',
                        width: '100%',
                        height: '270',
                        theme: 'advanced',
                        skin : 'o2k7',
                        skin_variant : 'black,
                        theme_advanced_buttons1: 'bold,italic,underline,removeformat,|,bullist,numlist,|,justifyleft,justifycenter,justifyright,|,undo,redo,|,blockquote,formatselect',
                        theme_advanced_buttons2: 'hr,link,unlink,image,media,|,fullscreen,cleanup,pastetext,code',
                        theme_advanced_buttons3: '',
                        theme_advanced_toolbar_location: 'top',
                        theme_advanced_toolbar_align: 'left',
                        theme_advanced_statusbar_location: 'bottom',
                        theme_advanced_resizing: true,
                        theme_advanced_resize_horizontal: false,
                        theme_advanced_resizing_use_cookie: true,
                        theme_advanced_path: false,
    ";

Note: the simple skin does not include the black.  I would copy the black from the advance to the simple and test.  By this, I mean copy the ui-black.css file from the advance to the simple theme.

By the way, the o2k7 skin is suppose to mimic the Office 2007 look; that is what those letters mean.  You can probably search out on the net for some open source themes for TinyMCE.  I normally just use the default but I may see about dressing up the TinyMCE on my site.

If you are wanting to use the default look with a dark look, you will need to add to the default skin.

edit: I think if you leave out the skin, it will default to the default instead of o2k7; however, you may have to actually state default.  Like I said, add the dark css and play with it.

is this the correct file

Yes, sorry about that, updated the first post.

Note: if you are running 7.1.4, that will also change the editor in the forum as with 7.1.4 it was changed to pull the TinyMCE init from that file instead of a separate tinymce init.  If you are not running 7.1.4, then you have to change it in the forum init as well.