• [CSS] Ajouter du texte au module Newsletter et agrandir les éléments

    Voici à gauche un module Newsletter standard, et à doite le module amélioré (celui de ce blog) :

      

    On a :

    • ajouté du texte en rouge et en italique
    • élargi la zone de texte de saisie
    • élargi le bouton

    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.

    « [SCRIPT] Afficher des fenêtres de même style que celles d'Eklablog[SCRIPT] Afficher des messages d'informations temporaires (splash screen) »

  • Commentaires

    1
    Mardi 27 Mai 2014 à 19:06

    Bravo pour ce truc. J'apprécie beaucoup.

    2
    Samedi 14 Juin 2014 à 20:47

    Pouvoir allongé c'est plus esthétique merci pour ce code

    3
    Mardi 30 Décembre 2014 à 02:29

    Merci c'est plus joli de cette manière mais j'aurai quand même une question : le texte qui est écrit en rouge peut-on le mettre d'une autre couleur ?

    4
    Mardi 30 Décembre 2014 à 18:31

    Pour la couleur, remplacez darkred par une autre couleur.

    Une liste des couleurs est ici :
    http://www.w3schools.com/tags/ref_colornames.asp

    5
    Mardi 30 Décembre 2014 à 20:23

    D'accord merci je vais essayer.

     

    6
    Samedi 26 Mars 2016 à 10:00

    Bonjour ! Merci pour toutes ces astuces, informations ou plutôt formations ... Je découvre à l'instant votre blog et trouve plus qu'intéressant. Je suis nouvelle et n'ai jamais blogué auparavant mais c'est sûr je reviendrai très régulièrement... A très bientôt et bon week-end de Pâques ! smile

    7
    Jeudi 4 Août 2016 à 12:20

    merci beaucoup pour ce code

    j'ai fait la même chose avec la Shoutbox j'ai supprimée Newsletter et remplacer par Shoutbox

    se qui donne

     /* Shoutbox*/

    .module_menu_type_shoutbox input[name=subscribe] {width:80%;}
    .module_menu_type_shoutbox input[type=submit] {width:80%;}
    .module_menu_type_shoutbox form:before{
    content:"vous pouvez me laisser un petit message ici :) .";
    font-style:italic;
    font-size:15px;
    color:#60596f;
    }

    8
    Dimanche 17 Juin 2018 à 00:27

    Bonjour, ce post est très vieux, désolé de le déterrer mais c'est exactement ce que je recherchais. En revanche j'essaie d'ajouter une image au-dessus de la zone de texte, mais je n'arrive pas à l'ajouter

    J'ai ajouté l'image que je ne veux pas en fond, mais au-dessus du sélecteur d'adresse mail, en tapant la ligne suivante:

    /* Newsletter */
    .module_menu_type_newsletter input[name=subscribe{width:88%;}
    .module_menu_type_newsletter input[type=submit{width:91%;}
    .module_menu_type_newsletter form:before
    background:<p><img src="http://urbexgo.eklablog.com/mise-en-page-gallery213496" alt="newsletter" /></p>
    }

    Merci d'avance pour votre aide, bonne soirée

      • Mercredi 4 Juillet 2018 à 14:09

        Bonjour,

        Un peu tard : un exemple, avec les tailles en px à adapter si besoin.

        .module_menu_type_newsletter form:before
            content"";
            background-imageurl('http://ekladata.com/6j7U1wjGDl4UAcZqImVF9brPF3g.png');
            background-size100%;
            background-repeatno-repeat
            displayinline-block
            width:195px;
            height70px;  
            position:relative;
            top:5px;   
        }

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :