How can I add CSS in a theme to style contents in TinyMCE Editor?

How can I add CSS in a theme to style contents in TinyMCE Editor?

by Rodney Wolford -
Number of replies: 17

Hi Mary,

Your post above for the code to make the random quotations block work leaves me with one BIG time newbie question.

How do you acquire a list of the .css options in a theme so they can be used in the TinyMCE HTML editor to generate content? I know that you can see what .css is being used with firebug, but often it does not lead back in a clean way to the underlying .css. Also, it doesn't display any hierarchy for related .css.

At this point, I have generally been adding my own .css to the custom code option of the theme I am using (currently Essential). But I know I should not generate redundant .css and that it is possible to have too much .css. But I just don't understand how to get a cheat sheet that would let me use existing theme .css rather than adding my own.

Any words of wisdom that might lift the veil of ignorance from my eyes?

Thanks,

Rod

 

(Edited by Mary Evans - original submission Friday, 6 September 2013, 9:45 PM) Split from Aaradyha theme discussion.

Average of ratings: -
In reply to Rodney Wolford

Re: How can I add CSS in a theme to style contents in TinyMCE Editor?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Rod,

If you open any Moodle theme folder you will find a config.php. In that file you will find this line which refers to the Editor stylesheet.

$THEME->editor_sheets = array('editor');

If you then look in the style folder with your theme you will see a copy of editor.css.

Providing that style/editor.css exist in a theme and the above line is in your theme's config.php then all the styles you add there will be used when you add content to any of your Moodle pages, be it on the frontpage site topic section, in a forum, course content when using the TinyMCE Editor.

The styles you need in there should be text related like fonts, headings, paragraphs, unordered lists, ordered lists, which can be written like so...

