Note: You are currently viewing documentation for Moodle 2.3. Up-to-date documentation for the latest stable version is available here: Homepage design.

Homepage design: Difference between revisions

From MoodleDocs
No edit summary
(Replaced content with "{{Moved_to_dev_docs}}")
 
(13 intermediate revisions by 9 users not shown)
Line 1: Line 1:
{{Scrapbook}}
{{Moved_to_dev_docs}}
 
The [http://moodle.org 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)
 
<pre>
<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>
</pre>
 
The H1 and P tags are then styled to match the blocks.
 
<pre>
.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;
}
}</pre>
 
==External links==
* [http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.10 W3C 17.10 Adding structure to forms] - The recommended use of fieldset and legend elements is for adding structure to forms.
 
[[Category:Administrator]]
[[Category:Developer]]
[[Category:Themes]]

Latest revision as of 07:24, 22 June 2011

This development related page is now located in the Dev docs.

See the Homepage design page in the Dev docs.