LE TUTOBLOG BETA VERSION

Le but de ce tuto est de présenter de façon simple, rapide et compréhensible la feuille css de votre blog MaBulle.
Je prendrai comme exemple la céation de ce blog (il est fait pour ça).

Tout d'abord où trouver le mode webmaster (ai-je besoin de le préciser)?
Tout simplement dans l'onglet outils :
-----------------------------------


1-Choix du modèle :

La première étape est d'abandonner votre thème prédéfini et d'opter pour un des 2 modèles personnalisables.
Ici j'ai choisi le menu à gauche (il faut cliquer dessus pour le choisir):
-----------------------------------


Vous pouvez valider sans crainte si c'est la première fois que vous utilisez la personnalisation :
-----------------------------------


Votre blog devrait ressemblez à ça maintenant :
-----------------------------------


2-Forme du menu :
Ensuite choisissez les modules de votre menu (ça changera peut-être dans la nouvelle version de MaBulle). Pour le tutoblog j'ai décidé de laisser les rubriques (pour pouvoir quitter la page d'accueil ;-)), les derniers articles, les derniers commentaires, les liens (je mettrai des liens vers des sites proposant des astuces et tutoriels), et les liens de syndication (flux rss pour être au courant des derniers articles) :
-----------------------------------


3-La feuille CSS dite "Da Webmaster Code":

/* Structure générale du thème (agencement des blocs etc.)
-------------------------------------------------------- */
html, body{margin:0;padding:0;text-align:center;}
img{border:0;}
#page{width:780px;margin:1em auto;text-align:left;}
#haut{margin:0;}
#haut h1{margin:0;}
#contenant{float:right;width:520px;}
#contenu{margin:0 30px 0 0;padding:1em 0 0 0;}
.post{margin-bottom:4em;}
#menu{float:left;width:240px;padding-bottom:4em;}
#menu div{margin:0 0 0 20px;padding:1ex 1em;}
#bas{padding:1ex 1em 1ex 1em;margin:0;clear:both;}

/* Principaux éléments HTML du thème
-------------------------------------------------------- */
body{color:#000000;font-size:75%;line-height:1.5em;
font-family:Verdana, Arial, Helvetica, sans-serif;}
h1,h2,h3,h4,h5,h6{font-family:"Trebuchet MS", sans-serif;}
h1{font-size:1.8em;}
h2{font-size:1.4em;}
h3{font-size:1.3em;}
h4{font-size:1.2em;}
h5{font-size:1.1em;}
h6{font-size:1em;}
pre,code{font-size:1.2em;}
pre{width:100%;overflow:auto;border:1px solid #cccccc;}
fieldset{border:none;text-align:center;}
label{cursor:pointer;}
.champs label{display:block;}
input,textarea{border:1px solid #A295E0;}
input.submit{background:#BD59D3;color:#ffffff;}
textarea{width:100%;font-size:1em;
font-family:Verdana, Arial, Helvetica, sans-serif;}
a{color:#6E59D3;text-decoration:none;}
a:visited{color:#6E59D3;}
a:hover{color:#BD59D3;text-decoration:none;}

/* Gestion de l'arrière-plan (images, couleurs etc.)
-------------------------------------------------------- */
body{
background:transparent ;}
#page{
background:#F7F8FA ;}
#haut{
background:#A295E0 url(/images/www.mabulle.com/top.png) repeat-x 0px 0px;}
#contenant{
background:transparent ;}
#contenu{
background:transparent ;}
#contenu h2{
background:transparent url(/images/www.mabulle.com/titre.png) repeat-x 0px 0px;}
#menu{
background:#D9D5F2 ;}
.date-article{
background:transparent;}
.titre-article{}
.titre-article a{}
.info-article{
background:transparent;}
.info-article a{
background:transparent;}
#retrolien blockquote, #commentaires blockquote{
background:#ffffff ;}
#menu div#recherche{
background:transparent;}
#q{
background:transparent url(/images/www.mabulle.com/q.png) no-repeat 4px 4px;}
#menu div#calendrier table th{
background:transparent;}
#menu div#calendrier table td a{
background:#fff;}
#menu div#calendrier table td a:hover{
background:#DBB8DC;}
#bas{
background:#fff ;}
#bloc-a{}
#bloc-b{}
#bloc-c{}
#bloc-d{}
#bloc-e{}

