I am trying to modify the TinyMCE.css

Development Developing for Plone
1

Hello,
I am trying to edit the file "tinymce.css" to include some custom types for the TinyMCE pulldown.

I can find 'tinymce.css" via: http://sibs.docentims.com/++resource++tinymce.stylesheets/tinymce.css
so I know the file contents and I want to add to it.

I found: http://docs.plone.org/appendices/five-grok/browser-components/resource-directories.html
so i understand the format of the url and how resources work. Makes sense.

So, How do I actually find "tinymce.css" so I can edit. I used the 'find' in zope. no luck.

thanks for any words of wisdom for everyone.

wayne glover

2

Hi, I tried the very same thing but with CKEditor. I was using z3c.jbot which is supposed to be the way to override resource files - though I did not succeed (see my old post). But maybe you can give it a try.

As second option, you can register your own resource directory with the exact same name and bind it to your product layer. Please remark, that you also have to include all the other files which originally reside in the tinymce.stylesheets resource directory.

3

Given the above questions, Here is what got from a very knowledgeable expert.

You'll need to familiarize with:
Python packaging
Overriding "resources" in Plone
Bundling your customizations into a package and having them be installable in Plone via GenericSetup profiles

All this to be able to define styles for tinyMCE. Doesn't make sense. What good is it to be able to add styles to pulldown (easy) without being able to define them (hard/expensive).

Does anyone know a better way??

4

Honestly, the way that TinyMCE 3 is packged is a bit of a mess -- does not fit the typical model of skins being easy to override in Plone 4. z3c.jbot is still your best bet, see http://sourceforge.net/p/plone/mailman/message/33753035/

If you are seriously using Plone, you should have a site policy product package anyway, only a one-time cost to create a package and add it to your buildout, then the whole kitchen sink can go in there for simple stuff like this.

5

Does this help?

http://www.uwosh.edu/ploneprojects/docs/how-tos/fix-tinymce-small-font-problem-1

1 Like
6

I'm not sure why they told.you the hard way.
First make sure you are using a diazo theme. If not download one and use
that
Go to the theme editor and add a new CSS file and include it in .HTML
mockup.
Add your styles
Go to the tinymce control panel and add in the style names and their
associated classes.

7

I got a lot of great help from Quinta Group. Here is what they showed me:

  1. open the (Diazo) theme, and add this to the CSS:

/---START OF my styles --/

.sibs-h1 {
border-bottom:0;
font-size:1.5em;
line-height:1.23em;
margin-bottom:0.5em;
text-align: center;
}
.sibs-h2 {
border-bottom:0;
font-size:1.17em;
line-height:1.27em;
}
/---END OF my styles --/

(Note the "." before sibs Not the '#"

  1. go to TinyMCE configlet and in Styles box, add (for these two sample styles)

Sibs H1|h1|sibs-h1
Sibs H2|h2|sibs-h2

this worked for me . thanks Volodymyr Rudnytskyy at quinta group