Talk:Homepage design

This (meaning both the original page and the docs wiki description of how to achieve the effect) should probably be changed to something like:

div.fieldset {
  margin-top: 12px;
  margin-bottom: 25px;
  border: #DDD solid 1px;
  -moz-border-radius-bottomleft: 20px;
  -moz-border-radius-bottomright: 20px;
  font-size: 0.95em;
}

h1.legend {
  border: #DDD solid 1px;
  background-image: url(http://moodle.org/theme/moodleorange/gradient.jpg);  
  background-position: top;  
  background-repeat: repeat-x;  
  padding: 1px 10px;
  display: inline;
  position: relative;
  top: -0.5em;
  left: 20px;
}

With the last four lines, and the use of H1 tags being the important changes. The silly classnames are just to make the links to current code obvious. The images are also purely decorative and so could be changed to CSS background images, or maybe just better alt tags would be enough. I'm not near a Windows PC till Tuesday, I'll post the full code then after checking for browser compatability but it's looking pixel for pixel identical to me on Safari. --David Scotson 03:11, 3 April 2006 (WST)

You can see a demonstration page with the new code, which I've tested in Internet Explorer 6, Firefox 1.5, Opera 8 and Safari. Any problem reports would be welcome.

Note:

there is some other oddness caused by linking the current Moodle.org theme against a more recent Moodle HEAD codebase, all the recent accessibility work looks a bit wierd without supporting CSS so try not to be distracted by it. The important part is the central column.
I've removed the image links, as they are now CSS background images. If the links are important then they should be reinstated in the text.
I'll try to leave the demo up for a while but it's not a permanent thing.

The important CSS lesson here is that Header's are, by default, 'display: block' like paragraphs and divs. This means you can size them absolutely (100px, 10em) or relatively (50%) but you can't have them shrink-to-fit their contents. To do this you need them to act like spans or emphasis, by using 'display: inline'. A knock on from this is that it's pretty easy to shift blocks around by using negative (or positive) margins and padding, but for inline elements you might want to use relative positioning. --David Scotson 18:42, 4 April 2006 (WST)

I'm getting timeout errors trying to view the demo site, but I love the idea of these changes. I've never been too convinced by the use of fieldset and legend to create a visual effect (outside of a form of course). I would think improving the structure of the page in this way would aid accessibility, it would also make any future design changes far easier - trying to style fieldset and legend to get away from their default layout can cause headaches ;-) --Andrew Walker 2 19:07, 10 April 2006 (WST)

The demo page is currently offline due to a power failure, it should hopefuly be back up tomorrow sometime --David Scotson 00:59, 11 April 2006 (WST)

Good call! I've applied this to the moodle.org homepage but now the images are leaking out over the bottom of the div (they weren't before). Is there any known solution for this? Martin Dougiamas 17:16, 11 April 2006 (WST)

I made a local copy of the moodle homepage and tried a couple of things, here's some modified CSS that seems to fix it,

div.frontblock {
  margin-top: 12px;
  margin-bottom: 25px;
  border: #DDD solid 1px;
  -moz-border-radius-bottomleft: 20px;
  -moz-border-radius-bottomright: 20px;
  font-size: 0.95em;
  float: left; /* make element float to allow it to expand to contain the image inside */
  width: 99%; /* make sure the element width doesn't shrink when floated */
}

You might want to add a touch of padding-bottom too, but that would be optional :-) This is working for me in IE 6, Firefox and Opera. --Andrew Walker 18:15, 11 April 2006 (WST)

Pragmatic application

I was quite pleased to find these tips on how to achieve the Moodle front page text, but it meant that I had a lot of editing to do, and that any editors of my pages had to remember to use the correct classes for thier H1 tags and to surround their text with a "div class=" tag.

After giving this some thought I decided to go down this route:-
1. Add this CSS to your page (I did it by adding it to styles-layout.css in the standard theme, but I suppose I should have tweaked my own style and bundled the CSS in there - no excuse, im just lazy :-)

#middle-column div {
  margin-top: 12px;
  margin-bottom: 25px;
  padding: 5px;  
  border: #DDD solid 1px;
  -moz-border-radius-bottomleft: 20px;
  -moz-border-radius-bottomright: 20px;
  font-size: 0.95em;

}

#middle-column h1 {
  border: #DDD solid 1px;
  background-image: url(gradient.jpg);  
  background-position: top;  
  background-repeat: repeat-x;  
  padding: 1px 10px;
  display: inline;
  position: relative;
  top: -0.5em;
  left: 8px;
  font-weight: normal;
  margin-left:10px;
  margin-right:50px;
}

#middle-column img {
	margin: 10px;
	}

As you can see Ive Altered the CSS slightly, adding some margins and padding, and also setting all my middle-column images to have a small margin.

2. When you add any HTML to your pages, surround everything that you would like boxing with a plain

tag

3. Set all your main headings as H1, being careful as this can have an unusual effect if its not at the start of a new "div"

Hope this helps some people who want this kind of effect. no doubt when Ive had more of a play with Moodle, Ill knock together my own theme, but the learning curve is more like mountain climbing at the moment so dont hold your breath! - Phil Waud 11 feb 07

Documentation

Talk:Homepage design

Pragmatic application