Tuto en cours d'écriture, je continuerai demain, il est temps de penser à dormir ...
Allez, je me lance dans la longue explication des principales modifications que l'on peut faire dans le CSS, plus communément appelé ici Da Webmaster Code pour faire de son blog ce que l'on veut...
D'abord, pour accéder à sa feuille CSS il faut aller dans le menu Présentation> Personnaliser le thème> Da Webmaster code.
Je vais mettre en noir ce qui est déjà dans le code du thème 1 à l'origine, en
bleu
les lignes que l'on peut rajouter et en
orange
l'explication de l'effet que l'on peut obtenir en modifiant une ligne de code et en
gras
les morceaux de code que j'utilise dans mes phrases.
Il ne faut jamais oublier le point-virgule à la fin de la ligne, même si en principe la dernière ligne avant le crochet on en a pas besoin. Ca vous empêche de prendre de mauvaises habitudes qui vous créerait des prises de têtes si vous l'oubliez, et quand on rajoute une ligne, on ne se demande pas forcément si à la ligne d'avant il y a bien le point-virgule...
J'espère que je vais être assez claire ...
il faut voir votre blog comme une sorte grande boîte pleine de boîtes plus petites, qui elles-mêmes peuvent contenir d'autres boîtes et ainsi de suite. On appelle ces boîtes des blocs. Ainsi, le bloc page contient le bloc entête, le bloc contenant, le bloc menu et le bloc pied de page. Dans le bloc menu il y a le bloc calendrier, le bloc liens, le bloc rubriques ....
Vous vous êtes peut-être demandés pourquoi devant le sélecteur (ce qui se trouve avant le crochet{ et qui sert à dire quelle partie du blog on veut modifier) il y a soit un .point soit un #dièse. En fait on met un dièse quand on sélectionne un bloc qui n'existe qu'une seule fois : le bloc menu par exemple, et un point lorsqu'on sélectionne un bloc qui existe en plusieurs exemplaires : les articles par exemple. Ceci n'est pas forcément vrai ailleurs que sur Mabulle, si le webmaster est assez peu scrupuleux, mais Vincent fait bien les choses
/* Style du blog
-------------------------------------------------------- */
html,body{
margin:0;
padding:0;
text-align:center;
background-image : url(http://url.com/votre_image.png);
Avec cette ligne vous pouvez mettre une image de fond, mais méfiez vous des url qui contiennent des ? et des =, la plupart du temps elle ne marchent pas pour tout le monde. Pour obtenir l'url d'une image de votre médiathèque, il suffit de faire un clic gauche dessus pour que la bonne url s'affiche dans le cadre en dessous de la liste de vos images.
background-position: top center;
Modifie la position de l'image. Si vous n'ajoutez pas cette ligne, l'image se met en haut à gauche. Vous pouvez soit mettre une combinaison de
top
(haut)
bottom
(bas)
left
(gauche)
right
(droite)
center
(centré) soit indiquer deux valeurs en pixels ou en pourcentage, par exemple
100px 20px
mettra l'image à 100 pixels du bord gauche du blog et à 20 pixels du bord haut. Il faut mettre les deux valeurs, quitte à mettre un zéro à la place de l'une ou l'autre des valeurs, sinon cette ligne ne fera rien.
background-repeat : no-repeat;
définit comment se répète l'image de fond. Si on ne le précise pas, elle se répète sur toute la hauteur et la largeur du blog. On peut y mettre
repeat
, qui donne l'effet que je vient de décrire si par hasard ça ne le fait pas tout suel comme pévu,
no-repeat
, qui empêche l'image de se répéter,
repeat-x
, qui la fait se répéter sur la largeur et
repeat-y
qui la fait se répéter sur la hauteur
background-attachment: fixed;
Cette ligne détermine la façon deont se comporte l'image de fond lorsqu'on se déplace dans le blog. Si on ne précise pas cette ligne, l'image de fond se déplacera en même temps que le reste du blog. Si on veut préciser cet effet c'est
scroll
qu'il faut mettre.
fixed
fera que l'image de fond ne bougera pas lorsqu'on se déplace dans le blog, comme si le contenu du blog "flottait" par dessus, au lieu d'être collé dessus
.
background-color: #FFFFFF;
Définit la couleur de fond; si vous utilisez le thème 1, il vaut mieux la changer dans le menu des couleurs du blog, sinon ça fait double emploi.
#FFFFFF
c'est du blanc, et pour avoir le code de toutes les autres couleurs, Vincent a mis à notre disposition le Gestionnaire des couleurs qui se trouve dans Présentation>Personnaliser le thème> Modifier les couleurs.( Attention à ne pas oublier le # ) Vous pouvez aussi mettre
transparent
mais au fond du blog comme il n'y a rien derrière ça n'a pas vraiment de sens ^^
Toutes ces lignes à propos du fond sont aussi utilisables où vous voulez : fond de la page, fond de l'en-tête, fond des articles, fond du menu ... Partout où vous voulez une image et/ou une couleur de fond 
}
body{
font-size:80%;
line-height:1.3em;
border-top-style:solid;
Cette ligne définit l'aspect de la bande qui se trouve juste au-dessus du bandeau de pub et qui empêche cette dernière d'être complètement collée en haut. On change sa couleur dans la case "bord du blog" dans le menu des couleurs du blog.
border-top-width:10px;
Cette ligne en définit l'épaisseur
}
h1{font-size:1.8em;}
Change la taille du titre du blog
h2{font-size:1.4em;}
Change la taille du titre des articles
h3{font-size:1.3em;}
h4{font-size:1.2em;}
h5{font-size:1.1em;}
h6{font-size:1em;}
Je n'ai pas grand chose à dire à propos de la fin du style du blog, alors plutôt que de laisser un gros blanc, je le coupe.
/* Style de la page
-------------------------------------------------------- */
#page{
La page, c'est le grand bloc qui inclut l'entête, les articles, le menu et le pied de page.
color:inherit;
width:780px;
C'est ici qu'on en modifie la largeur.
margin:0 auto;
text-align:left;
}
/* Style de l'entête (haut)
Il y a un entête même dans le thème 1, même s'il n'est pas visible si on ne le modifie pas.
-------------------------------------------------------- */
#haut{
margin:0;
height:120px;
Ceci modifie la hauteur de l'entête. Utile si on met y met une image de fond, à mettre dans une nouvelle ligne entre les crochets.
text-align:right;
}
#haut h1{
height:80px;
line-height:80px;
margin:0 80px 0 0;
Modifier le 80px modifie la distance entre le bord droit de la page et le titre du blog.
padding-top:20px;
Modifie la distance entre le bord du haut de la page et le titre du blog.
color:#faa302;
Modifie la couleur du titre du blog.
}
#haut h1 a{
text-decoration:none;
}
#prelude{
position:absolute;
width:780px;
top:7px;
left:50%;
margin:0 0 0 -390px;
padding:0 1ex;
background:transparent;
text-align:center;
}
#prelude a{
background:transparent;
}
#prelude a:hover{
background:transparent;
}
/* Style du contenant
-------------------------------------------------------- */
#contenant{
C'est le grand bloc qui contient tous les articles.
float:left;
width:520px;
Modifie la largeur de la colonne des articles. Attention, si cette colonne et le menu ne rentrent pas tous les deux dans la page en largeur, le menu se verra relégué tout en bas du blog.
margin-top:150px;
Modifie la distance qui sépare le bas de l'entête du haut du premier article.
}
/* Style du contenu
-------------------------------------------------------- */
#contenu{
margin:0 0 0 30px;
30 px détermine la distance entre le bord gauche du contenant et le bord gauche du contenu
padding:1em 0 0 0;
1em détermine la distance entre le bord haut du contenu et le bord haut du premier article
}
/* Contenu: style des articles
-------------------------------------------------------- */
.post{
On peut rajouter cet élément si on veut mettre un fond aux articles, leur mettre une bordure....
border: 1px dashed #000000;
Cette ligne sert à rajouter une bordure. Dans l'ordre on indique son épaisseur, son style (
solid
pour un trait continu,
dotted
pour des points,
dashed
pour des tirets,
double
pour une bordure double qui doit faire au moins 3px d'épaisseur,
none
s'il y a déjà une bordure et qu'on veut l'enlever) et sa couleur.
margin-top: 20px;
margin
sert à mettre de l'espace entre un bloc (ici l'article) et les autres blocs qui l'entourent (par exemple le bord du bloc "contenu", les autres articles ...) si on ne précise pas, il met la même distance en haut en bas, à gauche et à droite du bloc, mais là j'ai précisé
-top
, ce qui fait que ça ne va affecter que le haut du bloc. Il ya
top
,
bottom
,
left
et
right
.
padding: 26px;
Padding, en anglais, c'est du rembourrage Donc, lorsqu'on met
padding
, on met de l'espace entre le bord du bloc et ce qu'il contient. Ici, il sert à ce que le texte qui se trouve dans l'article ne soit pas tout collé à la bordure que j'ai créée deux lignes plus haut. Comme pour margin, on peut lui mettre un tiret suivi de
top
,
bottom
,
left
ou
right
suivant ce que l'on veut modifier.
}
.post-chapo{
margin-bottom:2em;
}
.post-date{
font-size:1em;
font-weight:bold;
margin-top:2em;
text-align:right;
background:transparent;
}
.post-titre{
margin:1.5em 0 0 0;
}
.post-titre a{
Ici on modifie le titre des articles. Comme le titre des articles est un lien sur lequel on peut cliquer, on ajoute
a
qui précise ce que l'on veut modifier dans le bloc du titre :
a
, ce sont les liens. Si on essayait de mettre en forme le texte dans l'élément juste au dessus qui ne précise pas le
a
on ne verrait pas le changement car il sert à changer du texte simple alors qu'il n'y a que des liens.
text-decoration:none;
Détermine si le texte est souligné (
underline
) si il a un ligne au dessus de lui (
overline
), s'il est barré (
line-through
) s'il clignote (
blink
) ou s'il n'a rien de tout cela (
none
)
font-weight: bold;
Détermine si le texte est gras (
bold
) ou non (
normal
)
color: #0000FF;
Lorsqu'il n'est pas précisé ce qu'il colore,
color
détermine la couleur du texte
font-style: italic;
Met le texte en italique (
italic
) ou pas (
normal
)
font-variant: small-caps;
Transforme les minuscules en petites majuscules (
small-caps
) ou pas (
normal
)
Toutes ces lignes à propos du textes sont aussi valables où vous voulez
.post-info,.post-com{
font-size:0.85em;
}
.post-info{
margin:0;
}
.post-com{
clear:both;
margin-top:0;
}
.form-aide{
font-size:0.85em;
text-align:center;
}
/* Contenu: style des commentaires et rétroliens
-------------------------------------------------------- */
#coms,#retroliens{
margin:0.2em;
}
#coms blockquote,#retroliens blockquote,#preview blockquote{
display:block;
margin:0;
padding:1px 1em;
font-style:normal;
background:transparent;
}
.com-info{
margin-bottom:0;
font-size:0.85em;
}
/* Style du menu
-------------------------------------------------------- */
#menu{
float:right;
width:240px;
padding-bottom:4em;
}
#menu a{
font-size:1em;
text-decoration:none;
}
#menu div{
margin:0 30px 0 0;
padding:1ex 1em;
}
#menu div{
color:inherit;
}
#menu div ul{
margin:0;
padding:0;
list-style:none;
}
#menu h2,#menu h3{
margin:0 0 1ex 0;
}
#menu h2{
font-size:1.2em;
}
#menu h3{
font-size:1em;
margin:0;
}
/* Menu: style des blocs
-------------------------------------------------------- */
#menu div#calendrier table{
font-size:0.8em;
text-align:center;
margin:0 auto;
border-collapse:collapse;
}
#menu div#calendrier table caption{
margin:0 auto;
}
#menu div#calendrier table th{
background:transparent;
}
#menu div#calendrier table td{
width:14%;
line-height:2em;
}
#menu div#calendrier table td a{
display:block;
font-weight:bold;
text-decoration:none;
}
/* Style du pied de page (bas)
-------------------------------------------------------- */
#bas{
padding:1ex 1em 1ex 1em;
margin:0;
clear:both;
text-align:center;
}
#bas ul{
clear:both;
margin:5px;
padding:0;
}
#bas li{
display:inline;
list-style-type:none;
}
FANTASMATIQUE !!! 
la faute d'horto. j'avais même pas fais attention ! 
