Posted by Screenack on November 30, 2009 at 3:07pm
This seems like it should be trivial.
In my page.css I have redefined the p tag, thusly:
#main-content .node p {
font-size: 24px;
line-height: 28px;
color: #787878;
}Since this is the "normal" style for paragraphs site-wide. This works fine within my genesis subtheme.
However, when using the ckeditor/wyswyg client editor, due to the nature of the element nesting (all within an iframe) the p tag is not nested within a div with the id of main-content. It is merely in a very plain html: html > body > p. It would be sweet if I could make the path html > body > div#main-content > p and then I'd have the problem solved.
As I see it, I could:
- Define a p class for use instead of the base format, as above. (I don't like this for semantic reasons.)
- Create parallel p classes that are formatted identically into non-conflicting css files. (I don't like duplication.)
Much thanks in advance!
Comments
Kyle, If you want to style
Kyle,
If you want to style the p tag within the WYSIWYG editor, try using this selector:
body.mceContentBody p{
//styles
}
"mceContentBody" is the class that is assigned to the body tag only within the iFrame that WYSIWYG creates. This way you can give completely specific styling to the text within the WYSIWYG editor.
Hope this helps!
~Sheena
Thanks, but…
That sounds like a great argument for using TinyMCE as an editor. ckEditor doesn't class the body tag in a like manner; at least by default.
Hah!
OK, ok; I switched from ckeditor to tinyMCE; and now I can do what I wanted to do all along:
#tinymce p,#main-content .node p {
font-size: 24px;
line-height: 28px;
color: #787878;
}
Works great. Much thanks!