Editor not picking up site styles


Sorry, I am quite new to Concrete5.

I am having trouble with TinyMCE not picking up ANY styles from my site. From what I have read it should be picking up styles from my typography.css, which is in the main directory of my theme (called ALLA), so:


I can't even get the font size and line height in the main body to display correctly, and it doesn't appear to be a caching issue.

The relevant styles is (as a start):

#main-container p {
font-size: 15px;
line-height: 23px;

Any help would be most appreciated!


View Replies:
core77 replied on at Permalink Reply
typography.css is showing some styles in the editor. To design your main content please use the main.css in your templates root folder.
davidfurler replied on at Permalink Reply
Hi vladd,

Thanks for that. It is actually the editor that I want to show styles from typography.css though?

Very frustrating, but I will keep on looking!
goldhat replied on at Permalink Reply
I found a thread about this issue that suggested others have had the same problem, one solution suggested was to have the typography.css at the top root of the theme (not in a /css folder) but you seem to already have that. So it may be a cache issue.

davidfurler replied on at Permalink Reply
I have actually tried editing from multiple locations on different computers, so I am pretty certain it is not a cache issue.

Thanks for your input though! I was reading that thread but it didn't seem to get me anywhere. I will keep on looking...
PatrickCassidy replied on at Permalink Reply

If you've got a specific div id (such as yours) it should appear in the drop-down which is pre-populated with the word "Styles" in TinyMCE. - That is presuming you have added that div id to the typography.css file.

Standard Classes (p, h1, h2, h3, ...etc)are in the drop-down that is pre-populated with "Header1" or similar.

Firstly make sure you are looking for your style in the right place (drop down menu) - as there are 2 in the TinyMCE (as listed above).

Using the TinyMCE makes your styles artificially 'inline styles', so that whatever happens here, will usually override the other rules for styles, unless they're hard-coded in to the main.css style sheet.

If what you are trying to achieve is just add a normal font style to the main areas of your page, you just need to call it "p" in your typography.css, no need to add '#main-container' before it. Then select 'paragraph' from the common classes in the TinyMCE when editing or adding content to that area.

The custom styles are more for where you might have a little unusual styling. For example, if your heading styles were all black, but you needed just one to be orange, you could add it here.

Keep in mind that adding font styles to the typography.css make the fonts appear as they would in the actual published website as you are typing them. If you have defined the styles in the main.css file, although when typing in the TinyMCE they wouldn't look the same, once you SAVE the TinyMCE block and return to the website, you would see the font styles appear as they should.

Hope some of that helps...

Have you got a live site example?
davidfurler replied on at Permalink Reply
Hi Patrick,

Thanks for that. Sorry for the late reply.

> Keep in mind that adding font styles to the typography.css make the fonts appear as they would in the actual published website as you are typing them.

That is actually all I am trying to do. I have removed mention of the main content div in typography.css, so now I just have (eg):

p { line-height: 22px; }

But in the editor, the line height (and font) is still coming out tiny as I type. I can see no other p definition in typography.css

Anyway, I will keep on playing I suppose. It's not such an issue for me, but I want it to be a bit easier once other members of the association start to edit pages.

The dev site is currently athttp://alla.lawlibrary.me though if you think taking a quick look might enable you to help me. It would be much appreciated.