Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Adding Forum Editor CSS
Mottie (MVP) 8/25/2009 2:27 AM EST : Adding Forum Editor CSS
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Adding Forum Editor CSS

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 or a file hosting site like MyOtherDrive.com, 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 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 orange) 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.
TopBottom

Guppy Queen (New Admin) 8/25/2009 10:03 PM EST : RE: Adding Forum Editor CSS
Guppy Queen
Posts: 41034
Zomgawsh Poster

Just added this to my guild site. I've adjusted the colors too, but wondering how to change the blue link (visited) color?

Thanks so much Mottie! This gray color editor is easy on my eyes.
TopBottom

Mottie (MVP) 8/25/2009 10:13 PM EST : RE: Adding Forum Editor CSS
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Guppy!

Well, yesterday it looked fine LOL, today I see I needed to add a "!important" in the link CSS. Look in the Editor.css file for this line and add the "!important" (in red below) - I've updated the code in the top post.
a:link, a:visited { color: #ffcc00 !important; text-decoration: none; }
TopBottom

Guppy Queen (New Admin) 8/25/2009 11:03 PM EST : RE: Adding Forum Editor CSS
Guppy Queen
Posts: 41034
Zomgawsh Poster

Added that to my editor.css

Thanks Mottie
TopBottom

Guppy Queen (New Admin) 8/25/2009 11:26 PM EST : RE: Adding Forum Editor CSS
Guppy Queen
Posts: 41034
Zomgawsh Poster

One of my guildies said that he can't see the white background. I'm not sure if his configuration has anything to do with this. He's on a PC, Windows Vista 64 bit, using IE 8.
TopBottom

Mottie (MVP) 8/26/2009 12:40 AM EST : RE: Adding Forum Editor CSS
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

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 or a file hosting site like MyOtherDrive.com, 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... just change the javascript.
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.
TopBottom

Mottie (MVP) 8/26/2009 12:49 AM EST : RE: Adding Forum Editor CSS
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Guppy!

Yes, I see that now.. it's not working with the dark background in either IE8 or Chrome. I'm not sure about Safari and others. But it does work with Firefox. I'll try to find a way to make it work.

Edit: Nevermind.. it's working now! Just update the javascript code and you should be fine 
TopBottom

Guppy Queen (New Admin) 8/26/2009 1:28 AM EST : RE: Adding Forum Editor CSS
Guppy Queen
Posts: 41034
Zomgawsh Poster

Mottie said:
Adding Forum Editor CSS v1.1


/worship Mottie
TopBottom

Mottie (MVP) 2/1/2010 11:09 PM EST : RE: Adding Forum Editor CSS
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Updated this code - the script has changed, but not the CSS.
TopBottom

Mottie (MVP) 12/13/2010 6:12 PM EST : RE: Adding Forum Editor CSS
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Updated the CSS to include the tabs in version 1.1
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%