Getting TinyMCE Editor to show custom CSS

88 Posts

SyberKnight Reply #1, 17 years, 11 months ago

hello,

i’m trying to get the textarea box when editing a page to accurately represent the "look" of the site its editing.

i’ve gone to the Tools/Configuration/Interface&Features page and added my custom site css path/file to the "Path to CSS file" field, but it doesn’t seem to make any difference in the textarea’s look. (/styles/global.css).

so then after some research i found this page...
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/content_css
...and added this code to my "global.css" file...

/* TinyMCE specific rules */
body.mceContentBody {
   background: #FFF;
}
.mceContentBody a {
   color: red !important; /* FF requires a important here */
}

i did notice that the textarea editor DID represent it.

so then i decided to make it actually "match" the rest of the site and changed it to...

/* CMS specific rules */
body.mceContentBody {
   background: #ffffff;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 12px;
	line-height: 150%;
	color: #292618;
}

.mceContentBody a:link, .mceContentBody a:visited {
	color: #000000;
	text-decoration: none;
	background-color: #e1ded8;
}

.mceContentBody a:hover, .mceContentBody a:active {
	color: #000000;
	text-decoration: none;
	background-color: #a8c5e4;
}

Interestingly enough, it works great when editing in Safari, but when editing in FireFox, everything shows correctly EXCEPT the link "color" and link "text-decoration" (which end up as default blue & underlined).

i DID add the "!important;" tag to each line, but that made NO difference.

any suggestions on how to get FireFox to represent?
thx.

1,131 Posts

Bravado Reply #2, 17 years, 11 months ago

Yeah, this is getting into some serious CSS voodoo with the way TinyMCE renders stuff. If you’re having problems with Firefox, try installing the Firebug addon and inspect the editor to see how it’s tagging everything.

Honestly, I haven’t had much luck trying to do any majorly complex CSS stuff with TinyMCE. Your best bet would be to use really simple selectors and style the content to at least reflect the correct font stylings and stuff like that. You can at least get it so that it’s similar and representative of the site.

Jeff Whitfield

"I like my coffee hot and strong, like I like my women, hot and strong... with a spoon in them."

88 Posts

SyberKnight Reply #3, 17 years, 11 months ago

well, as cool as firebug is, it didn’t help that much.
i tried everything i could find & think of.

just to be clear, my code above works EXCEPT only firefox shows the text color and decoration as some sort of default underlined blue for links.

i just know this will bug the person who will be doing the page edits, so i was trying to fix it.

also, it’s a shame Safari doesn’t work any better with tinymce, cause it renders it correctly.
i’ve noticed the HTML code tinymce spits out in firefox is way better than safari. safari leaves extra crap where firefox does it clean.
sad

1,572 Posts

Paulp Reply #4, 17 years, 11 months ago

Try adding the "a", IE:

.mceContentBody a, .mceContentBody a:link, .mceContentBody a:visited {
	color: #000000;
	text-decoration: none;
	background-color: #e1ded8;
}

88 Posts

SyberKnight Reply #5, 17 years, 11 months ago

nope. no change.

also, fyi, even the text color from the "body.mceContentBody" doesn’t work in FF. it’s like FF it just overriding all color & decoration changes to the ol’ standard black text & underlined blue links. odd.