Moodle Cloud has a neat “Post It” note feature. It appears as a block and looks like this:
This is done using a feature of most Moodle themes, that allows you to add custom css in the theme settings page. In this case the theme is the MoodleCloud theme, and the custom css can be seen in the custom css text area on the settings page:
site administration -> appearance -> themes -> MoodleCloud
That CSS looks like this:
/* ----- Post-it ----- */ .tip-container { margin: 20px; position: relative; } .note { color: #333; position: relative; padding: 10px; box-shadow: 4px 6px 8px 0 rgba(0, 0, 0, 0.1) } .yellow { background: #FFFFC6; -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); } div#inst19.block_html.block { background-color: transparent !important; border: none !important; shadow: none !important; } /* ----- End post-it ----- */
Well knowing that, its a simple case to turn that into a Generico Template
First of all we start a new template by choosing a blank one from :
site administration -> plugins -> filters -> generico
We call it “postit”
We add the container html tags that our CSS will style, in this case two div tags with styles classes declared.
Note that by adding the closing div tags in the “End Tags” field. We tell Generico to create start and end tags. This allows us to sandwich content between the tags that we can edit in the HTML editor.
Finally we add the css in the custom CSS field of the Postit Generico template. The CSS is slightly customized.
/* ----- Post-it ----- */ .tip-container { margin: 20px; position: relative; width: 300px; }
.note { color: #333; position: relative; padding: 10px; box-shadow: 4px 6px 8px 0 rgba(0, 0, 0, 0.1) }
.yellow { background: #FFFFC6; -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); }
/* ----- End post-it ----- */
We go to a forum and from the Generico item on the Atto toolbar, open the Generico dialog. We choose the “postit” template and insert it on the page.
The page will now look like this.
We insert our message between the tags
And when we display the forum post on the page, it looks like this…