Eklablog : Javascript, CSS, HTML et astuces diverses
Voici à gauche un module Newsletter standard, et à doite le module amélioré (celui de ce blog) :

On a :
Ces modifications sont faites uniquement avec du code CSS.
Inutile donc d'avoir le Javascript activé pour les mettre en place.
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 ».
Code CSS pour la NewletterTout sélectionner
/* Newsletter */
.module_menu_type_newsletter input[name=subscribe] {width:80%;}
.module_menu_type_newsletter input[type=submit] {width:80%;}
.module_menu_type_newsletter form:before{
content:"Inscrivez votre adresse pour suivre ce blog.";
font-style:italic;
font-size:10px;
color:darkred;
}
Le module d'inscription à la Newletter à une classe de nom .module_menu_type_newletter.
On y trouve un formulaire (form) contenant des éléments (input).
L'élément de nom subscribe est la zone de texte de saisie.
L'élément de type submit est le bouton.
Notez l'utilisation de :before qui permet d'ajout un élément avant l'élément ciblé par le sélecteur CSS (donc ici avant le formulaire).
content définit le contenu de ce nouvel élément.
Ensuite on ajoute les styles de cet élément (ici en italique, de taille 10px et de couleur rouge sombre).
Il n'est pas possible avec cette technique d'appliquer un format différent aux mots de l'élément ajouté : tout le contenu est du même format.
Vous pouvez ajouter une image à l'aide du style background.