Pour utiliser Javascript, il faut au préalable demander aux responsables de l'activer sur vos blog, en passant par le formulaire de contact.

Attention : nous allons utiliser le système de fenêtres d'Eklablog : les codes ne fonctionnent donc que sur Eklablog, et seront éventuellement à adapter si Eklablog effectue des modifications.

Aujourd'hui on va afficher des fenêtres personnalisés.

Nous avons vu dans un article précédent (Mon premier code Javascript - afficher un message) qu'il était possible d'utiliser la fonction alert pour afficher un message simple.

Nous allons créer une fonction plus complète pour :

• afficher un titre dans la barre bleue en haut de la fenêtre ;
• pouvoir écrire du HTML dans le contenu (image, mis en forme...) ;
• modifier la taille de la fenêtre.

Cliquez sur le bouton ci-dessous pour afficher la fenêtre que l'on obtiendra :

Vous devriez voir ceci à l'écran :

On note la présence du titre et le contenu avec une image et du texte en gras.

Un bouton OK a été ajouté pour reproduire le comportement de la fenêtre simple affiché avec la fonction alert.

Ces fenêtres sont intéressantes car elle sont repositionnables et restent affichées lorsqu'on fait défiler la page.

Ce sont en fait les mêmes fenêtres qui sont utilisées par exemple pour les écrans d'édition d'articles, la plupart des fenêtres de configuration...

Voici le code minimal pour créer une fenêtre :

  Addons.load("Windows", function(){
    b=Windows.add();   // Nouvelle fenêtre
    b.setTitle("Test de fenêtre");  // Titre
    b.setContent("Bonjour à <strong>tous</strong> !");  // Contenu
    b.generate();  // Génère la fenêtre
  });

Pour pouvoir facilement créer une fenêtre, on peut créer une fonction réutilisable :

function EklaWindowDisplay(html,title,width,height)
{
  var b=null;
  Addons.load("Windows", function(){
    b=Windows.add();   // Nouvelle fenêtre
    b.setTitle((title==undefined) ? "" : title);  // Titre
    html=html.replace(new RegExp("\\[winid\\]",'ig'),b.id); // Remplace [windid] par l'id de fenêtre
    b.setContent(html);  // Contenu
    if (width!=undefined) {b.setWidth(width);}  // Largeur
    b.generate();  // Génère la fenêtre
    if (height!=undefined) {   // Si largeur définie
      b.setHeight(height)        // Modifie la largeur
      b.center();                // Centre la fenêtre
    }
  });
  return b; // Renvoit la fenêtre
}

Je vous invite à ranger cette fonction dans un module comme expliqué ici : Ranger ses fonctions Javascript dans un module masqué.

 Il suffit ensuite d'appeler cette fonction en passant en paramètre :

• le code HTML du contenu ;
• le titre ;
• la largeur en pixels ;
• la hauteur en pixels.

Les paramètres sont optionnels.
La hauteur s'adapte automatiquement au contenu.

Voici un exemple d'utilisation :

var html="<p style=\"text-align: center;\">" +
  "<img style=\"display: block; margin-left: auto; margin-right: auto;\" src=\"http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/images/divers/avatar.jpg\" alt=\"\" width=\"48\" height=\"42\" />" +
  "&nbsp;Bonjour, ceci est une fen&ecirc;tre personnalis&eacute;e <strong>avec une image</strong> centrée.&nbsp;</p>";
myWin=EklaWindowDisplay(html, "Test de fenêtre",200);

