TinyMCE and css specificity

[tophers]

I posted this on another string before I realized it was in the Developers section - makes more sense to address it here.

We typically try to employ basic html elements when styling content, then use css specificity to achieve the desired effect. For example:

Code: Select all

h3 {
	color:#CCCCCC;
	font: bold 14px/18px Arial, Helvetica, sans-serif;
	text-transform:uppercase;
}
#sidebar h3 {
	color:#50A1CD;
	font:bold 14px/16px Arial, Helvetica, sans-serif;
	text-transform:none;
}

So that the editor simply has to choose to style the text (rather than a particular style, like .sidebarheading, that could be misused).

Our problem is the WYSIWYG display - the Page Edit view doesn't show these div-specific styles within the Content Block editing windows, so the H3 in the Sidebar show up as gray, not the blue #50A1CD that they should be. The editor (our client) doesn't see them headings as blue, and then tries to add styles to the until it becomes blue (usually messing everything up in the process!).

In the example above the {content block='Sidebar'} is wrapped in . Is there a way to have TinyMCE read the container id or class of a Content Block, and display the styles accordingly?

[Somebody_1]

I would also like to know if this is possible.

[paulbaker]

Hi Guys

Yes so would I...  I brought this up a while ago but no solutions given as yet:
http://forum.cmsmadesimple.org/index.ph ... 59657.html

It is a bit of a pain, since the whole idea of CMS is to have non-techies editing in WYSIWYG editors.

[tophers]

I'd originally replied to another post on this topic (under Developer's Discussion, of all places!), and have got a reply from Dr. CSS - looks like we're out of luck, unless someone else has thoughts on this...
http://forum.cmsmadesimple.org/index.ph ... 043.0.html