body {font:14px/1.4 arial,helvetica,sans-serif; color: #333333;}
h1 {font-size: 25px; }
h2 {font-size: 18px; }
h3 {font-size: 14px; }
h4 {font-size: 12px; }
h5 {font-size: 10px; }
h6 {font-size: 8px; }
p { margin-left: 5px;}

But whatever you add to this list for your editor.css file should already exist in your theme css file too, otherwise you will end up with a hotch potch of unrelated styles.

Hope this helps?

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: How can I add CSS in a theme to style contents in TinyMCE Editor?

by Rodney Wolford -

Mary,

This is very helpful, but doesn't completely answer my question. You state "all the styles you add there will be used..." Of course, this is good to know. But a bigger part of my question is how I can access and use a theme's .css without a need to add my own new .css? Stated in another way, you also say "whatever you add to this for your editor.css file should already exist in your theme .css too." So from where does that knowledge of what exists in the theme .css come ?

For example, to use a text style (as a simple case), I would prefer to use a .css developed by the theme rather than make my own. But, it seems this would require the ability for me to access a "master .css Theme list" of some sort to ascertain  the outline or nested order of .css attached to a theme. But I don't see how this .css information on a theme is known. Yet I can't believe trial and error (through firebug) is the only recourse.

You also raise a second concern for me with your comment. I have had the experience of creating .css that disappears when I do a Moodle update or a theme change. In general, inserting this into the custom .css area for a theme mitigates this problem. How is this controlled in the $THEME->editor_sheets = array('editor')? What causes these changes to persist in the face of Moodle version and theme updates? Do files have to be saved separately? I am able to update Moodle through git, but sometimes end up in a pickle when I must stash or commit my own changes. What are the issues here for making sure my changes follow me?

I realize these questions may not be exactly relevant to "themes," but in a sense, they are because they concern how one deals with the .css available in a theme. So I hope you are willing to expand on your comments already provided in some way or direct me in a direction that is helpful.

Regards,

Rod

Average of ratings: -
In reply to Rodney Wolford

Re: How can I add CSS in a theme to style contents in TinyMCE Editor?

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

In the first instance Rod, those styles used in the theme should be present in the editor.css anyway to enable the TinyMCE editor to pick them up and actually be a WYSIWYG tool, rather than you having to add them.

Frequently though this is the straight typography related to the theme and relates to standard selectors such as those given in Mary's post, it doesn't include other possible features (such as .button for example) so that those features appear in the editor itself (although if they exist in the theme, and you add them into the html in the editor they will appear correctly on the page, just you wont see them in the editor itself).

Outside that it really is a case of either going through a theme's individual css or firebug or any documentation provided by the theme creator - in Essential's case, which is what you said you are using at the moment, you may get some additional information through the bootstrap site itself.

As for theme changes you make, well the advice given throughout this forum is not to make changes directly to a core theme (I would extend that to any theme that you are likely to update on a regular basis, such as Essential which Julian is continuing to put excellent hard work and development time into). You should clone the theme and make your changes in the clone, that way your changes will not be overwritten by an update of moodle/theme.

If you feel those changes are an improvement to the theme (rather than institution specific) - such as styles which should be included in the editor.css, then its worth contacting the theme designer to see if they will add them into the released version of the theme. That way, they will be included in updates in the future and other people in the community will also benefit - most theme designers are very receptive to such suggestions, particularly when it is accompanied by the code/css itself smile We all want to make our themes as good and as user friendly as we can.

Perhaps in that way, the editor.css file will also begin to become the master list you are looking for.

Richard

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: How can I add CSS in a theme to style contents in TinyMCE Editor?

by Rodney Wolford -

What you and Mary have presented here has added a lot of clarity to what I have been trying to do. Thank you both so much.

As I have mentioned previously I have been adding custom .css in the theme pages "custom css" option set through the administrator's menus in the theme setup page or by adding a separate .css file called mycss in the theme style folder, then listing it in the Theme > sheets array. Generally, this has worked, but no WYSIWYG until after exiting the TinyMCe editor and displaying the page. And I often find that I run the risk of duplicating other existing styles as well.

This option of the editor.css you both discuss seems like it can make a major difference. However, when I open the config.php file in the Essential theme I do not see an editor.css in the array. Is this just a .css file I create, similar to the mycss file I am already using?

If so, what causes it to link to the TinyMCE editor and how is it different from the mycss file I already create other than as a naming convention (of course, I favor following any naming convention and will quickly do so)? Also, how is it different from using the custom.css style sheet either within the administrator's menu or adding directly to its style sheet in the theme folder?

As a newbie more used to DVD development using Director Lingo, I find my head often more in a muddle than in Moodle!

Thanks for any comment or direction. It is all very fascinating.

Regards,

Rod

Average of ratings: -
In reply to Rodney Wolford

Re: How can I add CSS in a theme to style contents in TinyMCE Editor?

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Hi Rod

It would appear that essential doesn't have an editor.css file itself, so I'm assuming that it pulls the one from the parent theme (I'll try to confirm that for certain later if I can)

If you want to edit this file then, you would need to copy the one from the bootstrapbase theme into your own theme and edit the config.php to point to it

$THEME->editor_sheets = array('editor')

In this instance I'm not sure there is any benefit in adding it to the list of main css files as the way it is generated from the bootstrap less files in the first place may well mean that this would simply duplicate all the css - although you may want to if you are going to add to it considerably with your own styles.

Richard

Average of ratings: Useful (1)
In reply to Rodney Wolford

Re: How can I add CSS in a theme to style contents in TinyMCE Editor?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Rod, I am almost certain that the editor.css from Bootstrapbase is not inherited by TinyMCE like the moodle.css is for the theme. So the best thing to do is add an editor.css containing something really silly, like ...

p { border: 2px dashed red; padding 10px 0; margin-left: 50px;}

Add it to your theme's style folder.  And last of all add it to the $THEME editor setting in your theme's config.php like so...

$THEME->editor_sheets = array('editor');

Save all this back to your server. Loginto Your Moodle site/localhost whatever and add some text and see if the css is picked up.

If it is then you know the editor.css is bing used.

Save the work you added and now see how it is styled in Moodle. It should be displayed normally.

This is just something to give you an idea how it works.

Usefull stuff to add to the editor is ul ol list-style-types such as...

ul { list-style-type: upper-latin; }
ul ul { list-style-type: lower-latin: }
ul ul ul { list-style-type: square; }

ol { list-style-type: upper-roman; }
ol ol { list-style-type: lower-roman; }
ol ol ol { list-style-type: circle; }

To get both to work together you need to add the css that YOU want to use and see in both Edit and Published mode, into both the editor.css and your mycss.css (or your theme css stylesheet equivalent.

Hope this helps?

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: How can I add CSS in a theme to style contents in TinyMCE Editor?

by Rodney Wolford -

Mary,

I think this is going to be very helpful. This makes perfect sense to me -- so far. Of course, time will tell. I had been making some of my .css, specifically for things I needed for our site, but had no idea about the editor.css.

Many thanks to you and Richard for your explanations.

Regards,

Rod

Average of ratings: -
In reply to Mary Evans

Re: How can I add CSS in a theme to style contents in TinyMCE Editor?

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Hi Mary,

Just tested and the editor.css is inherited from bootstrapbase by essential (and presumably then for all themes from their parents)

I added p {background-color:red;} to the bootstrapbase editor.css and this was picked up in TinyMCE when I set the theme to bootstrapbase and also when the theme was set to essential (and also clean which does not have an editor.css either smile )

And in fact adding an editor.css into essential (with other unusual settings) - the bootstrapbase editor.css is still picked up by TinyMCE as well as the added one!

Richard

Average of ratings: -
In reply to Richard Oelmann

Re: How can I add CSS in a theme to style contents in TinyMCE Editor?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Well there you go then. smile

Average of ratings: -
In reply to Richard Oelmann

Re: How can I add CSS in a theme to style contents in TinyMCE Editor?

by Rodney Wolford -

Sooo, based on this new information, what makes sense?

If I add my css in a .css file called mycss.css, will it be reflected in the TinyMce, or do I need to add the editor.css for that reason?

I can't see why the css I add would be inherited elsewhere. But maybe there is a better place to add my .css rather than in a separate mycss.css file. What if I pasted it into the custom.css file in the theme style folder?

And is it any different pasting it into the custom.css file in the theme styles folder then just adding it to the custom css setting available on the theme administrator page? (I know that pasting it the theme administrator page doesn't require a cache purge as is required when placed in .css file in the theme file folder. But that may be a weak reason for using the theme administrator page.)

Also, is custom css pasted in the custom administrator page reflected in TinyMce or does it require the editor.css file to inherit it?

It is somewhat confusing to me at this point. Of course, I can always plunge in with trial and error, but I am also concerned about messing things up beyond all recognition so guidance past the shoals is always appreciated.

Regards,

Rod

Average of ratings: -
In reply to Rodney Wolford

Re: How can I add CSS in a theme to style contents in TinyMCE Editor?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Rod, There are two schools of thought, regarding the Custom CSS v customise stylesheet.

Firstly, the reason most themes have settings, of some form or other, is to make it easier for Admins to change some aspect of the theme, as not everyone has access to the server where their theme is stored.

Secondly the fact you have access to your Moodle files makes it on the one hand easy for you to experiment, and on the other baffling as you are not sure which to choose. My answer to you is that they are both the same.

What I tend to do, when monitoring a theme I have made for someone and where I get access to the server that it's on, I can do some tweaking remotely and then update the the original stylesheets, by copying the css I have used in the Custom settings, and then upload those back to the server. Trial and error sort of thing, which keeps the main stylesheet clean and less likely to overwritten or lost.

The editor.css, on the other hand, is really just a duplicate of the css that is used in the theme. However in bootstrap's case it is the whole of bootsrap css, like buttons, and gradients and wells and text shadows and whatever, that are only triggered if you write it all in a specific way using HTML5. The fact is, however, that TinyMCE does not let you as it only respects HTML4. At least I think that's how it works.

One thing that does puzzle me is that the TinyMCE editor in this forum, here as I type now, uses "Lucida Sans Unicode" not Arial as I would have expected, so whatever font is in this Moodle theme editor.css (if any) is not being picked up unless it is set to use "Lucida Sans Unicode".

If I were you I would add my css to mycss.css and editor.css at the same time, and then I would know exactly what I am doing and what is likely to be published whenever I add some text to a page in my Moodle site.

Hope this helps?

Mary

Average of ratings: -
In reply to Mary Evans

Re: How can I add CSS in a theme to style contents in TinyMCE Editor?

by Rodney Wolford -

Hello Mary,

Again, this helps. It helps because it clears away part of the mystery. It also helps because it makes clear that the mystery is part of it all.

Previously, I have noticed that the TinyMCE does not show me some of what I have done. And that has been part of my confusion. I have worked with the TinyMCE trying to add functions and options that will benefit what I am trying to do and also find myself just frustrated. Most recent example is with implementing ImageMap plugin for TinyMCE. It installs and opens but doesn't function. But that is another story.

I sincerely appreciate the insights you have provided. I also appreciate your help on the TOC for book. I have already downloaded and tested your fix. It works great for me (though at one point I got a message for a block that said "temp block" or similar. But a refresh of screen removed it and allowed all else to proceed as hoped.).

I was also amazed by what a small change it took to fix the book TOC and by the thorough understanding of the variables you must have to accomplish something like this. I was a bit disappointed to see that it was slated for a 2.6 fix and not for 2.5, but maybe that just means 2.6 is close. Also see it is now an improvement, not a bug. Imagine that is true.

Also, I followed the link to Gareth's work on the Grid accessibility work. Very interesting. On our site we are trying to make it as "508 compliant" as possible (US regulation). It is a real challenge and may obstacles.

Anyway, thanks again. For now I am adding both mycss.css and editor.css and we shall see what we shall see.

Regards,

Rod

 

Average of ratings: -
In reply to Rodney Wolford

Re: How can I add CSS in a theme to style contents in TinyMCE Editor?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

MDL-35051 and MDL-39424 are related and very interesting to read.

Average of ratings: Useful (1)
In reply to Mary Evans

Re: How can I add CSS in a theme to style contents in TinyMCE Editor?

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Very interesting reads Mary - I have for a while now started adding editor.css into my main list of css files as well as in the separate declaration for it. In the new theme I've been experimenting with I'm trying to split out these sort of display elements into the one location (editor.css) rather than having them duplicated there from other parts of the css, so I have separated some of the css by function so it can be more easily excluded by other people building on the theme in the future (pagelayout - for layout, obviously/editor - for all the display type selectors that might get used in creating content/etc). It does take some thinking about where (which file) to add the css and what impacts it might have on people creating content in the future, not just on the look and feel of the theme now.

As for the minified css for themes undergoing development/integration work as mentioned in one of those trackers, or themes that are likely to be used as parent themes for others to build on - well, you will remember I made my views known on that at the time and I don't plan on restarting that discussion! smile

Average of ratings: -
In reply to Rodney Wolford

Re: How can I add CSS in a theme to style contents in TinyMCE Editor?

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Comment removed - Mary beat me too it with a much better explanation :D

Average of ratings: -
In reply to Richard Oelmann

Re: How can I add CSS in a theme to style contents in TinyMCE Editor?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Richard, I split this from one of the other thread as it was not part of that particular theme discussion

There is another one I need to split too from the same discussion. :

Just one of those days!

Average of ratings: -
In reply to Mary Evans

Re: How can I add CSS in a theme to style contents in TinyMCE Editor?

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers
Hi Mary Ah, if you mean the one of Fred asking about your Custom Corners theme and blocks - Ive just split it - hope that was OK for me to have done! I guess so if you were planning to split it anyway. smile
Average of ratings: -