Forum/Message Editor CSS

GuildPortal admin site link to original post

This CSS will let you modify the editor color to match your site. The editor is used in both your forums and mail messages. It will also add CSS to prevent the white text on a white background that you can see in the editor before image below (click to enlarge).

Editor Before	Editor After

Add this CSS to your Custom CSS (remove the <style> tag from the top and </style> tag from the bottom), Header HTML, footer or into any free form text/HTML box on your forums tab and mail tab.

CSS

<style type="text/css">
.RadEWrapper *,.ContentElement * { color:#000000; }
.RadEContent, .RadEContentBordered, .RadETextArea { background-color:#222222 !important; color:#dddddd !important; font-size:12pt !important; }
.RadEContent a:link, .RadEContentBordered a:link {color: #ffcc00 !important; text-decoration: none;}
.RadEContent a:hover, .RadEContentBordered a:hover {color: #ffffff !important; text-decoration: underline;}
.RadEContent a:visited, .RadEContentBordered a:visited {color: #8000ff; text-decoration: none;}
.RadEContent a:active, .RadEContentBordered a:active {color: #ff8000; text-decoration: none;}
</style>

Customizing

• The top line makes sure that the Style, Font Name and Font Size boxes don't have white text on a white background. So keep this color dark, the default here is black. I tried changing the color of the toolbars, but it'll take a lot more messing around with CSS to get it perfect. So the toolbar should stay white with a dark color text.
  
  .RadEWrapper *,.ContentElement * { color:#000000; }
  
  
• The second line modifies the background color of the editor. Adjust it to match your site. The default colors are very dark grey (#222222) with an almost white (#dddddd) text. You can also modify the font size (12pt) here because most of the time I'm squinting to see what I've typed. Make sure you keep the !important after each variable or it won't work
  
  .RadEContent, .RadEContentBordered, .RadETextArea { background-color:#222222 !important; color:#dddddd !important; font-size:12pt !important; }
  
  
• The last four lines modify the link colors inside your editor. I only added the !important to the first two, but you can include the last two if you're having trouble seeing the links. I left in the "text-decoration" but it really doesn't do anything unless you are in "preview" mode. You could also add an !important after these parameters, but then you'd have to add it to all four.

Mottie, the editor has been changed, and this script no longer makes the background appear in a different color 

Bummer... thanks anyhow Mottie. I appreciate it.