Blocks

Hmm, well I think I might add a little to the docs.

There are two steps to making this happen:
1) FIRST step is to add the styles to your site stylesheet. There is a file called styles_fonts.css in moodle/theme/standard. (I am assuming that you are using the standard themes; if not, you may need to experiment to find the file that is controlling the styles on your site.)

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

If you open that in an editor and paste in the rules, you can save the file and go to part 2.

2. SECOND step is to add the code to your front page. If you have enabled the topic section, you can add a label. When you add the label, look on the toolbar of the html editor. There is a tool close to the right end on the second row of tools that looks like this <>. This is the html editor, which lets you actually work with the code. That is where you should paste the following:

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

At that point, you should be able to click the code button again and return to the normal window to edit both the titles and the text to suit yourself.

Remember, it only works because the headings are designated "heading 1" and the <div> tags wrap each paragraph of the text. If you delete any of the tags that control the formatting, your page will not be rendered properly. Also realize that when you edit the text, it will just be plain text. You won't see the nice borders and such until you save the changes.

If this doesn't make any sense to you, you might need to talk to someone who has a bit more experience with css. It isn't that hard, unless you have never done it before!

atw