Notez que le HTML est une chaîne de caractères entre guillemets (").
Pour y écrire des guillemets, il faut remplacer " par \"
On évite également les retours à la ligne (utilisez <br /> pour un retour à la ligne en HTML).

Pour faciliter la lecture, vous pouvez écrire une chaîne de caractères sur plusieurs lignes en concaténant plusieurs chaînes (chacune délimitée par des guillemets) avec le signe +.

Il manque un bouton OK, même si on peut fermer la fenêtre avec la croix en haut à droite.

Pour ajouter un bouton, il faut l'intégrer dans le code HTML.
Ce bouton aura pour action de supprimer la fenêtre avec la fonction del.
Voici comment l'ajouter :

var html="<p style=\"text-align: center;\">" +
  "<img style=\"display: block; margin-left: auto; margin-right: auto;\" src=\"http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/images/divers/avatar.jpg\" alt=\"\" width=\"48\" height=\"42\" />" +
  "&nbsp;Bonjour, ceci est une fen&ecirc;tre personnalis&eacute;e <strong>avec une image</strong> centrée.&nbsp;</p>";
html=html+"<div style=\"text-align:center\">" + 
  "<input type=\"button\" value=\"OK\" onclick=\"Windows.del([winid]);\" style=\"width:100px;\"/>" +
  "</div>";
myWin=EklaWindowDisplay(html, "Test de fenêtre",200);

J'ai ajouté une ligne avec un input de type « button ».

Dans l'événement onclick de ce bouton on exécute : Windows.del([winid]);

Dans la fonction EklaWindowDisplay, on peut voir un remplacement de [winid] par l'identifiant de la fenêtre en cours de génération.

En effet, avant l'appel à la fonction, on ne connaît pas l'identifiant de la fenêtre.
Il suffit de mettre [winid] dans le html et il sera remplacé par l'identifiant réél.

Voilà pour une première fenêtre.

D'autres articles viendront certainement pour détailler d'autres possibilités.

On peut trouver, sur divers blogs et sur le forum, de nombreuses fonctions écrites en javascript.

Ces fonctions peuvent être réutilisées dans plusieurs articles.
Inutile donc de les écrire en doublon dans chacun des articles, il vaut mieux les écrire dans un module dédié.

Ainsi, si on corrige une fonction utilisée par plusieurs articles, la correction sera appliquée automatiquement à tous les articles qui appellent cette fonction.

C'est beaucoup plus simple, et cela permet d'avoir toutes ses fonctions à un seul endroit pour les retrouver facilement.
On peut aussi envisager de créer plusieurs modules pour regrouper des fonctions.

Par exemple, j'ai une fonction pour lire le pseudo de l'utilisateur connecté :

// Recherche le nom d'utilisateur connecté
function EklaGetUser()
{
	try {
		var ekla_login=document.id('menubar_section_account');
		if (ekla_login) 
		{
			ekla_login=ekla_login.getElementsByTagName("a").item(0);
			ekla_login = (ekla_login.innerText) ? ekla_login.innerText : ekla_login.text;
			return ekla_login.trim();
		}
		else 
		{return "";}
	} catch(e) {return "";}
}

Cliquez sur le bouton ci-dessous pour tester cette fonction qui affichera votre pseudo (si vous êtes connecté) dans une fenêtre de message :

Notez que cette fonction est écrite dans un module de mon blog que vous ne voyez pas : il est masqué.
Les articles, pages et modules peuvent partager des fonctions Javascript, dans la mesure où ils sont chargés.

Un module est toujours chargé, même s'il est masqué : on peut donc appeler une fonction d'un module depuis un article ou une page.

Pour masquer un module, il suffit d'ajouter ce code au CSS du blog, en modifiant XXXXXXXXX par l'identifiant de votre module :

/* Masquer ce module : remplacer l'identifiant numérique par celui de votre module */
#module_menuXXXXXXXXX {display:none}

Si vous ne savez pas où mettre ce code, voir cet article : Mon premier code CSS - images au coins arrondis avec ombrage.

Pour trouvez l'identifiant du module, utilisez les outils développeurs du navigateur, voir cet article : Structure d'un blog Eklablog.
Vous pouvez également voir l'identifiant en survolant les boutons d'édition ou de suppression du module ; l'identifiant est numérique : par exemple 139801640.

Vous pouvez éventuellement préférer écrire ce code dans le module (en édition « Code Source ») en ajoutant alors des balises style :

<style type="text/css"><!--
/* Masquer ce module : remplacer l'identifiant numérique par celui de votre module */
#module_menuXXXXXXXXX {display:none}
--></style>

Le module est alors invisible : vous pouvez le retrouver dans le menu « Apparence » => « Gérer les menus ».

Pour écrire du code Javascript, éditer le module et passez en édition « Code source ».

Note : passez en mode « Normal » ou « Expert » pour voir cette option de l'éditeur.

Il faut ensuite indiquer que l'on va écrire du code Javascript : cela se fait en plaçant le code dans un élément script :

<script>// <![CDATA[
// Recherche le nom d'utilisateur connecté
function EklaGetUser()
{
	try {
		var ekla_login=document.id('menubar_section_account');
		if (ekla_login) 
		{
			ekla_login=ekla_login.getElementsByTagName("a").item(0);
			ekla_login = (ekla_login.innerText) ? ekla_login.innerText : ekla_login.text;
			return ekla_login.trim();
		}
		else 
		{return "";}
	} catch(e) {return "";}
}
// ]]>
</script>

Votre fonction EklaGetUser peut maintenant être utilisée n'importe où dans le blog.

Une info-bulle est un texte qui s'affiche généralement lorsqu'on survole un élément de la page.
Cela permet d'ajouter des petits textes d'aide ou d'information.

On les utilise par exemple sur les liens : pour voir une info-bulle, survolez ce texte.

L'info-bulle ci-dessus est écrite dans l'attribut title du lien.
Il n'est pas spécifié dans la norme que cet attribut doit être affiché sous forme d'info-bulle mais c'est généralement le cas dans la plupart des navigateurs.
Cependant c'est très limité, on ne peut pas faire grand chose de plus que d'afficher un texte non formaté, et il faut passer en éditeur de code source pour ajouter l'attribut.

Vous avez peut-être déjà lu la possibilité d'ajouter des info-bulles plus évoluées en utilisant Help.bubble (par exemple ici) mais cela nécessite l'activation de Javascript pour votre compte.

Nous allons dans cet article mettre en place des info-bulles uniquement avec du code CSS, donc utilisables sur tous les blogs.

Encore plus intéressant, il sera possible d'ajouter des info-bulles sans même aller dans le code source HTML !

 Un petit exemple :

Voici une première info-bulle_{Ceci est une info-bulle
sur deux lignes} suivie d'une deuxième info-bulle_{Et voici une autre information avec du gras !}.
Survolez les textes ci-dessus en bleu sur fond jaune pour voir apparaître des informations.

Ces info-bulles ont quelques limitations et inconvénients :

• la détection d'un texte avec info-bulle se fait sur l'adresse cible (Url) du lien.
  Il n'est donc pas possible de mettre une info-bulle sur un lien pour lequel on souhaite une navigation vers une autre page. Le clic sur un lien info-bulle n'aura aucun effet.
• Si on clique sur le lien, la page avec l'ancre #mabulle est ajoutée à l'historique de navigation.
• l'info-bulle peut déborder en dehors de l'écran si le texte est trop à droite ou en bas.
  Mais ce n'est pas très gênant, habituellement on survole des éléments qui ne sont pas en bordure d'écran.
• on ne peut pas mettre du texte en indice dans l'info-bulle (en petit en bas).
  Cela non plus ne devrait pas être un gros soucis.

 En contrepartie, il est possible de les mettre en place même si vous n'avez pas activé le Javascript pour votre profil.

 Commencez par ajouter à votre blog le code CSS nécessaire.

On verra plus bas comment ce code fonctionne et comment le personnaliser.

Le code CSS doit être ajouté dans le menu « Apparence » => « Modifier le thème » => « Ajouter du CSS ».

Copiez-collez le code affiché ci-dessous dans la fenêtre d'édition CSS (à l'emplacement du cadre jaune montré ci-dessus), puis cliquez sur le bouton « Appliquer et Sauvegarder ».

/* Début CSS info-bulles */
a[href="#mabulle"]  		/* texte du lien */
{
text-decoration:none; 		/* pas de soulignement */
background-color:#FFFFAA; 	/* couleur surlignée */
color:darkblue; 		/* couleur du texte */
}
a[href="#mabulle"]:hover	/* texte du lien survolé */
{
    cursor:help;		/* curseur souris */
}

