Components for Learning (C4L)

Atto ::: atto_c4l
Maintained by Roger Segú
A collection of visual components designed explicitly for Learning to use in the Atto editor.
Latest release:
502 sites
33 fans
Current versions available: 1

A plugin for the Atto editor that provides a collection of visual components designed explicitly for Learning, based on the parent project

Plugin demo screenshot

You can find a more detailed description of the project on its website, You will find there the related documentation (, 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

Screenshot showing how to add the button to the Atto menu.

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.


Screenshot #0
Screenshot #1
Screenshot #2
Screenshot #3
Screenshot #4


Roger Segú (Lead maintainer)
Please login to view contributors details and/or to contact them

Comments RSS

Show comments
  • Thu, Aug 12, 2021, 8:13 PM
    Approval issue created: CONTRIB-8642
  • Mon, Sep 27, 2021, 10:20 PM

    This looks like a useful plugin but when I try to install it, I get the following error message:

    Exception - Argument 1 passed to core_plugin_manager::remove_plugin_folder() must be an instance of core\plugininfo\base, null given, called in [dirroot]/lib/classes/plugin_manager.php on line 1419
  • Mon, Sep 27, 2021, 11:15 PM
    Hello P H,

    Sorry to hear that! What Moodle version are you using?
  • Tue, Sep 28, 2021, 6:06 PM
    3.11 but I went on despite the error message and installed the plugin and it seems to be working fine.
  • Tue, Sep 28, 2021, 6:30 PM
    Great!! I hope you enjoy it smile
  • Wed, Oct 27, 2021, 12:41 AM
    Sencillo...pero muy EFICAZ!! esas pequeñas-grandes cosas...ya lo tengo funcionando y seguro que nos ayuda a dar un servicio más atractivo y eficaz. GRACIAS
  • Wed, Oct 27, 2021, 3:22 PM
    Gracias a ti, Raquel!!! Comentarios como el tuyo hacen que merezca la pena contribuir con esta gran comunidad smile Me alegro que te resulte útil el plugin!!
  • Wed, Jan 26, 2022, 11:06 PM
    Is there a way to edit components styles ? I would like to use this beautiful plugin but I would love to edit the components to integrate them with the design of our site (graphic charter and theme used). It seems that the official and the documentation websites aren't working anymore. Many thanks!
  • Fri, Jan 28, 2022, 3:27 PM
    Thank you, Gillian!! Sorry for the docs, I didn't find the moment to publish them yet but I hope they will be available soon. There is not availabe nor planned adding a feature that allows to add custom syles through the Site Administration, but you could easily modify the styles.css file in the plugin folder -you'll find the CSS rules for the components under the comment "/* COMPONENT STYLES */". However, I strongly reccomend you to add the modifications directly through the Site Administration area, under Appearence > Themes > [Your Theme] > Advanced Settings > Raw SCSS, so your custom styling remains independent and it doesn't get overriden by future plugin updates. To do so, just add the rule you wish to modify, change its attributes' values and those will prevail. For instance, if you wanted the Attention component to be red instead of the current orange hue, you'd just need to add the following code and that would do the trick:

    .c4l-attention {
    border-left: 6px solid red;

    Anyway, if you need assistance or have any doubt regarding this feel free to write me at Cheers!
  • Tue, Mar 15, 2022, 5:06 PM
    Thank you for your quick and kind reply.
    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.
  • Mon, Mar 21, 2022, 5:16 PM
    Thanks, Gillian! I hope it works fine for you smile
Please login to post comments