Archives du mot-clé html

Comment modifier le thème dans MARP

Créer un nouveau thème sous MARP, est en réalité très compliqué et parfaitement inaccessible au commun des mortels, en aucun cas je ne peux imaginer demander à mes étudiants de suivre la procédure décrite dans ce slide.

La première raison est que ce ne sont pas des informaticiens, enfin cela irait à l’encontre de l’intérêt principal de cet outil, à savoir la rapidité et l’efficacité.

Fort heureusement, il existe une solution qui n’est pas vraiment développée dans le guide technique du logiciel et qui passe par l’insertion de styles dans la zone d’édition.

Voici un exemple de ce qui peut être fait :

<style>
.slide {
 background-color: black;
 font: 40px arial, sans-serif; 
 }
 
.slide a {
 color: indigo;
 }
 
.slide h1 {
 color: fuchsia !important;
 text-align: center;
 } 
 
.slide h2 {
 color: darkviolet;
 } 
 
.slide p {
 color: darkorchid;
 }
</style>

Quelques explications :
. slide s’applique aux paramètres des diapositives, ici on a appliqué une police Arial de taille 40px et un arrière plan noir.
. slide a modifie la couleur des liens.
. slide h1 modifie les titres de niveau 1 (#)  !important  permet de passer outre le style défini par le thème.
.slide p applique une couleur aux paragraphes.

Pour mettre en œuvre ces styles, il  faut utiliser le style par défaut et non Gaïa.

Ces commandes s’insèrent en haut de la zone d’édition, cependant il est possible de créer un fichier externe appelé par cette commande :

<link rel="stylesheet" type="text/css" href="style.css">

Enjoy !

Publicités

How to change the theme in MARP

In reality it is very complicated, in any case inaccessible to ordinary people, do not I see myself explaining to students the procedure described in this link.

Quite simply because they are not computer scientists and secondly, the interest of using MARP is precisely to be efficient, effective and fast.

On the other hand, as the description indicates, you can easily add styles at the beginning of the slideshow. And then it becomes accessible…

Here is a very short example of what can be done :

<style>
.slide {
 background-color: black;
 font: 40px arial, sans-serif; 
 }
 
.slide a {
 color: indigo;
 }
 
.slide h1 {
 color: fuchsia !important;
 text-align: center;
 } 
 
.slide h2 {
 color: darkviolet;
 } 
 
.slide p {
 color: darkorchid;
 }
</style>

A few explanations:
. slide is about slide related settings
. slide a modifies the links
. slide h1 the titles of level 1 (#)! important clears the parameter setting set by the theme

You need to  use default theme and not Gaia to make it work.

There are two ways to do this, either integrate an external file with a link:

<link rel="stylesheet" type="text/css" href="style.css">

or include the style at the top of the page but it’s less clean.

Enjoy !

Du texte qui bouge dans Moodle

moodleDans Moodle, il n’existe pas vraiment de mise  en évidence d’une information sauf à abuser du texte flashy et des arrière-plans fluorescents qui donnent un petit look carnaval à votre cours très sérieux.

On oublie parfois que dans Moodle  les étiquettes sont encodées en html, il est donc possible d’utiliser des balises permettant un affichage exotique du texte, notamment un texte qui se déplace. Idéal pour attirer l’attention d’un étudiant un peu endormi :

2012-12-04_09h46_32

Imaginez que le texte en rouge se déplace très lentement vers la droite.

Pour réaliser cette prouesse technique, rien de bien compliqué, on utilise ce code :

<marquee behavior="scroll" direction="right" scrollamount="1" scrolldelay="4" style="height: 40px; width: 100%; border: 1px solid rgb(255, 0, 0); background-color: rgb(255, 255, 255); padding: 5px;" height="40" width="100%">
<font color="#ff0000"><b>Attention :</b><br />Modification des consignes de l'exercice &quot;Les connecteurs&quot;</font>
</marquee>

La partie animation est gérée par  la balise MARQUE, ce code html doit être inséré dans l’éditeur en mode HTML  :

2012-12-04_10h47_21

En modifiant les valeurs des arguments on change le comportement de la balise :  direction du texte, vitesse. Cette page très complète vous donnera la syntaxe avec des exemples visuels.

Si vous avez aimé cet article, même un petit peu, merci de bien vouloir le partager.