a[href="#mabulle"] + sub 	/* texte d'info en indice après le lien */
{  
bottom:auto; 			/* Corrige le positionnement du sub */
line-height:inherit; 		/* Corrige la taille de ligne du sub */
display:none;			/* pas d'affichage avant le survol */
position:absolute;		/* position absolue pour que la bulle soit positionnée hors du texte */
font-size:inherit;		/* hérite de la taille du texte du lien */
color:darkblue;			/* couleur du texte d'info */
text-align:justify;		/* alignement du texte justifié */
-moz-border-radius:10px;	/* bordure arrondie 10px de rayon */
-webkit-border-radius:10px;
border-radius:10px;
margin:10px 10px;		/* marge extérieure haut et gauche, décale l'info-bulle vers le bas et à droite */
padding:10px;			/* marge intérieure de 10px */
padding-left:50px;		/* marge intérieure gauche de 50px pour laisser de la place à l'image */
border:1px solid #0000AA;	/* taille, style et couleur de la bordure */
/* fond de la bulle : image non répétée décalée de 5px à droite, centrée verticalement, avec un fond de couleur #ddd */ 
background:#ddd url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/info.png) no-repeat 5px center;
}
a[href="#mabulle"]:hover + sub  	/* texte en indice sur survol du lien */
{
display: inline;		/* affichage de la bulle */
}
/* Fin CSS info-bulles */

Cette opération n'est à faire qu'une seule fois pour tout le blog.

 Vous voilà prêt à ajouter une info-bulle !

Passez en premier lieu en édition sur un article.

Notez que l'info-bulle ne fonctionne que sur un lien hypertexte.

Ajoutez donc un lien en cliquant sur le bouton « Insérer/éditer un lien ».

- Dans « Url », inscrivez #mabulle.

Il est important de mettre exactement cette Url, car celle-ci à deux rôles :

1. Elle permet de détecter les liens qui doivent être traités comme des info-bulles (on retrouve cette Url dans le CSS).
2. Elle évite de naviguer dans la page lorsqu'on clique sur le lien (pour peu que vous n'ayez pas d'ancre nommée ainsi sur la page).

- Dans « Texte à afficher », écrivez le texte qui sera affiché sur l'article (celui qui sera survolé).

Ajoutez ensuite du texte juste après le lien :

Sélectionnez ce texte qui doit être placé dans l'info-bulle et mettez le en indice :

La mise en indice se fait en passant d'abord l'éditeur en mode « Expert ».

La mise en indice du texte permet de le détecter avec le CSS, c'est le rôle du sélecteur sub.

Il est alors possible d'écrire la suite du texte, en cliquant si besoin à nouveau sur le bouton « Indice » pour revenir en texte normal.

Dans l'éditeur, on ne voit pas les info-bulles. On voit le texte d'information en indice, ce qui nous permet de le modifier.

 Dans votre article en ligne, vous devriez obtenir ceci : Survolez pour info_{Ceci est un texte d'information} et voici la suite du texte.

 Notez que pour l'exemple, si vous survolez le lien ci-dessus, j'ai ajouté du texte rouge en gras. Il est en effet possible de mettre du formatage dans le contenu.
Par contre on ne peut pas mettre du texte en indice car tout le contenu y est déjà...

 A partir d'ici nous allons un peu étudier le code pour pouvoir l'adapter :

• modifier les couleurs ;
• aligner le texte ;
• changer ou retirer l'image...

Le code CSS se divise en quatre parties :

1. Le style du lien (pour modifier le style par défaut des liens).
2. Le style du lien survolé.
3. Le style de l'info-bulle (texte, fond, bordure...)
4. Le style de l'info-bulle lorsque le lien est survolé (en fait juste une demande d'affichage).

Dans le code vous trouvez :

• en bleu : des sélecteurs qui pécisent quels éléments sont ciblés ;
• en noir : des noms de paramètres de style ;
• en rouge : les valeurs de ces paramètres ;
• en vert : des commentaires.

Première partie : le style du lien.

a[href="#mabulle"]  		/* texte du lien */
{
text-decoration:none; 		/* pas de soulignement */
background-color:#FFFFAA; 	/* couleur surlignée */
color:darkblue; 		/* couleur du texte */
}

On détecte les liens « info-bulle » avec l'Url #mabulle.
Cette Url se retrouve dans le code HTML en attribut href du lien.
Le lien est un élément nommé a, l'attribut href est défini entre crochets.

Le style entre accolades s'appliquera donc au texte des liens dont l'Url est #mabulle.

• text-decoration avec la valeur none permet de ne pas avoir le caractère de soulignement du lien ;
• background-color définit la couleur de fond du texte : #FFAAAA est une couleur jaune ;
• color définit la couleur du texte : darkblue est un code couleur pour du bleu foncé.

Recherchez sur internet « code couleurs HTML » par exemple, vous trouverez de nombreuses informations sur la codification des couleurs.

Deuxième partie : le style du lien survolé.

a[href="#mabulle"]:hover	/* texte du lien survolé */
{
    cursor:help;		/* curseur souris */
}

On ajoute le selecteur :hover qui signifie « survolé ».

Le style entre accolades s'appliquera donc au texte des liens survolés dont l'Url est #mabulle.

• cursor avec la valeur help permet de modifier le curseur de la souris en un curseur d'aide (flèche + point d'interrogation) ;
  Par défaut le curseur est une main. Si vous souhaitez ne pas modifier ce curseur, retirez le code.

Vous trouverez tous les curseurs disponibles sur ce lien : CSS cursor property.

Troisième partie : le style de l'info-bulle.

a[href="#mabulle"] + sub 	/* texte d'info en indice après le lien */
{  
bottom:auto; 			/* Corrige le positionnement du sub */
line-height:inherit; 		/* Corrige la taille de ligne du sub */
display:none;			/* pas d'affichage avant le survol */
position:absolute;		/* position absolue pour que la bulle soit positionnée hors du texte */
font-size:inherit;		/* hérite de la taille du texte du lien */
color:darkblue;			/* couleur du texte d'info */
text-align:justify;		/* alignement du texte justifié */
-moz-border-radius:10px;	/* bordure arrondie 10px de rayon */
-webkit-border-radius:10px;
border-radius:10px;
margin:10px 10px;		/* marge extérieure haut et gauche, décale l'info-bulle vers le bas et à droite */
padding:10px;			/* marge intérieure de 10px */
padding-left:50px;		/* marge intérieure gauche de 50px pour laisser de la place à l'image */
border:1px solid #0000AA;	/* taille, style et couleur de la bordure */
/* fond de la bulle : image non répétée décalée de 5px à droite, centrée verticalement, avec un fond de couleur #ddd */ 
background:#ddd url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/info.png) no-repeat 5px center;
}

On ajoute le selecteur + sub qui signifie « le texte en indice qui suit le lien ».

Le style entre accolades s'appliquera donc au texte en indice qui suit les liens dont l'Url est #mabulle.

