TinyMCE and use of IDs in Typography.css
Permalink
Hi,
Apologies in advance as I know this been discussed before, but I need some clarification because the steps I've taken aren't working.
If I've read correctly, you need to add the ID of a div containing content on a page BEFORE styles in typography.css in order to not affect TinyMCE's own styling.
However, this means that styles aren't reflected in TinyMCE's editor pane, only on the rendered page.
What's the correct procedure for using that ID in typography.css? Should I only be adding it before CSS that affects TinyMCE's layout? If so, what's the point of main.css considering that's meant to be used for layout CSS only I thought?
I'll include an example:
typography.css has this:
#wrapper p {color:#ccc;}
But TinyMCE only shows the changes when I do this (which makes sense):
p {color:#ccc;}
When do I add the ID before styles in typography.css?
Thanks
Apologies in advance as I know this been discussed before, but I need some clarification because the steps I've taken aren't working.
If I've read correctly, you need to add the ID of a div containing content on a page BEFORE styles in typography.css in order to not affect TinyMCE's own styling.
However, this means that styles aren't reflected in TinyMCE's editor pane, only on the rendered page.
What's the correct procedure for using that ID in typography.css? Should I only be adding it before CSS that affects TinyMCE's layout? If so, what's the point of main.css considering that's meant to be used for layout CSS only I thought?
I'll include an example:
typography.css has this:
#wrapper p {color:#ccc;}
But TinyMCE only shows the changes when I do this (which makes sense):
p {color:#ccc;}
When do I add the ID before styles in typography.css?
Thanks
<div id="wrapper">
<div id="content">
<?php
$a = new Area('Main');
$a->display($c);
?>
</div>
</div>
...when I click to add a block or edit a block, TinyMCE has no idea that the content is going to go inside the #wrapper or #content div.
That being said, I think you can add classes (not ID's) to your typography.css that will show up in the "styles" menu of TinyMCE, but perhaps this doesn't work when you have nested elements -- e.g. maybe you can try putting this in your typography.css:
.greytext { color: #ccc; }
(Note that it's a .class instead of a #div, and note that the "p" is gone)
I have had limited success with this, though, and don't even bother anymore -- I just stick to styling the plain html tags (body, p, h1, h2, h3, etc.) in typography.css, without using id's or classes.
BTW, the order of adding ID's before or after typography.css doesn't really matter -- it's either in the typography.css or it's not. If it's in typography.css then TinyMCE can use it (if it's in the proper format -- see above), and if it's not in typography.css then TinyMCE can't use it. The only time it would make a difference is if you have conflicting styles in your typography.css and main.css files -- but there is no reason to have this (if you do, remove the conflict -- either put it in one or the other).
Hope that helps!
-Jordan