It’s going to be a hell of a job to style the editor. However, I know that on http://www.tinymce.com there are some plugins that might enable you to style it relatively easily. Not tried them out though so can’t guarantee they work OK, and not sure how they work..

actually, you can create your own skin fairly easily…  just copy the one from our plugin… adjust the skin.min.css file as needed (you might want to explode it first)…

then tell us to use your skin instead with the filter ‘sph_tm_init’ where  you would edit the skin_url and skin elements of the passed array…  if desired, you could also change fonts and images there too…

Mr Papa said
actually, you can create your own skin fairly easily…  just copy the one from our plugin… adjust the skin.min.css file as needed (you might want to explode it first)…

then tell us to use your skin instead with the filter ‘sph_tm_init’ where  you would edit the skin_url and skin elements of the passed array…  if desired, you could also change fonts and images there too…

“copy the one from our plugin”

1. Can you tell me where I find that or what it’s called? I see two sp-text-editor.php files, is it one of those or do I copy the entire “editor” folder, or…?

2. And once I copy it, then where does it go? In my child theme’s root folder?

“adjust the skin.min.css file as needed (you might want to explode it first)…”

3. What is ‘explode it’?

4. I did a file search for skin.min.css and didn’t find it in simple-press.

then tell us to use your skin instead with the filter ‘sph_tm_init’ where  you would edit the skin_url and skin elements of the passed array…  if desired, you could also change fonts and images there too…

5. This ‘sph_tm_init’ is a filter I add somewhere in the editor? Where would I put it?

in our tinymce plugin…  so by default, wp-content/sp-resources/forum-plugins/tinymce-richtext/resources/skins

there you will see our SPlightgray skin…  I was suggesting to copy it to your own writable location (but not within the plugin) such as wp-content/sp-resources…  rename it…

and then edit the skin.min.css file…  by explode, I mean its a minified file and will be hard to read… explode something like:

http://mrcoles.com/blog/css-unminify/
http://cssunpacker.com/

but that is the file you need to edit… 

then use the filters I mentioned to tell us to use your own theme vice ours…  happy to walk you through it more if needed…

Mr Papa said
actually, you can create your own skin fairly easily…  just copy the one from our plugin… adjust the skin.min.css file as needed (you might want to explode it first)…

then tell us to use your skin instead with the filter ‘sph_tm_init’ where  you would edit the skin_url and skin elements of the passed array…  if desired, you could also change fonts and images there too…

Well how about that.. learning something new everyday!

Ok, great instructions, by the way, very easy to follow

I’ve created a new folder in sp-resources called “forum-editor-skins” and copied the SPlightgray folder into it, renaming it neonnights, so:

sp-resources/forum-editor-skins/neonnights <<akaSPlightgray

And just to verify: Do ALL of SPlightgray’s files go in there, or only skin.min.css?

Speaking of skin.min.css, I’m still not positive what minify is (is that where the code is all squounched up with no paragraphs instead of in nice, tidy lines?), but when I opened skin.min.css from SPlightgray in NotePad++ it looked just like any other css…?

So now I’m at the filter part.

Mr Papa said

then use the filters I mentioned to tell us to use your own theme vice ours…  happy to walk you through it more if needed…

When you say “us” do you mean “Simple Press” or are you referring to something else? And yes, please on the walking me through it part. I have no idea where to put sph_tm_init or how to edit the skin_url with it. I don’t need to change the font or images, just get a dark theme to match my site (I won’t need help with the css). 

I played with that editor theme creator Ike suggested, and came up with a really cool design for it! So it won’t just be dark and match, it will be awesome ^^

yes, copy all the files…

yes, minify means to make the file size as small as possible, ie remove spaces, comments, etc that dont actually have any real function except readability…

Its possible our skin file is not actually minified, but tinymce expects it…  have not checked… but if its readable and editable, go with it – no need to unminify…

tell us means use the filter and change the values to what  you want…

how wp filters work:  http://codex.wordpress.org/Plugin_API

so something like:

add_filter('sph_tm_init', 'my_tinymce_init');
    function my_tinymce_init($tiny) {
    $tiny['skin_url'] = 'xxxxx';
    $tiny['skin'] = 'yyyyy';
    $tiny['content_css'] = 'zzzzz';
}

just replace xxxxx, yyyyy and zzzzz with your values…  skin url points to your skin dir…  skin is name of your skin (ie the dir name in the skin url)…  and content_css points to the content.css file of you skin…  in ours, that is sp-content.css (its full path and name)…

Ok, so you’re saying we’re basically writing a plugin, but it’s a plugin for a plugin, so where do I put that php code? In my child theme’s function.php? The Simple Press “Creating a Plugin” page in the Codex is blank.

https://simple-press.com/documentation/codex/plugins/plugin-basics/creating-a-plugin/

you could just put it in your spFunctions.php of your sp theme…  no need for a plugin…

Mr Papa said
you could just put it in your spFunctions.php of your sp theme…  no need for a plugin…

Oh, I see, I wasn’t aware the SP themes had functions.php like WordPress.

Also, the absolute main thing I’m trying to change, especially because almost everything else I can actually change putting css in my WP child-theme’s css file, is the glaringly white window of the editor. It looks like that css is found in sp-resources/forum-editor-skins/SPlightgray/sp-content.css

So I came here to ask if I paste the above php code twice, once for skin.min.css and once for sp-content.css, but now if you look at this thread, you refer to skin.min.css above, then when you paste the code you switched to sp-content.css, so now I’m not sure which one I should be editing. If I edit sp-content.css isn’t the skin just going to overwrite it? So do I just delete the skin? Is there a way I’m supposed to be able to create editor skins and select from them?

a skin is made up of two css files… skin.min.css and a content css file, our skin uses sp-content.css…  the latter can be named whatever you want, you just have to tell tinymce about it as I showed in the filter…

if you just want to change the content css (the area you type vs the tinymce skin), you can create your own content css file and only point that one argument to it… you dont need a whole skin…  copy our sp-content.css and change what you want…

I don’t “just” want to change the area you type in, but that’s one of the most important areas to change, since it’s the huge block of glaring white. The whole thing is white without changes to css, and does not work with a dark theme, so I need to change every single aspect of the editor. Can I do that with sp-content or do I have to also somehow include skin.min.css?

Unfortunately, skin.min.css is the one I’ve been editing since it was mentioned at the beginning of this thread, trying to get it ready for the php redirect. I’ve spent a couple hours on it already.

no problems there… just add the second file content.css in your skin and edit it to change the white… copy ours… and point to it as mentioned above…  yes, second file, but quite simple one line change in rgb color to change from white…