Adding Forum Editor CSS v1.1

This version of the above CSS also changes the toolbar icons. I decided to make it a separate post since some people may not like the dark colors. In the future, I should be able to post other color schemes and all you'd have to change would be the CSS files.

Before
After

The Code (CSS) - editor.css

---

---

Make this external CSS file called "editor.css" and upload it to your site files, then change the "myCSS" variable in the script below to match the URL.

/* tooltip CSS for inside the frame */
.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip, #tooltip2, #preview, #screenshot {
 position:absolute;
 border: 1px solid #444444;
 background: #222222;
 padding: 5px;
 color: #dddddd;
 display: none;
 width: 250px;
 border-radius: 1em;
 -moz-border-radius: 1em;
 opacity: 0.9;
 filter: alpha(opacity=90);
 text-align: center;
}

/* Overall frame */
body { background-color: #333333 !important; color: #dddddd !important; }
#form1 div { color: #dddddd; }
a:link, a:visited { color: #ffcc00 !important; text-decoration: none; }
a:hover { color: #ffffff; text-decoration: none; }
a:active { color: #cccc00; text-decoration: none; }

/* Editor frame */
#bodyTransbackInterior { background-color: #555555; color: #dddddd; border-color: #888888; }

/* Editor Subject */
#editorSubject { color: #dddddd; }
#editorSubject input { background-color: #333333; color: #dddddd; }

/* Editor Background (behind the toolbar) */
#txtEditor_internalEditor { border-color: #888888; }
#txtEditor_internalEditorWrapper { background-color: #555555; color: #dddddd; }

/* Editor Window */
#txtEditor_internalEditorCenter { background-color: #555555; color: #dddddd; }

/* Editor Buttons */
#editorButtons input { background: #555555; color: #dddddd; }
.editorOptions a:link { color: #ffcc00; }
.Default.RadEditor .reMode_selected { background: #555555 url(); }
.Default.RadEditor .reModule, .Default.RadEditor .reEditorModes, .Default.RadEditor .reWrapper { background-color: #333333; }

/* Plain Text Editor */
textarea#txtEditor_internalTextBox { background-color: #555555; color: #dddddd; }

The Code (CSS) - editor2.css

This file is really long! So I'm just going to include a link to the file. In the future I may have alternate files that change the color sheme to other colors, but not right now 

The Code (Javascript)

Add the following code into a free form text/HTML box above your forum content box (same place as your forum modules).

<link type="text/css" rel="stylesheet" href="http://www.axiomfiles.com/Files/258012/editor2.css" />
<style type="text/css">
/* Editor tabs */
.multiPage, .multiPage td, .rtsLI, #editorSubjectLabel, .editorOptions {
 background: #222222 !important;
 color: #eeeeee !important;
}
.rtsLink, .rcbInput {
 background: #444444 !important;
 color: #eeeeee !important;
 cursor: pointer !important;
}
</style>
<script type="text/javascript">
$(window).load(function(){
/* Change this to point to your custom editor CSS */
  var myCSS = 'http://www.axiomfiles.com/Files/258012/editor.css';

/* inject tooltip script into the frame */
 var root = $('iframe[id*=_internalEditor_contentIframe]').contents();
 var tmp = document.createElement('link');
 tmp.type = 'text/css';
 tmp.rel = 'stylesheet';
 tmp.href = myCSS;
 root.find('head').append(tmp);
})
</script>

Customizing

• If you like my color choices of the editor skin, then there is no need to make your own editor.css file. You can use mine 


• If you want your own colors:

• You will have to open your favorite text editor (non-rich text)
• Copy the editor.css code above and modify the colors (in blue) to your liking.
• Upload the file to your GuildPortal files or whichever hosting site you are using.
• Change the URL variable "myCSS" (in orange) in the javascript to point to your own editor.css file.

• If you want to change the toolbar color or image colors, you'll have to dig into the editor2.css file (in red)... it's too big and convoluted to include all of it here.

Edit (8/26/2009): Now works with IE8 and Chrome.
Edit (2/1/2010): Updated to work with the updated editor.
Edit (12/13/2010): Updated to include the post and topic poll tabs.
Edit (2/14/2011): Added "!important" flags to the editor tab css (in the editor.css file).
Edit (3/13/2011): Moved tab styling into the code area & removed the editor.css link at the top.

Updated to style the post and topic poll tabs.