Moodlecloud “PostIt”s with Generico

Published by Poodll Guy at August 17, 2015

Moodle Cloud has a neat “Post It” note feature. It appears as a block and looks like this:

post it note

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

Lets make 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”

title field

We add the container html tags that our CSS will style, in this case two div tags with styles classes declared.

body and end

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);
}