Homepage design

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 H1 and P tags (defined in your css file). The code should be placed in the single html block that is formed when you switch the setting for "Include a topic section" to 'yes' in your Admin Site Setting (yourmoodle/admin/site.php). It works well if you put the code in a label. To get to the code view when creating the label, use the <> bottom on the second row of tools on the editing toolbar.

<div class="frontblock">
<h1 class="frontblock fronthead p1">Welcome to Moodle!</h1>
<p class="fronttext p1">
text...
</p>
</div>

<div class="frontblock">
<h1 class="frontblock fronthead p2">Moodle Community</h1>
<p class="fronttext p2">
text...
</p>
</div>

<div class="frontblock">
<h1 class="frontblock fronthead p3"><span class="nolink">Moodle Development</span></h1>
<p class="fronttext p3">
text...
</p>
</div>

<div class="frontblock">
<h1 class="frontblock fronthead p4"><span class="nolink">Moodle Downloads</span></h1>
<p class="fronttext p4">
text...
</p>
</div>

The H1 and P tags are then styled to match the blocks. This code should be added to the stylesheets you are using to control the appearance of your site. For example, you might place these rules in styles_fonts.css in moodle/theme/standard. To edit the stylesheet, you will need to open the file in an editor, add the code, and save it back to the server.

.fronthead {
  font-size:1.3em;
  letter-spacing:0.04em;
}

.fronttext {
  margin-top:5px;
  margin-left:20px;
  margin-right:10px;
  margin-bottom:20px;
}

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

h1.frontblock {
  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;
}

p.fronttext.p1 {
  min-height: 90px;
}
p.fronttext.p2 {
  min-height: 90px;
}
p.fronttext.p3 {
  min-height: 125px;
}
p.fronttext.p4 {
  min-height: 105px;
}