Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Typography and TinyMCE


Go to End


10 Posts   4497 Views

Avatar
Mo

Community Member, 541 Posts

24 November 2009 at 11:25pm

Hi All,

Reading the Silverstripe book (been quite interesting so far) , made me think I should try and get the typography styles working in the CMS (I have tried this before with no success).

According to the book, any CSS with a .typography namespace in the typography.css file should also style the content in TinyMCE, however this doesn't (and never has) work :s.

I have examined the CMS in firebug, and TinyMCE doesn't even seem to be applying the styles, but viewing the source shows they have loaded.

Any ideas? Anyone had a similar issue? Am I missing something?

I am using SS2.3.3 and Firefox 3.5, an example of the CSS I am using is as follows:

/* Headings and content styles */
.typography h1,
.typography h2,
.typography h3,
.typography p,
.typography table {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	margin: 0 0 1em 0;
}

.typography h1 {
	font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 19pt;
	color: #0099CC;
	margin-bottom: 0;
}

.typography h2 {
	font-size: 11pt;
	color: #0099CC;
	margin-top: 1em;
	margin-bottom: 0.25em;
}

.typography h3 {
	font-size: 10pt;
	color: #0099CC;	
}

Avatar
Mo

Community Member, 541 Posts

24 November 2009 at 11:37pm

Ok, I worked this out. TinyMCE doesn't actually use the Typography.css file directly, what it does do is load editor.css into its iframe and use any styles that exist in there.

So I have added an: @import url("typography.css"); to my editor.css file and pissed about with my cache loads and now it seems to work.

I feel this begs me to question however, why does TinyMce load editor.css into its iframe rather than Typography.css? Also, why is Typography.css loaded into the CMS <head> when it doesn't actually do anything?

Is this a bug?

Ta,

Mo

Avatar
bummzack

Community Member, 904 Posts

25 November 2009 at 1:06am

From my understanding, editor.css contains the editor styles (also special things like "broken-links" styling etc.). It loads typography.css to make typography styles from the frontend available in the WYSIWYG editor.

So you can see it as following:
editor.css WYSIWYG editor only
typography.css WYSIWYG editor & frontend
layout.css and other stylesheets frontend only

Not sure why typography.css is loaded into the CMS though.. could be some messed up Requirements call somewhere.

Avatar
dalesaurus

Community Member, 283 Posts

26 November 2009 at 6:12am

Edited: 26/11/2009 6:13am

Here is how I understand things;

typography.css - namespaced classes of styles for CMS-editable text areas on site
editor.css - hacks and fixes to make .typographys things look OK in the wee TinyMCE window

Typography.css is loaded in the CMS to ensure the TinyMCE content looks the same as the site. What goes wrong is when you don't class everything a .typography, styles can run amok and hijack styles in the CMS. One of my projects has awesome orange buttons in the backend now.

It took me a while to get the whole concept and it does make sense. You want a systematic way to make the site content look the same as it does in the backend. Non-technical users think it's magic.

However the concept is not communicated or documented very well. The book does a marginally better job than the wiki, but I still had to rely on experience and intuition to figure it out.

Just cooking this up, the hotness would be a built in CSS editor for both classes in the CMS. It could use iframes to load both TinyMCE and a Page template. It could also ensure your classes are scoped correctly as to not screw with other things.

Avatar
Juanitou

Community Member, 323 Posts

7 December 2009 at 10:13pm

Hi!

Well, that used to work… before updating to 2.3.4! Now the WYSIWYG content is not been styled with typography.css, even if it’s being loaded in the header. Has somebody remarked it?

Regards,
Juan

Avatar
bummzack

Community Member, 904 Posts

8 December 2009 at 12:04am

Yes, I noticed that too.
Was able to fix it by adding the following to mysite/_config.php

HtmlEditorConfig::get('cms')->setOption('content_css', 'cms/css/editor.css, mysite/css/editor.css');

Replace the red colored part with the path to your stylesheet...

Avatar
dalesaurus

Community Member, 283 Posts

8 December 2009 at 2:14pm

So it looks like this was known and fixed a few days ago?

http://open.silverstripe.org/ticket/4634
http://open.silverstripe.org/ticket/4493

Avatar
Juanitou

Community Member, 323 Posts

8 December 2009 at 11:38pm

Go to Top