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.
par Zoélie
publié dans :
TIP's
Si vous êtes attentifs (et Aya l'est), vous constaterez que différentes choses se passent lorsque vous passez la souris sur mes liens ...
En plus de la couleur du lien qui change, une "icône" apparaît sur les lens des modules et ceux changent de taille, le petit écureuil bouge quand vous passez sur le titre et des étoiles apparaissent lorsque vous passez sur les liens "Commentaires", "Trackback" et "commentaire de Untel (site web)" ...
Comment faire ?
Il existe un sélecteur dans le CSS , a:hover , qui représente l'aspect du lien lorque la souris passe dessus . Vous pouvez lui donner les attributs que vous voulez, y compris une image de fond.
Exemple:
a:hover {
color: #7FFFD4;
text-decoration: none;
background:transparent url(http://idata.over-blog.com...etoiles4.gif) repeat-x scroll top left;
}
définit le lien pointé par la souris comme de couleur #7FFFD4, non souligné et avec comme image de fond etoiles4.gif, qui se répête sous toute la largeur du lien ...
C'est ce que j'ai défini par défaut comme aspect des liens soulignés.
Il existe aussi comme option de "text-decoration": souligné (underline) ou clignotant (blink), par exemple ...
Mais, pour le titre, qui est pourtant un lien aussi, on peut vouloir autre chose. Si on ne spécifie rien, le sélecteur a:hover pour le titre des articles hérite de tous les atributs du a:hover général, défini en tête du CSS.
Mais il est possible de spécifier qu'une ou plusieurs caractéristiques du titre souligné par la souris, par exemple la couleur ou l'image de fond, soient différentes de celles du lien général.
Il faut pour cela redéfinir la fonction a:hover pour le titre des articles, comme suit:
- Vous avez ( ou vous pouvez créer) la fonction .titreArticle {} , qui représente les caractéristiques du titre de vos articles...
Entre autres, chez moi, cette fonctin présente l'attribut background, avec l'image du petit écureuil :
.titreArticle{
...
background: url(http://idata.over-blog.com/0/05/85/46/gifs-animes/ecureuil-ordi2.gif) no-repeat scroll top left ;
padding-left: 60px;
padding-bottom : 45px;
padding-top : 20px;
}
- Je lui adjoins la fonction: .titreArticle:hover qui ordonne de passer de l'image de fond ecureuil-ordi2.gif à l'image ecureuil-ordi1.gif quand on passe la souris sur le lien :
.titreArticle:hover {
background: url(http://idata.over-blog.com/0/05/85/46/gifs-animes/ecureuil-ordi1.gif) no-repeat scroll top left ;
padding-left: 60px;
padding-bottom : 45px;
padding-top : 20px;
}
qui diffère de la fonction a:hover de base en cela qu'elle a un autre bakground et un autre padding. Par contre, si je laisse tel quel, .titreArticle:hover hérite de la couleur et de l'attribut " text-decoration: none " de a:hover .
En plus de la couleur du lien qui change, une "icône" apparaît sur les lens des modules et ceux changent de taille, le petit écureuil bouge quand vous passez sur le titre et des étoiles apparaissent lorsque vous passez sur les liens "Commentaires", "Trackback" et "commentaire de Untel (site web)" ...
Comment faire ?
Il existe un sélecteur dans le CSS , a:hover , qui représente l'aspect du lien lorque la souris passe dessus . Vous pouvez lui donner les attributs que vous voulez, y compris une image de fond.
Exemple:
a:hover {
color: #7FFFD4;
text-decoration: none;
background:transparent url(http://idata.over-blog.com...etoiles4.gif) repeat-x scroll top left;
}
définit le lien pointé par la souris comme de couleur #7FFFD4, non souligné et avec comme image de fond etoiles4.gif, qui se répête sous toute la largeur du lien ...
C'est ce que j'ai défini par défaut comme aspect des liens soulignés.
Il existe aussi comme option de "text-decoration": souligné (underline) ou clignotant (blink), par exemple ...
Mais, pour le titre, qui est pourtant un lien aussi, on peut vouloir autre chose. Si on ne spécifie rien, le sélecteur a:hover pour le titre des articles hérite de tous les atributs du a:hover général, défini en tête du CSS.
Mais il est possible de spécifier qu'une ou plusieurs caractéristiques du titre souligné par la souris, par exemple la couleur ou l'image de fond, soient différentes de celles du lien général.
Il faut pour cela redéfinir la fonction a:hover pour le titre des articles, comme suit:
- Vous avez ( ou vous pouvez créer) la fonction .titreArticle {} , qui représente les caractéristiques du titre de vos articles...
Entre autres, chez moi, cette fonctin présente l'attribut background, avec l'image du petit écureuil :
.titreArticle{
...
background: url(http://idata.over-blog.com/0/05/85/46/gifs-animes/ecureuil-ordi2.gif) no-repeat scroll top left ;
padding-left: 60px;
padding-bottom : 45px;
padding-top : 20px;
}
- Je lui adjoins la fonction: .titreArticle:hover qui ordonne de passer de l'image de fond ecureuil-ordi2.gif à l'image ecureuil-ordi1.gif quand on passe la souris sur le lien :
.titreArticle:hover {
background: url(http://idata.over-blog.com/0/05/85/46/gifs-animes/ecureuil-ordi1.gif) no-repeat scroll top left ;
padding-left: 60px;
padding-bottom : 45px;
padding-top : 20px;
}
qui diffère de la fonction a:hover de base en cela qu'elle a un autre bakground et un autre padding. Par contre, si je laisse tel quel, .titreArticle:hover hérite de la couleur et de l'attribut " text-decoration: none " de a:hover .
En résumé: Quand vous dérivez une fonction (.titreArtcle:hover) d'une fonction de base (a:hover), elle hérite de toutes les valeurs que vous ne re-spécifiez pas, mais si vous voulez qu'elle se comporte différemment en un point de la fonction de base, il suffit de lui donner un "contre-ordre" ...
Ca s'appelle l'héritage, et c'est une des caractéristiques de la programmation orientée objet ... (Vous pouvez frimer dans les soirées, maintenant ...)
Deuxième exemple, les liens des modules...
Les modules de votre blog sont désignés par le sélecteur .box ;
L'intérieur des modules par .box-content ;
Les liens contenus dans les modules par .box-content a .
Il suffit donc de créer une fonction .box-content a:hover qui représentera les liens, survolés par la souris, dans le contenu des modules.
.box-content a:hover {
font-size: 150%;
line-height:150%;
color: #7FFFD4;
padding-left: 14px;
padding-bottom:15px;
background:transparent url(http://idata.over-blog.com/0/05/85/46/utilitaires/motif-a-moi-reduit.gif) no-repeat scroll bottom left;
}
L'image du background est un motif que j'ai dessiné moi-même avec mes petites mimines sous The Gimp (pas trop dur, vu que l'icône est sensée être toute petite, donc même pour quelqu'un comme moi, qui ne maîtrise pas trop le dessin à la souris, c'est jouable...), elle est en un seul exemplaire (mode no-repeat), contrairement au lien survolé général, et j'ai augmenté la taille de la police (font-size) et la taille de l'interligne (line-height), pour que ça donne le rendu que j'avais en tête ...
Notez que, à chaque fois que je mets des images uniques (no-repeat), j'ajuste le padding (décallage du contenu de l'objet, c'est à dire le texte, par rapport au contenant, qui comprant l'image de fond) de façon à ce que le texte ne se superpose pas à l'image.
Une astuce pour faire cet ajustement facilement consiste à afficher (provisoirement) le contour de l'objet (par exemple .titrearticle) en insérant une ligne:
border: solid #000000 1px;
entre les accolades de l'objet concerné .
Le padding représente alors la marge intérieure par rapport à ce contour .
Il se décompose en padding-top, padding-left, padding-bottom, padding-right et si vous ne mettez pas tous les quatres attributs, la valeur par défut est 0px.
(Voir aussi l'article sur l'ajustement des contours des modules.)
Une fois le réglage du padding effectué, il ne reste plus qu'à supprimer la ligne border.
Pour finir, sachez qu'il est possible de définir exactement de la même façon les liens sur lesquels on a déjà cliqué, en utilisant le sélecteur
a:visited .
Ca s'appelle l'héritage, et c'est une des caractéristiques de la programmation orientée objet ... (Vous pouvez frimer dans les soirées, maintenant ...)
Deuxième exemple, les liens des modules...
Les modules de votre blog sont désignés par le sélecteur .box ;
L'intérieur des modules par .box-content ;
Les liens contenus dans les modules par .box-content a .
Il suffit donc de créer une fonction .box-content a:hover qui représentera les liens, survolés par la souris, dans le contenu des modules.
.box-content a:hover {
font-size: 150%;
line-height:150%;
color: #7FFFD4;
padding-left: 14px;
padding-bottom:15px;
background:transparent url(http://idata.over-blog.com/0/05/85/46/utilitaires/motif-a-moi-reduit.gif) no-repeat scroll bottom left;
}
L'image du background est un motif que j'ai dessiné moi-même avec mes petites mimines sous The Gimp (pas trop dur, vu que l'icône est sensée être toute petite, donc même pour quelqu'un comme moi, qui ne maîtrise pas trop le dessin à la souris, c'est jouable...), elle est en un seul exemplaire (mode no-repeat), contrairement au lien survolé général, et j'ai augmenté la taille de la police (font-size) et la taille de l'interligne (line-height), pour que ça donne le rendu que j'avais en tête ...
Notez que, à chaque fois que je mets des images uniques (no-repeat), j'ajuste le padding (décallage du contenu de l'objet, c'est à dire le texte, par rapport au contenant, qui comprant l'image de fond) de façon à ce que le texte ne se superpose pas à l'image.
Une astuce pour faire cet ajustement facilement consiste à afficher (provisoirement) le contour de l'objet (par exemple .titrearticle) en insérant une ligne:
border: solid #000000 1px;
entre les accolades de l'objet concerné .
Le padding représente alors la marge intérieure par rapport à ce contour .
Il se décompose en padding-top, padding-left, padding-bottom, padding-right et si vous ne mettez pas tous les quatres attributs, la valeur par défut est 0px.
(Voir aussi l'article sur l'ajustement des contours des modules.)
Une fois le réglage du padding effectué, il ne reste plus qu'à supprimer la ligne border.
Pour finir, sachez qu'il est possible de définir exactement de la même façon les liens sur lesquels on a déjà cliqué, en utilisant le sélecteur
a:visited .
par Zoélie
publié dans :
TIP's
