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
m (Reverted edit of Krishnabhatt, changed back to last version by Tsala)
(Replaced content with "{{Moved_to_dev_docs}}")
 
(14 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 fieldset and legend elements within a single html block.
<pre>
<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>
</pre>
 
The fieldset and legend elements are then styled to match the blocks.
 
<pre>
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;
}</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.