Diferència entre revisions de la pàgina «Homepage design»

Dreceres ràpides: navegació, cerca

Aquesta pàgina forma part de la documentació de Moodle en català, tot i que no ha estat traduïda encara. Podeu contribuir obertament a les tasques de traducció. Podeu consultar la Guia d'edició de la documentació i també participar ens els debats del fòrum de traductors de la documentació a moodle.org

(Replaced content with "{{Moved_to_dev_docs}}")
 
Línia 1: Línia 1:
{{Scrapbook}}
+
{{Moved_to_dev_docs}}
[[Image:Moodle homepage.png|thumb|Previous moodle.org homepage]]
 
The previous 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.
 
 
 
<code php>
 
<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>
 
</code>
 
 
 
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.
 
 
 
<code php>
 
.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;
 
}</code>
 
 
 
Remember, this formatting works because the headings are designated "heading 1" and the div tags wrap each paragraph of the text.
 
 
 
If, when working on your label, you accidentally delete any of the tags that control the formatting, your text will not be rendered properly. Also realize that when you edit the text, it will look like plain text in the html editor. You won't see the nice borders and such until you save the changes.
 
 
 
[[Category:Administrator]]
 
[[Category:Developer]]
 
[[Category:Themes]]
 
[[Category:Moodle.org]]
 
 
 
[[fr:Maquette personnalisée de la page d'accueil]]
 
[[ja:ホームページデザイン]]
 
[[de:Startseiten-Design von moodle.org]]
 

Revisió de 07:24, 22 juny 2011

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

See the Homepage design page in the Dev docs.