Moodle Plugins directory: Components for Learning (C4L) | Moodle.org
Components for Learning (C4L)
A plugin for the Atto editor that provides a collection of visual components designed explicitly for Learning, based on the parent project https://componentsforlearning.org.
You can find a more detailed description of the project on its website, https://componentsforlearning.org. You will find there the related documentation (https://componentsforlearning.org/components), and some general usage recommendations for all components included there.
No configuration settings are required for this plugin. Just install it from the Site Administration area (Plugins → Install plugins → Install plugin from ZIP file).
Once the plugin is installed, you will need to make the button visible in the Atto editor. To do so, also in the Site Administration area, go to Plugins → Text Editors → Atto HTML editor. Then scroll down to the Toolbar config area, and add the text 'c4l' whenever you wish the editor bar to show the button. For instance, if you want the button to show before the 'emojipicker' button, just insert it like that:
files = c4l, emojipicker, image, media, recordrtc, managefiles, h5p
This plugin has been possible thanks to the Institut Obert de Catalunya, which has committed to the project and is currently using a very similar version of the components. A big thank you to all the teachers that accompanied me all over the design and testing process.
Screenshots
That's what I'm going to do. But before that, I wanted to be sure that there wasn't a way to do it that was provided by the plugin.
Thanks for showing interest in the plugin. There is actually a TinyMCE version waiting to be approved by Moodle. Once it's done, it will be automatically added to the official Plugins directory. I hope it doesn't take long.
https://tracker.moodle.org/browse/CONTRIB-9149?jql=text%20~%20%22c4l%22
Thanks!
I want to customize the colors of the quote and other components, how can I do that?i
For example the left line and the " is light blue and I need converted to an specific red that we are using in our school, how can I do it?
THANKS IN ADVANCE.
It’s a bit complicated to modify the styles, as the original idea was to save the teacher the task of visual design (although I completely understand that in certain contexts, it may be necessary or desirable).
There’s a part you can modify from the CSS (Site administration → Appearance → Additional HTML → Within HEAD). For example, in the case of the Quote component, if you want the color of the sidebar to be green, you should add the following CSS:
.c4l-quote .c4l-quote-line, .c4lv-quote .c4l-quote-line {
border-left-color: #4CAF50;
}
However, the quotation icons are actually images (SVG), so you will need to modify them via code within the plugin folders:
lib/editor/atto/plugins/c4l/pix/noun_project_icons
In this case, in order to change the color of the icon c4l_quote_icon.svg and assign it the new color, you'll need to look for all occurrences of the text fill="#1679F9" in the file and replace it with fill="#4CAF50" (or the new color you’ve chosen).
Naturally, since you’re modifying the original files, when you update the plugin you’ll need to be careful not to overwrite these changes, or otherwise adding them again.
Another option would be to use the functionality to create your own custom components, although this is only available for the TinyMCE version: