Maquette personnalisée de la page d'accueil

Le thème personnalisée 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 ici 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" à 'Oui' Dans Page d'accueil, Réglages page d'accueil.

Il faut ensuite insérer une étiquette. Il apparaîtra alors une section "Résumé du 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 "<>" 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 décorés de manière à correspondre aux blocs. Ce code doit être ajouté à la feuille de styles que vous utilisez pour contrôler l'apparence de votre site. Par exemple, vous pouvez mettre ces règles en styles_fonts.css dans moodle / theme / standard. Pour modifier la feuille de style, vous aurez besoin pour ouvrir le fichier dans un éditeur, d'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és rubrique "1" et les balises div envelopper chaque paragraphe du texte.

Si, lorsque vous travaillez sur votre étiquette (tag), vous supprimez accidentellement l'une des balises de formatage que le contrôle, votre texte ne sera pas rendue correctement. Aussi réaliser que lorsque vous modifiez le texte, il ressemblera le texte brut dans l'éditeur html. Vous ne verrez pas les belles bordures et de tels jusqu'à ce que vous enregistrez les modifications.