/* Détail des blocs: La page
-------------------------------------------------------- */
#page{color:inherit;border:1px solid #A295E0;}

/* Détail des blocs: L'entête
-------------------------------------------------------- */
#haut{height:120px;}
#haut h1{height:80px;line-height:80px;margin:0 0 0 40px;
padding-top:20px;color:#F7F8FA;}
#haut h1 a{text-decoration:none;color:#F7F8FA;}
#description{
position:relative;
top:1px;
left:300px;
color:#000000;}

/* Détail des blocs: Le contenu
-------------------------------------------------------- */
.date-article{padding-left:20px;margin-left:-15px;color:#888;
font-style:italic;}
.titre-article{color:#6E59D3;margin-bottom:5px;padding-left:15px;}
.titre-article a{color:#6E59D3;text-decoration:none;}
#contenu h2{line-height:25px;}
.info-article{font-size:95%;margin-top:0;color:#6E59D3;padding-bottom:1ex;
text-align:right;line-height:15px;}
.info-article a{font-size:95%;color:#6E59D3;text-decoration:none;}
.contenu-article{text-align:justify;}
.contenu-article blockquote{font-family:Georgia, "Times New Roman", Times, serif;font-style:italic;}
#retrolien blockquote, #commentaires blockquote{
border:1px dashed #A295E0;margin:1em 0;padding:1ex 1em;}
#commentaires blockquote p:first-letter{color:#6E59D3;
text-transform:uppercase;font-weight:bold;}

/* Détail des blocs: Le menu
-------------------------------------------------------- */
#menu div{color:inherit;}
#menu div ul{margin:0;padding:0;list-style:none;}
#menu h2, #menu h3{color:#BD59D3;margin:0 0 1ex 0;}
#menu h3{font-size:1em;margin:0;}
#menu div#recherche{color:inherit;line-height:2.3em;}
#recherche fieldset, #recherche p{margin:0;padding:0;}
#q{padding-left:18px;}
#menu div#calendrier{}
#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{color:#BD59D3;}
#menu div#calendrier table td{width:14%;line-height:2em;
border:1px solid #EEE;}
#menu div#calendrier table td a{display:block;color:#BD59D3;
font-weight:bold;text-decoration:none;}
#menu div#calendrier table td a:hover{color:#636;}
#menu div#rubriques{}
#menu div#liens{}
#menu div#derniers-articles{}
#menu div#derniers-commentaires{}
#menu div#archives{}
#menu div#syndication{}
#menu div#standards{}

/* Détail des blocs: Le pied de page
-------------------------------------------------------- */
#bas{margin:0;border-top:1px solid #CCC;color:#999;text-align:center;}
#bas a{color:#999;text-decoration:none;}
#bas a:hover{color:#666;}
#bas ul{margin:1px;padding:1px;}
#bas ul li{display:inline;}


C'est plutôt indigeste non?
Regardons d'un peu plus près.

4-La structure générale :

/* Structure générale du thème (agencement des blocs etc.)
-------------------------------------------------------- */
html, body{margin:0;padding:0;text-align:center;}
//"body"= le corps de blog (il contient tous les éléments, en particulier la "page"); "margin"= marge extérieure; "padding"= marge intérieure; "text-align:center"= tout ce qui est dans "body" (donc la page) sera centré.
img{border:0;}
#page{width:780px;margin:1em auto;text-align:left;}
//défini les dimensions de la page (c'est à dire le rectangle principal). "width"= largeur, je l'ai mise à 800; "1em"= hauteur du "M" de la police par défaut.
#haut{margin:0;}
#haut h1{margin:0;}
#contenant{float:right;width:520px;}
#contenu{margin:0 30px 0 0;padding:1em 0 0 0;}
.post{margin-bottom:4em;}
#menu{float:left;width:240px;padding-bottom:4em;}
#menu div{margin:0 0 0 20px;padding:1ex 1em;}
#bas{padding:1ex 1em 1ex 1em;margin:0;clear:both;}

la suite plus tard