Homepage design: Difference between revisions
No edit summary |
No edit summary |
||
| (6 intermediate revisions by 5 users not shown) | |||
| Line 1: | Line 1: | ||
'' | {{Scrapbook}} | ||
== | [[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]] | |||
Latest revision as of 07:21, 3 February 2010
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.
Welcome to Moodle!
text...
Moodle Community
text...
Moodle Development
text...
Moodle Downloads
text...
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;
}
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.
