MoodleZenGarden http://www.moodlezengarden.com/index.php en 2006-09-06T16:05:56+02:00 daily 1 2006-09-06T16:05:56+02:00 Nuvola Iconset 1.6 http://www.moodlezengarden.com/index.php?2006/09/06/6-nuvola-iconset-16 2006-09-06T16:05:56+02:00 en Jean-Marc Loisil Moodle CSS 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 : 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 :

sets

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

Download

There are now 3 versions of the set :

Install

Follow these steps to adopt the new iconset :

  1. Uncompress the zip file
  2. Copy the pix folder in your theme folder
  3. Open the config.php file in your theme folder and change the following parameter :
    $THEME->custompix = true;
]]> Moodle-Nuvola overview http://www.moodlezengarden.com/index.php?2005/09/25/5-moodle-nuvola-overview 2005-09-25T15:46:41+02:00 en Jean-Marc Loisil Icones 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

nuvola1

nuvola2

nuvola3

nuvola4

nuvola5

nuvola6

]]> Course icons http://www.moodlezengarden.com/index.php?2005/09/23/3-course-icons 2005-09-23T09:15:26+02:00 en Jean-Marc Loisil Icones The course icon is very visible on many Moodle sites, here are a few possible variations depending on you Topic. 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) :

course icon in Moodle

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.

new course icons

Download

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

Install

Change the course icon in a few steps :

  1. Uncompress the ZIP file
  2. Choose one icon and rename it "course.gif"
  3. Copy this icon in the "c" and "i" directories located in the following folder YouMoodleSite/themes/YourTheme/pix
]]> Nuvola Iconset 1.5 http://www.moodlezengarden.com/index.php?2005/09/20/2-moodle-nuvola-icons 2005-09-20T22:10:20+02:00 en Jean-Marc Loisil Icones 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. 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) :

moodle-nuvola

You can see an overview of the set on this page

Download

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

Install

Follow these steps to adopt the new iconset :

  1. Uncompress the zip file
  2. Copy the pix folder in your theme folder
  3. 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.

Palette

]]> Rounded Corners http://www.moodlezengarden.com/index.php?2005/09/17/1-first-post 2005-09-17T21:56:21+02:00 en Jean-Marc Loisil Moodle CSS How to switch from hard-edged corners to rounded corners in Moodle blocks with one simple and compatible technique ? How to switch from hard-edged corners to rounded corners in Moodle blocks with one simple and compatible technique ?
Round chapo

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 :

Round Moodle

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.

Block haut

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 :

Block bas

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