qu'il a fait ???
Vous vous balladez au gré du vent virtuel sur les blogs des uns et des autres, et, tel un charmant bambin devant le jouet de son petit camarade (bon, d'accord, comme un affreux lardon envieux), vous tombez en pamoison devant un gadget manifestement CSSien qui frime sa mère (oui, oui, une ligne de CSS, ca peut frimer sa mère, et pas qu'un peu ! ) sur un autre blog que le vôtre ... Horreur !
Il vous le faut ...
(enfin, un autre, un mieux, évidemment.)
(Et ne me faites pas croire que vous n'êtes pas comme ça, ça marchera pas avec moi ...)
Et, bien sûr, vous ne savez pas comment faire ...
Alors, le plus simple, c'est d'aller faire un tour sur son CSS (pas question de le vampiriser avec un bon gros copier/coller des familles à la truelle, non plus, hein.)
Sur la page web, vous faites Clic-Droit, puis vous sélectionnez dans le menu déroulant qui s'affiche "View Page Source" ou "Code Source de la page".
Jusque là, facile !
Mais ce n'est pas le CSS qui s'affiche, mais le code html de la page, évidemment...
Mais, le CSS est caché, là, pas loin !
Parmi ces incantations probablement cabbalistiques que sont les html xmlns, meta http-equiv, meta name, et autres horreurs, la ligne magique, c'est
Vous copiez
Il vous le faut ...
(enfin, un autre, un mieux, évidemment.)(Et ne me faites pas croire que vous n'êtes pas comme ça, ça marchera pas avec moi ...)
Et, bien sûr, vous ne savez pas comment faire ...
Alors, le plus simple, c'est d'aller faire un tour sur son CSS (pas question de le vampiriser avec un bon gros copier/coller des familles à la truelle, non plus, hein.)
Sur la page web, vous faites Clic-Droit, puis vous sélectionnez dans le menu déroulant qui s'affiche "View Page Source" ou "Code Source de la page".
Jusque là, facile !
Mais ce n'est pas le CSS qui s'affiche, mais le code html de la page, évidemment...
Mais, le CSS est caché, là, pas loin !
Parmi ces incantations probablement cabbalistiques que sont les html xmlns, meta http-equiv, meta name, et autres horreurs, la ligne magique, c'est
<link rel="stylesheet" type="text/css"
href="http://fdata.over-blog.com/nofound.png?http://data.over-blog.com/lib/6/4/58546/css/custom.css" />
Vous copiez
http://fdata.over-blog.com/nofound.png?http://data.over-blog.com/lib/6/4/58546/css/custom.css dans la barre url de votre navigateur.
Et là, sous vos yeux ébahis, s'affiche le CSS convoité !
par Zoélie
publié dans :
TIP's
Vous avez bien compris comment transformer vos modules, mais maintenant, une question vous taraude encore : Comment faire une transformation donnée sur UN SEUL module ? 
C'est possible.
En effet, pour agir sur l'ensemble des modules, on utilise le mot-clé .box .
Et bien, il existe en fait un mot-clé par module:
Les deux modules de texte libre sont appelés par les mots-clé : #RightPart et #LeftPart, même si ceux-ci ne sont pas nécessairement à gauche ou à droite...
Le calendrier, on l'a vu, s'appelle #Calendrier .
Le module des catégories : #Categorie .
Le module où sont affichés les derniers commentaires : #CommentRecent .
Le module où sont affichés les derniers articles : #ArticleRecent .
Le module où sont affichés les articles des derniers mois : #Archive .
Le module de vos liens : #Lien .
Le module de vos albums : #Album .
Le module d'images aléatoires de chacun de vos albums : #aleaIm .
Le module de recherche par mot-clé (sur Google pour l'instant, mais limité à votre blog) : #Recherche .
Le module contenant " Créer votre blog gratuit " : #Concours .
Le module de W3C : #Syndication .
Le module de Présentation : #Presentation .
Le module pour s'inscrire à la Newsletter (Tiens, d'ailleurs, si vous n'avez rien à faire, là, tout de suite, inscrivez-vous à la mienne, comme ça, j'aurais peut-être un jour la possibilité de passer en Privilège et je pourrais trouver pleeeeins d'autres TIP's) : #Newsletter.
Bref, vous avez compris l'idée ... Ils sont au départ dans le CSS sous forme de déclaration:
#LeftPart {}
Pour les modifier un par un, il suffit de procéder comme pour le .box :
Par exemple, en tapant :
#LeftPart {
font-family: "Comic Sans MS",Times New Roman, Helvetica, Arial, sans-serif;
background:transparent url(http:// gnagna.jpg) repeat-x scroll top left;
}
... vous mettez un fond et une police spéciale à un de vos modules Texte Libre (il suffit de tester pour voir lequel...) Attention: background du module, ce n'est pas tout à fait pareil que background de .box-content ...
En effet, un background appliqué au module rendra toute la place dévolue au module, y compris les contours et parfois même au-delà, si vos bordures de module possèdent un attribut margin...
Pour appliquer une image de fond uniquement dans la boîte intérieure du module, celle qui est appelée .box-content dans le cas général, il faut créer une sous-classe de l'identifiant #Nom_du_module, qui référera au .box-content du module :
#Calendrier .box-content{
margin: 37px 28px 37px 28px;
background-attachement:fixed;
background-image:
url(http://idata.over-blog.com/0/05/85/46/images-manga/chobit.jpg)
}
... donne le résultat que vous pouvez voir dans le calendrier à droite (enfin, jusqu'à ce que je change d'avis...)
Puis, on peut finasser en créant une autre sous-classe de, par exemple #Leftpart, qui, cette fois, va faire référence au titre du module désigné :
#LeftPart h2 {
margin:15px 0px 15px 0px;
font-size: 12px;
text-align:right;
background:transparent url(http:gnagnaTitre.jpg) no-repeat scroll top left;
}
ce qui modifie le titre du-dit module ( h2 étant ici le sélecteur "titre" qui s'applique au sélecteur #LeftPart) et vous permet d'y placer une image à côté du titre et de "caler" celui-ci en fonction de cette image, sans affecter les autres modules ...
Osannah, Osannah .
C'est Bonheur !
Non ?
C'est possible.
En effet, pour agir sur l'ensemble des modules, on utilise le mot-clé .box .
Et bien, il existe en fait un mot-clé par module:
Les deux modules de texte libre sont appelés par les mots-clé : #RightPart et #LeftPart, même si ceux-ci ne sont pas nécessairement à gauche ou à droite...
Le calendrier, on l'a vu, s'appelle #Calendrier .
Le module des catégories : #Categorie .
Le module où sont affichés les derniers commentaires : #CommentRecent .
Le module où sont affichés les derniers articles : #ArticleRecent .
Le module où sont affichés les articles des derniers mois : #Archive .
Le module de vos liens : #Lien .
Le module de vos albums : #Album .
Le module d'images aléatoires de chacun de vos albums : #aleaIm .
Le module de recherche par mot-clé (sur Google pour l'instant, mais limité à votre blog) : #Recherche .
Le module contenant " Créer votre blog gratuit " : #Concours .
Le module de W3C : #Syndication .
Le module de Présentation : #Presentation .
Le module pour s'inscrire à la Newsletter (Tiens, d'ailleurs, si vous n'avez rien à faire, là, tout de suite, inscrivez-vous à la mienne, comme ça, j'aurais peut-être un jour la possibilité de passer en Privilège et je pourrais trouver pleeeeins d'autres TIP's) : #Newsletter.
Bref, vous avez compris l'idée ... Ils sont au départ dans le CSS sous forme de déclaration:
#LeftPart {}
Pour les modifier un par un, il suffit de procéder comme pour le .box :
Par exemple, en tapant :
#LeftPart {
font-family: "Comic Sans MS",Times New Roman, Helvetica, Arial, sans-serif;
background:transparent url(http:// gnagna.jpg) repeat-x scroll top left;
}
... vous mettez un fond et une police spéciale à un de vos modules Texte Libre (il suffit de tester pour voir lequel...) Attention: background du module, ce n'est pas tout à fait pareil que background de .box-content ...
En effet, un background appliqué au module rendra toute la place dévolue au module, y compris les contours et parfois même au-delà, si vos bordures de module possèdent un attribut margin...
Pour appliquer une image de fond uniquement dans la boîte intérieure du module, celle qui est appelée .box-content dans le cas général, il faut créer une sous-classe de l'identifiant #Nom_du_module, qui référera au .box-content du module :
#Calendrier .box-content{
margin: 37px 28px 37px 28px;
background-attachement:fixed;
background-image:
url(http://idata.over-blog.com/0/05/85/46/images-manga/chobit.jpg)
}
... donne le résultat que vous pouvez voir dans le calendrier à droite (enfin, jusqu'à ce que je change d'avis...)
Puis, on peut finasser en créant une autre sous-classe de, par exemple #Leftpart, qui, cette fois, va faire référence au titre du module désigné :
#LeftPart h2 {
margin:15px 0px 15px 0px;
font-size: 12px;
text-align:right;
background:transparent url(http:gnagnaTitre.jpg) no-repeat scroll top left;
}
ce qui modifie le titre du-dit module ( h2 étant ici le sélecteur "titre" qui s'applique au sélecteur #LeftPart) et vous permet d'y placer une image à côté du titre et de "caler" celui-ci en fonction de cette image, sans affecter les autres modules ...
Osannah, Osannah .
C'est Bonheur !
Non ?
par Zoélie
publié dans :
TIP's
