TinyMCE typography.css not linking

Permalink
I am puzzled.

I am trialling locally. Editing with TinyMCE and expecting it to load my Typography.css as I am told it should. It does not! I have cleared the cache and this does not help.

This is a little annoying as I am using H3,H4 and they don't show up in the drop down list, STYLES is non functional is somehow defaulting to orig install. Main stylesheet applying fine in main site + I need to use the styles to float images.

I have tested out other themes with typography.css and this does not work for them either.

Any ideas?

lance72
 
JimboJetset replied on at Permalink Reply
JimboJetset
The typography.css has NEVER worked with the TinyMCE for me either.
lance72 replied on at Permalink Reply
lance72
funny you say that.

The default install has typography.css in there too (with a bunch of styles) and TinyMCE does not see it either

Even in the demo videos by Concrete5 do not see the additional styles when demonstrating inserting content.
mario replied on at Permalink Reply
mario
I've gotten the typography.css to work before. Though I've found that TinyMCE operates in its own little world as far as caching is concerned.

try:
Adding a style.
Remember to preface/scope the class or tag with a non-C5 unique ID, not just by itself.

something like:

#container h2
or
#container .padImageLeft {
padding:0px 0px 0px 10px;
}

Give it a day. And it might show (or maybe immediately after you clear cache).

I'd usually apply these changes to a custom theme and not concrete core themes.

I've also found that tinyMCE has another gotcha. It uses the body tags background color and text color. this means that if your background is black but you define the text as also black because you have a white background in your main content area, you'll get black on black text!
gillwinkle replied on at Permalink Reply
In case anyone is still looking for possible answers, I had a problem with my styles not showing up and it was a LOCAL(browser) cache issue(especially in Firefox), not a Concrete5 cache issue. In Firefox, I think the typography.css was downloaded and cached, TinyMCE read from the local stale version and didn't see a reason to update even when the file on the server had changed.

Don't know the best simple solution, but I ended up opening IE, clearing the whole IE cache, editing the page (TinyMCE showed the right styles in IE), saving it, opening the page in Firefox, forcing a couple of page refreshes with F5, and the styles finally showed up when I edited in FF. Not an elegant solution, but it was all I needed to get up and running.

I figure anything that makes the browser get a fresh copy of the css files should help if you have trouble seeing typography.css changes right away. Note: with Firefox, hitting the "Clear Recent History" button didn't solve the cache issue, hence the weird steps I took with IE. If you use Firefox, it would be worth trying in another browser to see if the results are the same or not.
danielromney replied on at Permalink Reply
danielromney
I have followed everyones suggestions here, and I still cannot get my typography.css.to link correctly inside the TinyMCE editor.

Any other solutions?
Briann replied on at Permalink Reply
Same problem over here.
Already cleared all caches.

The strang thing is, that I do have this problem on one Concrete5 site, but not on another. (which even runs the same, most recent version)

Is there any solution available?
jordanlev replied on at Permalink Best Answer Reply
jordanlev
The biggest trick I had to figure out with this is that your typography.css file must reside at the top level of your theme's directory (same place where default.php, view.php, and description.txt are) -- NOT in a "css" subdirectory. It doesn't even matter if you're including the typography.css file from your theme's <head> because TinyMCE doesn't seem to utilize that when loading the typography.css file -- it just always looks in the theme's directory (and not any subdirectories). So I don't even include it in my theme's <head> -- I just drop it into the theme directory and let it be its own isolated thing that is only for TinyMCE to use.
Briann replied on at Permalink Reply
Figured it out just after I posted it...

It turned out that some things I expected to change didn't because of the reason that Mario already mentioned above.

"I've also found that tinyMCE has another gotcha. It uses the body tags background color and text color. this means that if your background is black but you define the text as also black because you have a white background in your main content area, you'll get black on black text!"

So it's all fixed now. :)
scaramac replied on at Permalink Reply
You my friend... are a genius!
Huckleberry replied on at Permalink Reply
Huckleberry
Thanks Jordan,
As is usually the case, you're answer is correct.
Thanks for taking the time!
abra100pro replied on at Permalink Reply
abra100pro
You're the man of the hour, day, season!
Give the man a million karma points - Thanks, Jordan!

off the office - finally! ;-)

Alex
tduncandesign replied on at Permalink Reply
tduncandesign
I just bumped into this not-updating problem for typography.css again, and though I have it in my top-level theme directory, and had other styles I had in there showing up in TinyMCE, with C5 cache off for dev, I also found that it is a browser cache issue, clearing my browser cache causes the updated styles to show up in TinyMCE's style menu.
jordanlev replied on at Permalink Reply
jordanlev
Yeah, it's really annoying like that (you need to clear the C5 cache, and clear your browser cache, then cross your fingers because sometimes it updates and sometimes it doesn't).

Also, note that I figured out how you can put that tinymce CSS file anywhere you want in your theme (and call it whatever you want, so it doesn't need to have the confusing name of "typography.css"):http://concrete5tricks.com/blog/rename-or-move-typography-css/...
walkerfx replied on at Permalink Reply
I believe I have the solution... apart from Concrete5's cache, you also must consider the browser cache. I found that loading the css file directly in the browser and forcing a refresh will update the typography css. Ex:
http://mywebsite.com/themes/mytheme/typography.css...

Doing a regular page refresh doesn't seem to reach typography.css because (I'm assuming) that TinyMCE is loading the css via javascript indirectly.