Maquette personnalisée de la page d'accueil

Le thème personnalisé de la page d'accueil du site http://moodle.org n'est pas inclus dans la distribution de Moodle. Cependant, les concepteurs de thèmes sont les bienvenus pour s'inspirer des idées pour la conception de pages d'accueil selon des maquettes personnalisées.

Au préalable, assurez-vous que vous avez bien coché la case à cocher "Inclure une section descriptive" dans Administration du site > Page d'accueil > Réglages page d'accueil.

Il faut ensuite insérer une étiquette. Il apparaîtra alors une section "Résumé de Site", à laquelle il est possible de donner un titre.

Dans le contenu de cette étiquette, les sections du centre sont créées à l'aide de balises H1 et P (définies dans votre fichier CSS). Le code doit être placé dans le bloc HTML unique correspondant.

Ce code HTML fonctionne bien, une fois placé dans une étiquette. Pour arriver à la vue de code lors de la création de l'étiquette, utilisez le bouton "<>" (pour basculer en "mode code HTML") en bas sur la deuxième ligne d'outils sur la barre d'outils d'édition.

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

Les balises H1 et P sont alors interprétées de manière à correspondre aux blocs. Ce code doit être ajouté à la feuille de style que vous utilisez pour contrôler l'apparence de votre site. Par exemple, vous pouvez mettre ces règles dans le fichier styles_fonts.css du dossier moodle/theme/standard. Pour modifier la feuille de style, vous devrez ouvrir le fichier dans un éditeur, ajouter le code et l'enregistrer sur le serveur.

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

Rappelez-vous, cette mise en forme fonctionne parce que les rubriques sont désignées "h1" et les balises div enveloppent chaque paragraphe du texte.

Si, lorsque vous travaillez sur votre étiquette, vous supprimez accidentellement l'une des balises de contrôle du formatage, votre texte ne sera pas interprété correctement. Aussi, réalisez bien que lorsque vous modifiez le texte, il s'affichera en texte brut dans l'éditeur html. Vous ne verrez pas les belles bordures tant que vous n'enregistrez pas les modifications.

Documentation

Maquette personnalisée de la page d'accueil