MoodleZenGarden

Nuvola Iconset 1.6

Here is the latest version of the Moodle-Nuvola iconset for Moodle 1.6. The set was originally created by David Vignoni under an LGPL license.

It comes now in three flavors, enjoy :

You can see an overview of the original set on this page

Download

There are now 3 versions of the set :

Original set Download the set (319 ko)
Noblue set Download the set (304 ko)
Grey set Download the set (325 ko)

Install

Follow these steps to adopt the new iconset :

Uncompress the zip file
Copy the pix folder in your theme folder
Open the config.php file in your theme folder and change the following parameter :
$THEME->custompix = true;

Moodle-Nuvola overview

An overview of the Moodle-Nuvola iconset.

Go back to the download page for Moodle 1.6

Go back to the download page for Moodle 1.5

Course icons

The course icon is very visible on many Moodle sites, here are a few possible variations depending on you Topic.

The course icon is this little image appearing for instance in a course block (here on the moodle.com site) :

The following image gives you an overview of my suggestions for a new icon based on the Nuvola set (LGPL licence). You can choose one of them according to your content.

Download

Click on this icon to download the full set of icons in a Zip file (14 ko)

Install

Change the course icon in a few steps :

Uncompress the ZIP file
Choose one icon and rename it "course.gif"
Copy this icon in the "c" and "i" directories located in the following folder YouMoodleSite/themes/YourTheme/pix

Nuvola Iconset 1.5

On this page you will find the version of the Moodle-Nuvola iconset for version 1.5. The set was originally created by David Vignoni under an LGPL license.

This new iconset can give a modern look to you Moodle site. Here is an comparison of the original set (bottom) and the nuvola one (top) :

You can see an overview of the set on this page

Download

Click on this icon to download the Zip file (113 ko)

Install

Follow these steps to adopt the new iconset :

Uncompress the zip file
Copy the pix folder in your theme folder
Open the config.php file in your theme folder and change the following parameter :
$THEME->custompix = true;

Variations

I have made the set rather bright but I can easily customize it with a batch processing. The following image shows the set based on a differrent palette. You can post a comment or mail me a .act file if you want a customization. To create a custom palette, you can for instance use the software Color Schemer.

Rounded Corners

How to switch from hard-edged corners to rounded corners in Moodle blocks with one simple and compatible technique ?

In many Moodle themes, blocks have rounded corners based on a Mozilla's CSS extension (-moz-border-radius). I tried to make a compatible technique using only 2 background images. I haven't tested it thoroughly but it seems to work at least in all blocks with a header. The result is as follow :

Header

I have put the two states of a header block (shown and hidden) in only one image in order to avoid a preload. As you can see, there is also small drop shadows outside and inside the block.

Here is the CSS for the shown state, you have to define an height as well as a padding to make it work :

.sideblock .header {

background:#f0f0f0 url(pix/test/block_haut.gif) no-repeat;

height:22px;

text-align: left;

padding:10px;

margin:0;

border:0;

}

For the hidden state, you just change the position af the background image with a simple code :

#left-column .hidden .header,

#right-column .hidden .header{

background-position: -200px 0;

}

Content

As there is by default no bottom DIV in Moodle blocks, I applied a background image in the block content. In order to cover all types of block content, you can make a very large image (for example 200px by 600px). The following image is cropped :

The CSS code is also very simple. Don't forget to had padding and to position the backround image at the bottom.

.sideblock .content {

background:#f0f0f0 url(pix/test/block_bas.gif) no-repeat bottom left;

border:0;

padding:0 10px 15px 10px;

}