Homepage design

From MoodleDocs

The moodle.org theme is not included in the standard Moodle download, however theme designers are welcome to take ideas from its homepage design.

The centre sections are created using fieldset and legend elements within a single html block.

<fieldset>
  <legend>Welcome to Moodle!</legend>
  <p>text ...</p>
</fieldset>
<fieldset>
  <legend>Moodle Community</legend>
  <p>text ...</p>
</fieldset>
<fieldset>
  <legend>Moodle Development</legend>
  <p>text ...</p>
</fieldset>
<fieldset>
  <legend>Moodle Downloads</legend>
  <p>text ...</p>
</fieldset>

The fieldset and legend elements are then styled to match the blocks.

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

legend {
  border: #DDD solid 1px;
  background-image:url(gradient.jpg);  
  background-position:top;  
  background-repeat:repeat-x;  
  padding: 1px 10px;
}

[edit]