Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Forums > Forum Editor CSS
Mottie (SuperAdmin) 8/24/2009 11:11 PM EST : Forum Editor CSS
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Adding Forum Editor CSS

GuildPortal admin site link to the original post

This script will add some CSS styling to your forum editor only. Sadly, I can't get the script to work in popup windows or change the icons in the icon bar because it uses an image background (I'll look into it). However, I have put in a feature request to allow users to choose their own editor "skin".

Before
 After

The Code (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 #444;
 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 tabs */
.multiPage, .multiPage td, .rtsLI, #editorSubjectLabel, .editorOptions {
 background: #222222 !important;
 color: #eeeeee !important;
}
.rtsLink, .rcbInput {
 background: #444444 !important;
 color: #eeeeee !important;
 cursor: pointer !important;
}

/* 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 (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/editor.css" />
<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 yellow) in the javascript to point to your own editor.css file.
Edit (8/26/2009): Now works with IE8 and Chrome... just change the javascript.
Edit (2/1/2010): Updated to work with the updated editor.
Edit (2/14/2011): Added Editor tab css and updated the root variable to be more general.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 8/26/2009 12:39 AM EST : RE: Forum Editor CSS
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

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


This is now a Mod
Control Panel > Site Mods > Get Site Mods >
Look for "Forum Editor - Dark"


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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 2/1/2010 11:18 PM EST : RE: Forum Editor CSS
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Updated this code - the script has changed, but not the CSS.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 12/13/2010 5:49 PM EST : RE: Forum Editor CSS
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Updated to style the post and topic poll tabs.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%