Rounded Corners
By Jean-Marc Loisil, Saturday 17 September 2005 at 21:56 :: Moodle CSS :: #1 :: rss
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;
}
Comments
1. Le Monday 3 October 2005 at; 17:33, by Jamie P :: site
2. Le Thursday 22 December 2005 at; 20:04, by Jake :: site
3. Le Sunday 22 January 2006 at; 17:38, by Robin :: site
4. Le Sunday 26 February 2006 at; 04:51, by Bhupinder
5. Le Thursday 2 March 2006 at; 21:34, by Ian
6. Le Sunday 5 March 2006 at; 09:35, by Jean-Marc Loisil
Add a comment