• bottom et line-height corrige le positionnement du texte initialement prévu pour être en en indice ;
• display avec la valeur none permet de masquer totalement le texte en indice ; on l'affichera ensuite au survol du lien dans la quatrième partie ;
• position avec la valeur absolute définit que ce texte sera affiché, non pas dans le flux de texte classique, mais « par dessus » le reste ;

Ces deux premiers paramètres de style ne doivent pas être modifiés pour le bon fonctionnement de l'info-bulle.
Les paramètres suivants peuvent être changés.

• font-size avec la valeur inherit précise que la taille du texte de la bulle doit être la même que celle du texte du lien  ;
  Il est possible de préciser une taille en pixels (10 px) ou en unités em (1.5em);
  L'unité em est la taille par défaut d'un caractère ; 1.5em signifie donc « une fois-et-demi la taille par défaut ».
• color avec la valeur darkblue définit une couleur de texte bleu foncé ;
• text-align avec la valeur 10px définit un alignement justifé ;
  Vous pouvez modifier la valeur pour left (gauche), right (droite) ou center (centré).
• border-radius avec la valeur justify définit une bordure arrondie ;
  Vous pouvez modifier la valeur pour ajuster le rayon de l'arrondi.
  Notez que ce paramètre est répété 3 fois avec différents préfixes pour assurer une compatibilité avec la plupart des navigateurs (mais sur certains navigateurs anciens cela ne fonctionne pas).
• margin avec la valeur 10px 10px définit la marge extérieure de la bulle (10px à en haut et 10px à droite) ;
  Vous pouvez modifier les valeurs pour positionner l'info-bulle par rapport au texte survolé ;
• padding avec la valeur 10px définit la marge intérieure de la bulle (10px à en haut, à droite, en bas et à gauche) ;
  Vous pouvez modifier la valeur pour laisser plus d'espace autour du texte ;
• padding-left avec la valeur 50px définit la marge intérieure gauche de la bulle (annule et remplace la marge gauche définie juste avant), pour laisser de la place à l'image définie ensuite ;
  Si vous ne placez pas d'image de fond, vous pouvez retirer cette ligne. ;
• border avec la valeur 1px solid #0000AA définit une bordure de taille 1px, de type continu (solid) et de couleur #0000AA (couleur bleue) ;
  Si vous ne souhaitez pas de bordure, vous pouvez retirer cette ligne. ;
• background avec la valeur #ddd url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/info.png) no-repeat 5px center définit un fond de couleur #ddd (gris), avec une image dont l'adresse est la valeur dans url(). L'image ne se répète pas (no-repeat), est positionnée à 5px horizontalement et centrée verticalement (center)  ;
  Modifiez l'url pour mettre celle votre image, que vous aurez ajoutée dans « Contenu » => « Gérer les fichiers ».
  Ouvrez l'image après l'avoir ajoutée pour voir son adresse.
  Si vous ne souhaitez pas d'image de fond, vous pouvez retirer cette ligne, ainsi que la marge intérieure gauche (padding-left). ;

Quatrième partie : le style de l'info-bulle lorsque le lien est survolé.

a[href="#mabulle"]:hover + sub  	/* texte en indice sur survol du lien */
{
display: inline;		/* affichage de la bulle */
}
/* Fin CSS info-bulles */

On ajoute le selecteur :hover qui signifie « survolé ».

Lorsque le texte est survolé, on définit la propriété display à inline,ce qui a pour effet d'afficher la bulle.

Si la souris quitte le texte, la bulle est masquée (le style de la bulle sans survol est réappliqué).

 Et si on souhaite avoir plusieurs styles d'info-bulles ?

Il suffit de définir plusieurs Url, par exemple #mabulleinfo et #mabullewarning.

On place d'abord les styles communs à toutes les info-bulles dans des code CSS dont le sélecteur sera par exemple : a[href="#mabulleinfo"], a[href="#mabullewarning"]

Ensuite on place le code spécifique à chaque info-bulle avec un sélecteur qui cible l'Url de chaque info-bulle.

Ce qui nous donne :

/* Début CSS info-bulles multiples */ 
/* Styles commun à toutees les info-bulles */ 
a[href="#mabulleinfo"], a[href="#mabullewarning"]  			/* texte du lien */ 
{ 
text-decoration:none; 		/* pas de soulignement */ 
color:darkblue; 		/* couleur du texte */ 
} 
a[href="#mabulleinfo"]:hover, a[href="#mabullewarning"]:hover		/* texte du lien survolé */ 
{ 
    cursor:help;			/* curseur souris */ 
} 
a[href="#mabulleinfo"] + sub, a[href="#mabullewarning"] + sub 		/* texte d'info en indice après le lien */ 
{  
bottom:auto; 			/* Corrige le positionnement du sub */
line-height:inherit; 		/* Corrige la taille de ligne du sub */
display:none;				/* pas d'affichage avant le survol */ 
position:absolute;			/* position absolue pour que la bulle soit positionnée hors du texte */ 
font-size:inherit;		/* hérite de la taille du texte du lien */ 
color:darkblue;			/* couleur du texte d'info */ 
text-align:justify;			/* alignement du texte justifié */ 
-moz-border-radius:10px;		/* bordure arrondie 10px de rayon */ 
-webkit-border-radius:10px; 
border-radius:10px; 
margin:10px 10px;		/* marge extérieure haut et gauche, décale l'info-bulle vers le bas et à droite */ 
padding:10px;				/* marge intérieure de 10px */ 
padding-left:50px;			/* marge intérieure gauche de 50px pour laisser de la place à l'image */ 
} 
a[href="#mabulleinfo"]:hover + sub, a[href="#mabullewarning"]:hover + sub  	/* texte en indice sur survol du lien */ 
{ 
    display: inline; 
} 
/* Styles spécifiques à chaque info-bulles */
a[href="#mabulleinfo"]  			/* texte du lien */ 
{ 
background-color:#FFFFAA; 		/* couleur surlignée */ 
} 
a[href="#mabullewarning"]  			/* texte du lien */ 
{ 
background-color:#FFAAAA; 		/* couleur surlignée */ 
} 
a[href="#mabulleinfo"] + sub 			/* texte d'info en indice après le lien */ 
{ 
border:1px solid #0000AA;	/* taille, style et couleur de la bordure */ 
/* fond de la bulle : image non répétée décalée de 5px à droite, centrée verticalement, avec un fond de couleur #ddd */ 
background:#ddd url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/info.png) no-repeat 5px center; 
} 
a[href="#mabullewarning"] + sub 			/* texte d'info en indice après le lien */ 
{ 
border:1px solid #AA0000;		/* taille, style et couleur de la bordure */ 
/* fond de la bulle : image non répétée décalée de 5px à droite, centrée verticalement, avec un fond de couleur #daa */ 
background:#daa url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/warning.png) no-repeat 5px center; 
} 
/* Fin CSS info-bulles multiples */

