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:
990 sites
46 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
  • Gillian Delvigne
    Wed, 26 Jan 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!
  • Roger Segú
    Fri, 28 Jan 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!
  • Gillian Delvigne
    Tue, 15 Mar 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.
  • Roger Segú
    Mon, 21 Mar 2022, 5:16 PM
    Thanks, Gillian! I hope it works fine for you smile
  • Tim Brouckaert
    Wed, 14 Dec 2022, 4:28 AM
    Since Moodle 4.1 TinyMCE 6 comes back as an editor, from 4.2 and up, it will be the default and Atto will be removed. Any chance this will also be migrated to TinyMCE?
  • Roger Segú
    Wed, 14 Dec 2022, 5:25 PM
    Hi Tim,
    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.
  • Roger Segú
    Wed, 14 Dec 2022, 6:08 PM
    Also, just in case you wish to help give the approval process momentum, you can do that by clicking on 'Vote for this issue' in the Moodle Tracker's ticket, here's the link:

  • Tim Brouckaert
    Wed, 14 Dec 2022, 6:10 PM
    Done! Thanks for your work!
  • Roger Segú
    Wed, 14 Dec 2022, 6:21 PM
    Great! thank you very much for your support, Tim!
  • Nico Hang
    Wed, 26 Apr 2023, 1:34 PM
    Thank you for this Plugin! The Block "Learning Outcomes" ( is not avaiable in this version, will it be added sometimes? This would be great smile
  • Roger Segú
    Wed, 26 Apr 2023, 4:37 PM
    Thanks, Nico! Sure, I count on adding the "Learning Outcomes" component to this plugin version very soon smile Please keep tuned!
  • Claudio Visa
    Sun, 14 May 2023, 2:45 PM
    como hago para cargar las plantillas
  • Roger Segú
    Sun, 14 May 2023, 6:37 PM
    Hola Claudio, a qué plantillas te refieres?
  • Tim Boniface
    Fri, 12 Apr 2024, 1:41 PM
    What's the ETA on updating atto version to version 2.1.0 in line with the TinyMCE plugin?
  • Ольга Федорова
    Wed, 8 May 2024, 12:23 AM
    We are really looking forward to the plugin for moodle 4.3 smile
1 2
Please login to post comments