Les couleurs du Module Newsletter
EDIT : Attention, le code Source de ce module ayant changé depuis le jour où cet article a été rédigé, certaines informations sont obsolètes !
Les lignes inscrite dans le module Newsletter sont souvent difficiles a lire, voire invisibles...
Voici tout ce qu'il faut pour les modifier:
On veut agir uniquement sur le module Newsletter, donc on commence chaque ligne par #Newsletter.
#Newsletter .box-content {
color:#machin;
}
change "inscription a la newsletter". Jusque la, c'est logique.
#Newsletter .box-content p {
color:#truc;
}
change "email", car ce mot est defini (par la partie du code a laquelle on n'a pas acces) dans un paragraphe (classe p), justement pour pouvoir le differencier de "inscription a la newsletter".
Edit : le pparagraphe n'existe plus.
#Newsletter input[type="submit"] {
color: #chose;
}
change "je m'inscris".
Edit : maintenant, ça s'appelle "Ok".
Enfin,
input {
color:#toto;
}
situe tout en haut, dans la partie des caracteristiques generales (donc ne commence pas par un selecteur type # ou .) change la couleur de ce qu'on tape dans les fenetres du blog (l'adresse email pour s'inscrire a la newsletter et le mot-cle qu'on met dans le module Recherche, par exemple) Edit : et le mot "email" qui est maintenant dans le cadre.
j'ai aussi ajouter dans cette fonction input:
border: outset;
pour avoir le cadre en relief que vous pouvez voir.
Moi, j'trouve ca beau. Pas Vous ? Ah bon.
Cependant, si vous voulez toucher exclusivement le cadre ou l'on met l'adresse e-mail pour s'inscrire a la Newsletter et pas les autres cadres d'input (pour reduire sa longueur, par exemple), il faut alors ajouter la fonction:
#Newsletter input[type="text"] { width: 80%;}
Pour avoir la petite image ci-dessus en-dessous du cadre "Je m'incris" , j'ai ajoute dans le paragraphe le formulaire (<form>)de la Newsletter son url. Ca donne donc finalement :
#Newsletter .box-content p
Edit : #Newsletter .box-content form
{
color:#FFDEAD;
padding-bottom:65px;
background:transparent url(http://idata.over-blog.com/0/05/85/46/gifs-animes/animaux-305.gif) no-repeat scroll bottom left;
}
Le padding-bottom: 'hauteur de l'image' px; permet d'agrandir la taille du paragraphe vers le bas, pour que l'image rentre en entier.
Les lignes inscrite dans le module Newsletter sont souvent difficiles a lire, voire invisibles...
Voici tout ce qu'il faut pour les modifier:
On veut agir uniquement sur le module Newsletter, donc on commence chaque ligne par #Newsletter.
#Newsletter .box-content {
color:#machin;
}
change "inscription a la newsletter". Jusque la, c'est logique.
#Newsletter .box-content p {
color:#truc;
}
change "email", car ce mot est defini (par la partie du code a laquelle on n'a pas acces) dans un paragraphe (classe p), justement pour pouvoir le differencier de "inscription a la newsletter".
Edit : le pparagraphe n'existe plus.
#Newsletter input[type="submit"] {
color: #chose;
}
change "je m'inscris".
Edit : maintenant, ça s'appelle "Ok".
Enfin,
input {
color:#toto;
}
situe tout en haut, dans la partie des caracteristiques generales (donc ne commence pas par un selecteur type # ou .) change la couleur de ce qu'on tape dans les fenetres du blog (l'adresse email pour s'inscrire a la newsletter et le mot-cle qu'on met dans le module Recherche, par exemple) Edit : et le mot "email" qui est maintenant dans le cadre.
j'ai aussi ajouter dans cette fonction input:
border: outset;
pour avoir le cadre en relief que vous pouvez voir.
Moi, j'trouve ca beau. Pas Vous ? Ah bon.
Cependant, si vous voulez toucher exclusivement le cadre ou l'on met l'adresse e-mail pour s'inscrire a la Newsletter et pas les autres cadres d'input (pour reduire sa longueur, par exemple), il faut alors ajouter la fonction:
#Newsletter input[type="text"] { width: 80%;}
Pour avoir la petite image ci-dessus en-dessous du cadre "Je m'incris" , j'ai ajoute dans le paragraphe le formulaire (<form>)de la Newsletter son url. Ca donne donc finalement :
#Newsletter .box-content p
Edit : #Newsletter .box-content form
{
color:#FFDEAD;
padding-bottom:65px;
background:transparent url(http://idata.over-blog.com/0/05/85/46/gifs-animes/animaux-305.gif) no-repeat scroll bottom left;
}
Le padding-bottom: 'hauteur de l'image' px; permet d'agrandir la taille du paragraphe vers le bas, pour que l'image rentre en entier.