Et voici une information_{Ceci est une information} et un avertissement test_{Ceci est un avertissement}.

Le titre de cet article  a été modifié pour :

• afficher une image « Nouveau » ;
• mettre le texte en bleu, gras et légèrement plus grand.

Ce résultat est obtenu avec du code CSS,  ajouté dans le menu  :
« Apparence » => « Modifier le thème » => « Ajouter du CSS ».

Pour commencer il vous faut connaître l'identifiant de l'article à mettre en évidence.
Voir cet article pour comprendre comment est structuré un blog : [HTML] Structure d'un blog Eklablog

L'identifiant d'un article est facile à trouver. Il est contenu dans l'adresse de l'article et apparaît également au survol du bouton d'édition de l'article.
Une fois ce nombre repéré, il suffit de le remplacer dans les codes ci-desous.

Pour le texte : on va modifier la couleur, mettre en gras, et définir la taille des caractères à 24 pixels.

#module_titre_article106907602, #module_titre_article106907602 a {
color: blue;
font-weight:bold;
font-size:24px
}

Remplacez dans le code ci-dessus les valeurs numériques surlignées en bleu par l'identifiant de votre article.

Notez qu'on applique le style à l'élément de titre ainsi qu'au lien hypertexte (a) qu'il contient éventuellement.
En effet lors de l'affichage d'une liste d'articles, on remarque que le texte est un lien hypertexte qui pointe vers l'article.
Lors de l'affichage d'un article seul sur la page, il n'y a pas de lien hypertexte.

Pour ajouter une image (ou remplacer une image par défaut définie dans l'apparence du blog), il suffit de définir un style de fond de cette manière :

#module_titre_article106907602{
padding-left : 100px;
background:url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/icons/nouveau.png) no-repeat
}

Ici également, remplacez dans le code ci-dessus les valeurs numériques surlignées en bleu par l'identifiant de votre article.

La valeur 100px définit un décalage du texte vers la droite, afin de laisser de la place à l'image.
Cette valeur doit être adaptée à la largeur de votre image (qui doit de plus ne pas être trop haute).

D'ailleurs, vous pouvez changer d'image en modifiant la propriété url.

L'image peut-être créée avec un éditeur d'image ou trouvée sur internet (vérifiez la licence d'utilisation de l'image).
Chargez-la dans le blog avec le menu « Contenu » => « Gérer les fichiers », et double-cliquez sur l'image pour l'ouvrir et récupérer son adresse.

Remarque : si vous souhaitez appliquer le même style à plusieurs articles, ne répétez pas tout le code ; vous pouvez appliquer le même code à plusieurs articles en sépérant les sélecteurs par des virgules, par exemple :

#module_titre_article106907602, #module_titre_article106907602 a, /* titre article 106907602 */
#module_titre_article106800692, #module_titre_article106800692 a  /* titre article 106800692 */
{
color: blue;
font-weight:bold;
font-size:24px
}
#module_titre_article106907602, /* image article 106907602 */
#module_titre_article106800692  /* image article 106800692 */
{
padding-left : 100px;
background:url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/icons/nouveau.png) no-repeat
}

Dans l'en-tête de ce blog vous pouvez voir un ombrage sous le titre et le slogan (pour peu que vous ayez un navigateur assez récent).

Cela est très facile à réaliser avec du code CSS.

Voir cet article pour une première découverte du CSS : Mon premier code CSS - images au coins arrondis avec ombrage

La structure d'un blog nous révèle que le titre a un identifiant titre_header et le slogan un identifiant slogan_header.

Nous allons donc définir le style pour chacun de ces identifiants.
Il suffit de rajouter un dièse (#) devant l'identifiant et de mettre entre accolades le style voulu.

Pour un ombrage de texte il faut utiliser le style text-shadow.

Ce style est expliqué en détail par exemple ici : CSS3 Shadows.

On précise une position horizontale et verticale de l'ombre, une distance du flou et une couleur.

Voici les codes utilisés pour ce blog :

#titre_header {text-shadow:3px 3px 5px #777}

#slogan_header {text-shadow:2px 2px 3px #AAA}

Ces codes sont à insérer dans le menu « Apparence » => « Modifier le thème » => « Ajouter du CSS ».

Le but de cet article est de colorer dynamiquement les différents niveaux d'une liste numérotée d'un article.

Avant	Après

Je ne vais pas détailler ici tous les sélecteurs possibles.
Les types de sélecteur sont détaillés ici : Les sélecteurs en CSS3

Créez tout d'abord une liste hiérachique : c'est-à-dire une liste à plusieurs niveaux.

Commencez par écrire le premier élément puis cliquez sur le bouton « Numérotation ».
Pour passer au niveau suivant (décalé vers la droite), utilisez le bouton « Augmenter le retrait », accessible en mode d'éditeur « Expert ».
Bien évidemment, « Diminuer le retrait » fait l'inverse.
Choisissez une numérotation différente pour chaque niveau (dans la liste déroulante « Numérotation »).
Cela nous permettera de différencier les niveaux pour leur appliquer un style différent.

Voici les boutons de l'éditeur qui sont utiles :

 J'ai créé pour cet article une liste avec :

• un niveau 1 de type « Par Défaut » (numérique) ;
• un niveau 2 de type « Alpha-Minuscule » ;
• et un niveau 3 de type « Romain minuscule ».

Vous devriez avoir ceci :

En basculant vers l'éditeur de Code Source, on voit ce code :

<ol>
<li>Niveau 1-1<ol style="list-style-type: lower-alpha;">
<li>Niveau 2-a</li>
<li>Niveau 2-b<ol style="list-style-type: lower-roman;">
<li>Niveau 3-i</li>
<li>Niveau 3-ii</li>
</ol></li>
<li>Niveau 2-c</li>
</ol></li>
<li>Niveau 2-2</li>
</ol>

Que je remets en forme ici pour plus de lisibilité :

<ol>
	<li>Niveau 1-1
		<ol style="list-style-type: lower-alpha;">
			<li>Niveau 2-a</li>
			<li>Niveau 2-b
				<ol style="list-style-type: lower-roman;">
					<li>Niveau 3-i</li>
					<li>Niveau 3-ii</li>
				</ol>
			</li>
			<li>Niveau 2-c</li>
		</ol>
	</li>
	<li>Niveau 2-2</li>
</ol>

Chaque niveau de liste est défini par <ol>, et chaque élément de liste par <li>.

Le code CSS peut être ajouté dans le menu « Apparence » => « Modifier le thème » => « Ajouter du CSS ».

Comme on souhaite l'appliquer uniquement à l'article qui contient la liste, il faut d'abord repéré son identifiant avec les outils de développement par exemple.

L'identifiant de mon article est #module_contenu_article106949204.
Vous devrez remplacer la partie numérique par le numéro de votre article.

Ensuite on défini le CSS du premier niveau de liste :

#module_contenu_article106949204 OL > LI {
	COLOR: darkred; MARGIN-LEFT: 15px; FONT-SIZE: 20px
}

