David Scotson

I believe at the moment the names of most of the icons used in Moodle are hardcoded in the HTML as name.gif. This makes it tricky to replace them with any other kind of image.

However, since the main advantage of PNG over GIF is alpha transparency, and this is currently unsupported in Internet Explorer, I can't see any great need for this at the moment. Any suitable PNG should be easily converted to GIF, though maybe I'm missing something.

A thinking outside the box solution may become available on Monday, when Google is rumoured to be releasing a streaming video service:

http://battellemedia.com/archives/001658.php

There's a new way to customise the user images in your Moodle Themes.

You can follow the gritty details in Bug #3627 but the short version is that newly checked in code means that:

• uploaded images will no longer have black borders added to the actual image
• the default user images no longer have black borders embedded within the image

• if you wish to add a border, of any size, color or line style, you can now do so in your theme by styling the following three classes.

  img.userpicture

  img.grouppicture

  img.defaultuserpic

For example, the standard theme should shortly have the following CSS added:

img.userpicture,
img.grouppicture {
  border: 1px solid #000;
}

This should mean that you don't notice any change from the current situation (except some older user uploaded images having a double border).

To give an idea of the possibilities, here is what I have in one of my themes:

img.userpicture,
img.grouppicture {
  border: 1px solid transparent;
}

a:hover img.userpicture,
a:hover img.grouppicture {
  border: 1px solid #06c;
}

I didn't really want a border, but since some of the images are actually links to the profile I thought it would be good to have some visual feedback, beyond the change in mouse pointer, that this image was also a clickable link.

If you don't have the transparent border, then when the blue border gets added the entire image jumps 1 pixel to the side.

Other interesting ideas you could try would be to add a few pixels of padding as well as a border. If you made the bottom padding much bigger than the others and set the background to white, it would look like a little polaroid.

Generally when people do things like this they add an extra div which isn't present in Moodle, possibly because of bugs in IE5 and 5.5, however these browsers are dying out fast so I wouldn't worry about this kind of problem too much and try to do the simplest thing with borders and padding applied directly to the image e.g.

http://www.fabriekopzijnfrans.nl/css/imagepadding.html

Some more image border ideas (some using div) can be found here:

http://www.mandarindesign.com/boxes.html#changeborder

http://www.mandarindesign.com/boxes.html#dashedborderbox

http://www.noded.com/archives/000558.html

This code has been checked into HEAD which means you can get it from the standard cvs and it will eventuall show up in 1.6. I don't actually know the process for getting this merged into the next 1.5 release. I assume someone has a look at it and decides if it's too great a change for a point release. It's a relatively small change so if you really want it, you shouldn't have too much difficulty integrating it by hand.

Does the following CSS not work?

#course-user .section td { background-color: #000; }

Though Helen is of course correct that this is a bug and should be fixed as well. I generally aim to diverge from the main Moodle codeline as little as possible, though sometimes it is necessary.

Try adding left to this line in image.css:

#page           { background: #fff url("kubrickbgwide.jpg") repeat-y top; border: none; }

to give this:

#page           { background: #fff url("kubrickbgwide.jpg") repeat-y top left; border: none; }

This seems to stop things falling apart as much when I simulate the large content by setting #content width to 1000 pixels in Firefox.

And the following line stops the iframe from being having an invisible background which distractingly shows a two-tone bacgkround if the SCORM itself doesn't set a color and it's width spills over the border.

td.top iframe{ background-color: #fff; }

Warning: not tested on windows/IE yet!

You also seem to have a large amount of padding on the left hand side, earlier versions of Kubrick had this but the more current ones have very little padding, that would help fit more content in the central column.

I really like your header image, you should think about extending the sky right up to meet the top of the page (and maybe get some sand dunes for the bottom?). I think that would fit more with your customisation than the standard Kubrick corners.