I can't find any documentation on implementing this theme setting. Can someone please help? Here's what I have so far:
I'm guessing that these will show up in the "Styles" dropdown in the TinyMCE editor. Is this correct?
I have added the following to my config.php:
$THEME->editor_sheets = array('editor');
Inside editor.css, I've included the following CSS to test:
.small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large { font-size: 1.25em; line-height:1.5em; margin-bottom: 1em; }
.quiet { color: #999; }
.hide { display: none; }
.highlight { background: #ffc; }
.top { margin-top: 0; padding-top: 0; }
.bottom { margin-bottom: 0; padding-bottom: 0; }
But, it's not working. What is the correct way to work this. It's a neat feature that my clients will want to implement for sure.
Is this any help...
http://openconcept.ca/blog/jesse/tinymce_adding_css_styles_to_menu_style_pulldown
also this...
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/editor_css
I found a great site last night but went and lost my history!
Will search again and get back to you with the URL
Cheers
M
http://openconcept.ca/blog/jesse/tinymce_adding_css_styles_to_menu_style_pulldown
also this...
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/editor_css
I found a great site last night but went and lost my history!
Will search again and get back to you with the URL
Cheers
M
Hi Patrick,
Did you get any closer to solving this problem?
Mary
Did you get any closer to solving this problem?
Mary
Thanks Mary, it did get me closer to an understanding of what's going on. $THEME->editor_sheets should be replacing the WYSIWYG variable inside the TinyMCE folder with a stylesheet from the theme folder. This is very valuable to theme developers as we can now set default style classes for our themes to keep them looking nice.
I've filed a bug to have Sam take a look.
MDL-22247
I've filed a bug to have Sam take a look.
MDL-22247
Correct - it is for Styles menu but it is possible that Petr has not yet implemented editor changes and administration of buttons and menus to theme level.
If you add styles to lib/editor/tinymce/editor_styles.css and clear cache it mostly works... but not with $THEME->editor_sheets = array('editor'); like you said...
patrick.gif
I confirm what Mauno said. Last night I added styles to my moodle 2.0 tinymce editor directly using editor_styles.css but it I couldnt make it to work via the theme way!!
Thanks for the confirmation. This is a bug then.
I can´t get this to work. I´ve done the following:
- The site is in theme_designer mode, so cache is cleared.
- Edited editor_styles.css located at /lib/editor/tinymce and added a few styles.
But I´m not able to see the styles added in the editor list.
Isn´t this bug fixed.
What am I doing wrong?
Thanks in advance.
Tom
Hi Tomas,
I haven't used this myself, but just to let you know the bug is reported as fixed so it should be working.
One thing though, /lib/editor... styles.css would not be part of the theme css itself so theme developer mode may not be clearing the cache completely. Have you tried Purge all caches in Site Administration->Developer ?
Richard
Thanks Richard, I´ve purged cache with no results.
These are the steps I followed:
1. Added the following code to config.php
$THEME->editor_sheets = array('editor_styles');
2. Added the following code to editor_syles.css to test
.small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large { font-size: 1.25em; line-height:1.5em; margin-bottom: 1em; }
.quiet { color: #999; }
.hide { display: none; }
.highlight { background: #ffc; }
.top { margin-top: 0; padding-top: 0; }
.bottom { margin-bottom: 0; padding-bottom: 0; }
3. Purged cache from site administration
4. Went to edit a label, but couldn´t find these 3 styles I added.
I think I should find something like the image of Mauno.
Am I doing something wrong?
Thanks in advance.
If you want to use theme style sheets you should probably add to your theme config.php something like
$THEME->editor_sheets = array('editor');
and add to your theme subfolder /style a css file editor.css with needed css rules.
If you want to use the rules for several themes you can use as well skin css and create or change skins - default init code is using skin called o2k7 given in lib/editor/tinymce/lib.php and skin css is (somewhere like) in folder lib/editor/tinymce/tiny_mce/3.3.9.2/themes/advanced/skins/o2k7/content.css
Thanks Mauno.
1. I added "$THEME->editor_sheets = array('editor');" both to config.php of moodle root and of moodle theme folder as I was not sure wich should be edited.
2. Next I added an editor.css file in simplespace/style with the css rules shown at the top of the forum.
3. Purged Cache.
I tried to edit a label to see if the changes were made, but the same old styles remain as before and the new three that I added to editor.css are missing.
Am I missing something?
Thanks.
Also I saw that If I edit ui.css and not content.css the styles shown in the listbox change, but when I apply them to the label, thery remain as they were before the modification.
I tested this last time some months ago but after reading your post my guess is that you have managed to add styles to editor itself (the box where all those buttons of toolbar are) and if you need to use the same styles on labels and other resources/pages of moodle you will need to have the same css rules added to normal theme css files - not only editor content css files.
Content css controls how text, buttons etc look in editor, theme css controls how different styles look on pages of moodle.
There are also several "levels" of css in tinymce - advanced theme of tinymce is using skin css (content.css and ui.css or with skin variants ui_nameofvariant.css) with code
if (ed.settings.content_css !== false)
ed.dom.loadCSS(ed.baseURI.toAbsolute(url + "/skins/" + ed.settings.skin + "/content.css"));
and
DOM.loadCSS(s.editor_css ? ed.documentBaseURI.toAbsolute(s.editor_css) : url + "/skins/" + ed.settings.skin + "/ui.css");
if (s.skin_variant)
DOM.loadCSS(url + "/skins/" + ed.settings.skin + "/ui_" + s.skin_variant + ".css");
so all this depends on init code of tinymce (skin and skin_variant, editor theme and content_css + init code of tinymce of moodle sets in lib/editor/tinymce/lib.php first
$contentcss = $PAGE->theme->editor_css_url()->out(false);
and later
'content_css' => $contentcss,
If you read http://tinymce.moxiecode.com/wiki.php/Configuration:content_css you could actually use any stylesheet anywhere to define those styles - for example custom theme stylesheet directly in path of 'content_css'