Un espace entre deux sélecteurs signifie par exemple ici : tous les OL à l'intérieur de mon élément d'identifiant #module_contenu_article106949204.
Un signe supérieur signifie par exemple ici : tous les LI placés directement dans un OL (mais pas ceux qui seraient d'un niveau inférieur dans un sous-élément de OL).

On définit ci-dessus une couleur rouge foncé avec une taille de texte de 20 pixels.
Notez qu'on ajoute également une marge de 15 pixels pour s'assurer que les numéros à gauche soit complétement visibles car la taille agrandie des caractères risque de rendre une partie des numéros invisibles.

Puis le deuxième niveau de liste, en bleu :

#module_contenu_article106949204 OL OL > LI {
	COLOR: darkblue; MARGIN-LEFT: 12px; FONT-SIZE: 17px
}

Et enfin le troisième niveau de liste, en noir :

#module_contenu_article106949204 OL OL OL > LI {
	COLOR: black; MARGIN-LEFT: 10px; FONT-SIZE: 12px
}

On a ainsi trois lignes de CSS, chacune définissant un niveau plus fin.
Chaque élément de liste (LI à l'intérieur d'un OL) est d'abord coloré en rouge.
Puis si on trouve deux niveaux de liste (LI à l'intérieur d'un OL lui-même à l'intérieur d'un OL), on colore en bleu.
Et le troisième niveau colore en noir les éléments LI à l'intérieur de trois OL.

Voici le code à placer dans le CSS, après avoir mis l'identifiant de votre article :

#module_contenu_article106949204 OL > LI {
	COLOR: darkred; MARGIN-LEFT: 15px; FONT-SIZE: 20px
}

#module_contenu_article106949204 OL OL > LI {
	COLOR: darkblue; MARGIN-LEFT: 12px; FONT-SIZE: 17px
}

#module_contenu_article106949204 OL OL OL > LI {
	COLOR: black; MARGIN-LEFT: 10px; FONT-SIZE: 12px
}

Si vous souhaitez placer ce code directement dans l'article, vous pouvez ajouter (dans l'éditeur de Code Source) le code entre des balises « style » de cette manière :

<style type="text/css"><!--
#module_contenu_article106949204 OL > LI {
	COLOR: darkred; MARGIN-LEFT: 15px; FONT-SIZE: 20px
}

#module_contenu_article106949204 OL OL > LI {
	COLOR: darkblue; MARGIN-LEFT: 12px; FONT-SIZE: 17px
}

#module_contenu_article106949204 OL OL OL > LI {
	COLOR: black; MARGIN-LEFT: 10px; FONT-SIZE: 12px
}

--></style>

Et voici le résultat obtenu :

1. Niveau 1-1
   1. Niveau 2-a
   2. Niveau 2-b
      1. Niveau 3-i
      2. Niveau 3-ii
   3. Niveau 2-c
2. Niveau 2-2

L'intérêt d'utiliser du code CSS plutôt que de formater manuellement chaque ligne est que lorsqu'on ajoute un nouvel élément de liste, celui-ci est automatiquement formaté.
Et il est possible de modifier en une seule opération la couleur ou la taille d'un niveau de liste.

Pour utiliser Javascript, il faut au préalable demander aux responsables de l'activer sur vos blog, en passant par le formulaire de contact.

Voici un petit code javascript qui affiche une fenêtre avec un message :

alert("Bonjour");

Cliquez sur « Exécuter ce code » en bas à droite du code ci-dessus pour l'exécuter.
Un petite fenêtre s'affiche :

Le code javascript peut-être écrit à deux endroits dans Eklablog :

• dans une page ou un article ;
• dans un module.

Si vous insérez du code dans une page ou un article, il sera exécuté lors de l'affichage de cette page ou cet article.

Si vous insérez du code dans un module, il sera exécuté à l'ouverture du blog lors du chargement des modules.

Si vous avez activé la navigation Full-Ajax dans les paramètres du blog, le code présent dans les modules ne s'exécutera pas à chaque changement de page, car les modules ne sont alors pas rechargés systématiquement.

Dans un nouvel article, ajoutons ce code dans l'éditeur source HTML :

<script>// <![CDATA[
alert ("Bonjour");
// ]]></script>

Sauvegarder et raffraîchir la page, la fenêtre qui s'affiche est (varie en fonction des navigateurs) :

Ce n'est pas tout à fait ce qu'on attend.
En fait la fenêtre vu précédemment (celle avec la barre de titre bleue) est une fenêtre créée par Eklablog en remplacement de la fenêtre standard.
Pour pouvoir l'utiliser, il faut attendre que le javascript du blog soit totalement chargé.

Voici le code à utiliser :

 <script>// <![CDATA[
// Début du code Javascript 
	if(typeof(onJSFilesLoaded) != "object")
	   onJSFilesLoaded = [];
	onJSFilesLoaded.push(function(){
	  // Début du code au chargement
	  alert ("Bonjour"); // Pour test
	  // Fin du code au chargement
	});
	// Début autres fonctions
	// Si vous avez d'autres fonctions...
	// Fin autres fonctions
// Fin du code Javascript
// ]]></script>

