TinyMCE, tables and lists
Permalink
Hi,
Still struggling with the concept of typography.css after all this time building C5 sites! My understanding is that typography.css is used purely for styles you want to appear in TinyMCE when editing content blocks.
I also understand that the file needs to be in your theme root and only contain simple classes like .classname (not .'classname p' or #wrapper .classname etc.). However, how do you go about styling lists and tables without affecting the TinyMCE buttons area and C5 dialogue boxes etc.?
I've noticed that things like headings, paragraphs and classes are fine, but CSS for lists and tables like this:
Affects the C5 dialogue overlays and TinyMCE WYSIWYG buttons etc.
Any idea on what the best approach is to avoid this please?
Thanks,
osu
Still struggling with the concept of typography.css after all this time building C5 sites! My understanding is that typography.css is used purely for styles you want to appear in TinyMCE when editing content blocks.
I also understand that the file needs to be in your theme root and only contain simple classes like .classname (not .'classname p' or #wrapper .classname etc.). However, how do you go about styling lists and tables without affecting the TinyMCE buttons area and C5 dialogue boxes etc.?
I've noticed that things like headings, paragraphs and classes are fine, but CSS for lists and tables like this:
ul {margin:20px;} ul li {margin:0 20px;list-style-type:disc;} table td {padding:10px;}
Affects the C5 dialogue overlays and TinyMCE WYSIWYG buttons etc.
Any idea on what the best approach is to avoid this please?
Thanks,
osu
Thanks for getting back to me, however, if I add a class before my styles for lists and tables, TinyMCE doesn't display them...
I see a bit of a catch 22 here where I have to use 'naked' css in typography.css like in my original post for the styles to show in the *editor* area of TinyMCE (i.e. ul li {margin:20px;}), yet these also affect the styling of C5 admin overlays and TinyMCE (outside the editor area).
I'll continue to look around for threads, but I haven't found anything that addresses this issue. Looking at the themes that come bundled with C5, lists and tables are omitted from typography.css, so I can only assume that's because you can't include them in there without them interfering with C5 and other TinyMCE styles?
I see a bit of a catch 22 here where I have to use 'naked' css in typography.css like in my original post for the styles to show in the *editor* area of TinyMCE (i.e. ul li {margin:20px;}), yet these also affect the styling of C5 admin overlays and TinyMCE (outside the editor area).
I'll continue to look around for threads, but I haven't found anything that addresses this issue. Looking at the themes that come bundled with C5, lists and tables are omitted from typography.css, so I can only assume that's because you can't include them in there without them interfering with C5 and other TinyMCE styles?
This seems like a pretty complex typography.css:
http://www.proteuscreative.com/themes/obsidian-1.0/css/typography.c...
Have you linked it using getStyleSheet?
http://www.concrete5.org/documentation/introduction/cheat-sheet/...
You could also write your styles like #example li or #example a instead of #example ul li a, etc.
http://www.proteuscreative.com/themes/obsidian-1.0/css/typography.c...
Have you linked it using getStyleSheet?
http://www.concrete5.org/documentation/introduction/cheat-sheet/...
You could also write your styles like #example li or #example a instead of #example ul li a, etc.
There is a page in the docs about this topic in addition to multiple threads about it.