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 CSS for the Forum/Message Editor to match your site theme
Mottie (MVP) 4/13/2009 9:05 PM EST : Adding CSS for the Forum/Message Editor to match your...
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Forum/Message Editor CSS

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.
TopBottom

Guppy Queen (New Admin) 4/14/2009 2:55 PM EST : RE: Adding CSS for the Forum/Message Editor to match ...
Guppy Queen
Posts: 41034
Zomgawsh Poster

Hi Mottie, am I able to add this to a freeform HMTL box?
TopBottom

Mottie (MVP) 4/14/2009 3:20 PM EST : RE: Adding CSS for the Forum/Message Editor to match ...
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Guppy Queen!

Yes you can add it to a free form text/HTML box, but be sure to include the <style> at the top and the </style> at the bottom. But if you do this, you may have to add it to a free form text/HTML box on your forums tab and your mail tab.
TopBottom

Guppy Queen (New Admin) 4/14/2009 5:20 PM EST : RE: Adding CSS for the Forum/Message Editor to match ...
Guppy Queen
Posts: 41034
Zomgawsh Poster

Hi Mottie, I added the script to this page but I don't see anything happening?

Also, if I want to use default font size, what should I do? thank you!
TopBottom

Mottie (MVP) 4/14/2009 6:50 PM EST : RE: Adding CSS for the Forum/Message Editor to match ...
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Guppy!

Hmmm, I'm not sure why stuff in the footer sometimes gets ignored. When I moved the CSS up to your search box area, it worked fine.

If you want to keep the default font size, just remove the "font-size:12pt !important;" from the CSS... the line should look like this afterwards:
.RadEContent, .RadEContentBordered, .RadETextArea { background-color:#222222 !important; color:#dddddd !important; }
TopBottom

Guppy Queen (New Admin) 4/14/2009 7:12 PM EST : RE: Adding CSS for the Forum/Message Editor to match ...
Guppy Queen
Posts: 41034
Zomgawsh Poster

I moved it to the search box. It works now. Thanks Mottie 
TopBottom

Guppy Queen (New Admin) 4/16/2009 2:47 AM EST : RE: Adding CSS for the Forum/Message Editor to match ...
Guppy Queen
Posts: 41034
Zomgawsh Poster

Hi Mottie, I've added this to the free form HTML box in this page, but nothing is happening 
TopBottom

Mottie (MVP) 4/16/2009 3:24 AM EST : RE: Adding CSS for the Forum/Message Editor to match ...
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hiya Guppy Queen!

Hmmm, I don't know why having the CSS below the editor makes it stop working... maybe add a free form text/HTML box above the mail content box, or add it to the Custom CSS. I got it to work after I moved it above the mail section
TopBottom

Guppy Queen (New Admin) 4/16/2009 1:06 PM EST : RE: Adding CSS for the Forum/Message Editor to match ...
Guppy Queen
Posts: 41034
Zomgawsh Poster

Thank you Mottie  I made a free form context box at the top of the mailbox
TopBottom

Guppy Queen (New Admin) 8/24/2009 2:23 PM EST : RE: Adding CSS for the Forum/Message Editor to match ...
Guppy Queen
Posts: 41034
Zomgawsh Poster

Mottie, would you be able to write a new code to make the editor in a different color? With the new update that we have.
TopBottom

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