On s'assure ainsi que tout soit bien chargé avant d'exécuter notre code.

En général, on utilisera ce mécanisme qui permet d'attendre que toute la page soit chargée avant de faire des manipulations en javascript.

Dans cet article, les images ont des coins arrondis et un ombrage.

Nous allons détailler la procédure pour accomplir cet effet.

Si ne voyez pas d'effet particulier sur les images de cet article, c'est sans doute que votre navigateur est trop ancien ; mettez-le à jour.

Le code CSS peut être ajouté dans le menu « Apparence » => « Modifier le thème » => « Ajouter du CSS ».

Copier-coller le code affiché ci-dessous dans la fenêtre d'édition CSS (à l'emplacement du cadre jaune montré ci-dessus), puis cliquez sur le bouton « Appliquer et Sauvegarder ».

img {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow: 0px 3px 12px #777;
-webkit-box-shadow: 0px 3px 12px #777;
box-shadow: 0px 3px 12px #777;}

Ce code est construit ainsi :

• img est un sélecteur qui définit que ce qui suit s'appliquera aux éléments de nom <img>, c'est à dire aux images ;
• entre accolades et séparés par des points-virgules, on définit chaque style à appliquer ;
• border-radius:10px définit un arrondi de 10 pixels ;
• box-shadow définit un ombrage ;

Vous noterez que chaque style est triplé avec l'ajout des préfixes -moz et -webkit, ceci afin d'assurer la compatibilité avec un maximum de navigateurs.

Le style d'ombrage est détaillé dans cet article sur developpez.com : Créer des effets étonnants avec la propriété CSS3 box-shadow

Le code CSS ainsi défini s'applique à tout le blog.

Nous allons maintenant voir comment l'appliquer à un seul article.

Pour cela il faut modifier le sélecteur.

Les types de sélecteur sont détaillés ici : Les sélecteurs en CSS3

Pour l'instant le code s'applique à tous les éléments img.

En consultant le code de la page affichant un article, on voit que celui est affiché dans un élément codé ainsi :

<div id="module_contenu_article106831812" class="module_contenu">

Pour une page, le code est presque identique, html remplaçant article :

<div id="module_contenu_html748300" class="module_contenu">

On souhaite n'appliquer notre code CSS qu'à l'article 106831812.

On va donc ajouter en sélecteur l'identifiant repéré ci-dessus.
Un identifiant se défini avec le caractère #, ce qui nous donne #idcible img
On l'ajoute avant le sélecteur img, afin de cibler les éléments img contenus dans un élément d'identifiant idcible.

L'identifiant d'un article est facile à trouver. Il est contenu dans l'adresse de l'article et apparaît également au survol du bouton d'édition de l'article.
Une fois ce nombre repéré, il suffit de le remplacer dans le code ci-desous

#module_contenu_article106831812 img {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow: 0px 3px 12px #777;
-webkit-box-shadow: 0px 3px 12px #777;
box-shadow: 0px 3px 12px #777;}

Dans la mesure où on n'applique maintenant le code qu'à un article, on peut envisager d'écrire le code CSS dans cet article afin de ne pas polluer le code CSS global et retrouver facilement ce code dans l'article.
Pour faire cela on peut écrire du code dans l'éditeur HTML, en l'encadrant avec des balises style.

Le code suivant est celui qui est écrit dans cet article et qui permet d'afficher des images avec coins arrondis et ombrage, uniquement pour cet article :

<style type="text/css"><!--
#module_contenu_article106831812 img {

-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow: 0px 3px 12px #777;
-webkit-box-shadow: 0px 3px 12px #777;
box-shadow: 0px 3px 12px #777;}
--></style>

Dans Eklablog, on écrit ses articles avec un éditeur (pour information c'est TinyMCE).
Cela permet, sans connaissance du langage HTML, d'écrire du texte formaté, d'ajouter des images...

Cependant il n'est pas possible de tout faire avec cet éditeur visuel.
Par exemple si j'ajoute une image puis du texte, j'obtiens :

Bouton pour afficher le code HTML.

Le code généré par l'éditeur (visible en cliquant sur le bouton « Code Source ») est le suivant :

<p><img class="undefined" src="http://ekladata.com/6FMS6ihA1mrK63q3Fl2dmCOSkUA/html.jpg" alt="" width="177" height="99" />Bouton pour afficher le code HTML.</p>

• <p> est un paragraphe ;
• <img> est l'image.

L'image possède un attribut src qui contient le chemin de l'image à afficher.

Notez que le texte s'affiche à droite de l'image, aligné en bas.
Pour l'exemple, je souhaiterais qu'il s'affiche toujours à droite mais aligné au centre.

On trouve le code nécessaire par exemple ici : Comment aligner verticalement une image et une ligne de texte-texte.html

Le code nécessaire est : vertical-align:middle;
C'est en fait un style que l'on pourrait appliquer avec du code CSS mais qu'il est possible d'écrire pour un unique élément dans son attribut style.

Ajoutez le texte en bleu dans l'éditeur de code HTML :

<p><img class="undefined" style="vertical-align:middle" src="http://ekladata.com/6FMS6ihA1mrK63q3Fl2dmCOSkUA/html.jpg" alt="" width="177" height="99" />Bouton pour afficher le code HTML.</p>

On obtient alors l'effet désiré :

Bouton pour afficher le code HTML.

Pour aller un peu plus loin, nous allons ajouter une bordure à l'image.
Ajoutez le texte en bleu dans l'éditeur de code HTML :

<p><img class="undefined" style="border: 2px solid DarkRed;vertical-align:middle" src="http://ekladata.com/6FMS6ihA1mrK63q3Fl2dmCOSkUA/html.jpg" alt="" width="177" height="99" />Bouton pour afficher le code HTML.</p>

On demande une bordure de 2px, solid (c'est-à-dire un trait plein) et de couleur DarkRed (rouge sombre).

 Vous trouverez la liste des couleurs par exemple ici.

On obtient alors une bordure rouge :

Bouton pour afficher le code HTML.

 C'est très bien, mais si je souhaite utiliser ce style pour d'autres images ?

On peut alors utiliser du code CSS pour définir une classe réutilisable.
Cela évitera de devoir rechercher le style pour le copier-coller.

Pour un premier code CSS, voir cet article : Mon premier code CSS - images au coins arrondis avec ombrage.

Ajoutez ce code au CSS du blog ; c'est tout simplement le contenu de l'attribut « style » défini pour une classe « monimagecentre » :

.monimagecentre {border: 2px solid DarkRed; vertical-align: middle;}

Il suffit alors uniquement de préciser dans le code HTML la classe pour chaque image à laquelle on souhaite appliquer le style :

 <p><img class="monimagecentre" src="http://ekladata.com/6FMS6ihA1mrK63q3Fl2dmCOSkUA/html.jpg" alt="" width="177" height="99" />Bouton pour afficher le code HTML.</p>

Pour un style un peu complexe, il est alors plus simple de définir une classe que l'on a nommée de manière à la retenir facilement (on peut également retrouver son nom rapidement en regardant le CSS du blog) que de définir à chaque fois tous les attributs de style.

En fait on utilisera souvent le HTML conjointement avec du code CSS et/ou Javascript.

Afin de pouvoir agir sur les éléments du blog, il est indispensable de savoir les repérer et visualiser la manière dont il sont définis (identifiant, nom, classe...).

Pour visualiser comment est construit une page internet, vous pouvez afficher la source en cliquant avec le bouton droit sur la page et en cliquant « Afficher le code source de la page », « Code source de la page » ou « Afficher la source » en fonction du navigateur.

Il peut être difficile de répérer un élément dans ce code complexe.

Utilisez alors les outils de développement, accessible sur tous les navigateurs récents avec le raccourci clavier « F12 ».

Chercher l'icône de l'inspecteur d'élément : c'est une loupe ou une petite flèche.
Cliquez sur cette icône puis sur un élément de la page pour visualiser son emplacement et son code.

Chrome
Firefox
Internet exlorer (IE8)
Internet explorer (IE11)

Voici le découpage d'un blog :

Chacun des éléments suivant est défini par un identifiant unique (header, content...).

 1 : Le menu d'administration :
On y trouvera notamment le pseudo de connexion.

<div id="menubar" style="display: block;">...</div>

2, 3, 4, 5 et 6 sont regroupés dans un élément background :

<div id="background">...</div>

2 : l'en-tête du blog :
Affiche le titre et le slogan du blog, ainsi qu'un menu.

<div id="header">...</div>

3 : Le contenu du blog :
Pour l'affichage des articles et des pages.

<div id="content">...</div>

4 et 5 : les menus du blog :
Le nombre et le positionnement des menus sont fonctions du thème du blog.
Ils contiennent les modules.

<div id="menu1_float">...</div>
<div id="menu2_float">...</div>

6 : Le pied de page du blog :
Pour l'affichage d'informations diverses.

<div id="footer">...</div>

Connaissant ces identifiants, on peut alors agir en Javascript ou avec du CSS :

Exemple de code Javascript pour modifier la couleur de fond du contenu (notez que vous pouvez la modifier dans le thème du blog).

document.getElementById('content').style.backgroundColor="PowderBlue";

Exemple de code CSS pour modifier l'apparence de l'en-tête (bords arrondis) :

#header {
border:1px solid #eebb80;
-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px; box-shadow:0px 3px 12px #777;-moz-box-shadow: 0px 3px 12px #777;-webkit-box-shadow: 0px 3px 12px #777;
margin-left:5px;
margin-right:5px;
}

 Zoom sur l'en-tête :

 1 : Le titre du blog :
Affiche le titre défini dans la configuration du blog.

<div id="titre_header">...</div>

 2 : Le slogan du blog :
Affiche le slogan défini dans la configuration du blog.

<div id="slogan_header">...</div>

 3 : Le menu du blog :
Affiche le menu défini dans « Apparence » => « Menu de l'en-tête ».

<div id="menu">...</div>

 Zoom sur le contenu:

Le contenu affiche les articles et pages du blog.
Ici pour l'exemple ce sont des articles.

Chaque élement de ce contenu est inséré dans un élément de liste (<li>).
Le code de la liste (<ul>) est :

<ul class="ulmodules" id="ulmodules">...</ul>

 1 : Le bloc d'édition :
Visible uniquement par les administrateurs du blog.

<li class="edition_block" id="module_articlesrecent" >...</li>

 2 : Un premier article.

<li id="module_article106837064">...</li>

 3 : Un deuxième article.

<li id="module_article106837060">...</li>

 Zoom sur un article :

L'article se décompose en un titre et un contenu.

 1 : Le titre.

<div class="module_titre">...</div>

Ce bloc titre se décompose en un bloc de menu (les boutons Editer et Supprimer) et un bloc de texte (de tag h1):

<div class="module_tools">...</div>
<h1 class="module_titre_contenu" id="module_titre_article106837064">

 2 : Le contenu.

<div class="module_contenu" id="module_contenu_article106837064"<>...</div>

Ce bloc contenu se décompose notamment en un bloc d'information et un bloc de texte :

<div class="article_info">...</div>
<div class="article_text">...</div>

 Zoom sur les menus :

Chaque élement d'un menu (c'est-à-dire un module) est inséré dans un élément de liste (<li>).
Le code de la liste (<ul>) est (le numéro de menu varie de 1 à 2):

<ul class="ulmodule_menu" id="ulmenu2">...</ul>

 1 et 2 : Des modules standards.
Le contenu de ces modules est défini par Eklablog.
Ils ont une classe particulière : module_menu_type_stats, module_menu_type_links...

<li class="module_menu_type_stats" id="module_menu140021266">...</li>
<li class="module_menu_type_links" id="module_menu140021268">...</li>

 3 et 4 : Des modules simples.
Le contenu de ces modules est défini par l'administrateur du blog (vous).
Ils ont tous la même classe : module_menu_type_html.

<li class="module_menu_type_html" id="module_menu140021314">...</li>
<li class="module_menu_type_html" id="module_menu140021546">...</li>

 Zoom sur un module :

Comme pour un article, un module se décompose en un titre et un contenu.

 1 : Le titre.

<div class="module_menu_titre">...</div>

Ce bloc titre se décompose en un bloc de menu (les boutons Editer et Supprimer) et un bloc de texte :

<div class="module_tools">...</div>
<span id="module_menu_titre140021266">...</span>

 2 : Le contenu.

<div class="module_menu_contenu" id="module_menu_contenu140021268">...</div>

Si vous cherchez un élément non cité ci-dessous, utilisez les outils de développement du navigateur (F12)