Comprendre le css de votre blog 1

La possibilité offerte par Blogger de manipuler les css des modèles fournit par la plateforme et les tiers met ses utilisateurs devant un dilemme car la majorité d’entre eux n'y connaissent rien en html, css, javascript et autres bizarreries informatiques qui font trembler d’effroi rien qu’à l’idée d’avoir à s’y mêler. L’auteur de cet article peut vous garantir que lui aussi n’y connait rien en ces choses, au sens formel du terme, car n’ayant suivi aucune formation et n’étant détenteur d’aucun diplôme dans les connaissances nécessaires au développement d’un site Internet ou d’un blog. Mais, la manipulation des modèles et des codes des widgets proposés ici et là lui ont permis de comprendre un tant soi peu à ne pas être complètement perdu dans la jungle des codes html et css (il lui reste le javascript).

J’aimerais donc ici aider mes congénères bloggeurs qui aimeraient comprendre ce trop plein d’écrits bizarres pourtant essentiels à la bonne présentation de leurs blogs. Nous avions déjà vu comment était structuré un modèle Blogger dans la série comprendre un modèle blogger.

Seulement, toutes les notions que nous avons apprises ne serviraient à rien sans la présence des codes css car, c’est dans ceux-ci que se trouvent les attributs nécessaires pour le positionnement, les couleurs de fond de chaque partie du blog ainsi ceux des liens et des textes, la taille des polices, la taille des bordures, etc. Il est donc essentiel d’être en mesure de comprendre ce qui est écrit dans le css de votre blog afin de ne pas avoir à maudire votre ordinateur, le créateur des modèles, de blogger et peut être aussi l’auteur de blogger au bout du doigt quand vous vous retrouvez bloquer devant un gros problème sur votre blog.

Pour commencer, il faut savoir que CSS est l’abréviation de cascade style sheet, appelé en français « feuille de style » et est le nom utilisé pour nommer la partie contenant les attributs pour le style (la mise en forme) de votre site ou blog.

Le css d’un modèle Blogger peut être divisé en trois parties :

1. Les informations générales sur les balises html : Polices et tailles des textes contenus dans la page, couleurs des liens, taille des titres (h1, h2, h3, h4, etc.)
2. La structure de la page (Page structure) : contenant les informations sur la largeur que doit occuper les éléments de la page, la largeur, la hauteur et la couleur de l’entête, de barres latérales (sidebars), du contenu ainsi que du pied de page, la taille de la police de textes contenus dans chacune des parties précitées et les autres informations nécessaires à une bonne présentation de ceux-ci, notamment l’espace qui les sépare.
3. Les classes communes (Custom classes) : contient les propriétés des éléments qui peuvent se retrouver dans plus d’une partie de votre blog.

Mais, il faut noter que dans la majorité des sections contenues dans chacune des parties sont morcelés et précédé chacune par une balise de commentaire indiquant de quelle partie il s’agit. Ces commentaires sont du genre :

/* Profile

------------------------------------------------ */

Contenu css

/* Comments

------------------------------------------------ */

Contenu css

Voici en 35 lignes un exemple simplifié de que vous trouverez pour un modèle 3 colonnes, avec un entête et une barre de menu.

/* ------------------------------

HTML Redefine Tags

------------------------------ */

body{font-family:Arial, Helvetica, sans-serif; fontsize:

12px; margin:20px; padding:0;}

input, form, textarea

h1, h2, h3, h4, h5, h6{margin:0; padding:0;}

h1{font-size:40px;}

h2{font-size:20px; color:#999999;}

h3{font-size:13px; border-bottom:solid 1px #DEDEDE;

padding:4px 0; margin-bottom:10px;}

a:link, a:visited{text-decoration: none; color:#0033CC;}

a:hover{text-decoration:none;}

/* ------------------------------

STRUCTURE DE LA PAGE

------------------------------ */

/* #wrapper has an absolute width (780 pixel) */

#wrapper{width:780px; margin:0 auto;}

#header{width:780px; margin:0 auto;}

#menubar{width:auto; display:block; height:28px;}

#menubar a{heigth:28px; line-height:28px; padding:0

8px; display:inline;}

#main{width:auto; display:block; padding:10px 0; border-color: #CBCBCB; }

#content{width:460px; margin-right:20px;

float:left; border-color: #CBCBCB; background-color: #ECEBEB;}

#sidebar_left{width:160px; margin-right:20px;

float:left; border-color: #CBCBCB;}

#sidebar_right{width:120px; float:left;border-color: #CBCBCB;}

div.spacer{clear:both; height:10px; display:block;}

#footer{width:auto; display:block; padding:10px 0;

font-size:11px; background-color: #456069; color: #FFFFFF;}

/* ------------------------------

CUSTOM CLASSES

------------------------------ */

/* Add here your custom classes ... */

Vous remarquerez qu’après le nom d’une partie, une parenthèse est ouverte et c’est dans celle-ci que se trouvent les attributs particuliers à la partie nommée. La petite légende suivante vous permettra de comprendre plus ou moins ce qui est écrit ci-haut :

1. Première partie

body : c’est le corps de votre page, l’ensemble de la page qui s’affiche sur le navigateur.

h1, h2, h3, h4 : Les différents niveaux des titres qui seront contenus dans votre blog.

Sur blogger, le titre du Blog est contenu dans la balise h1, les titres des articles et des widgets de la sidebar sont contenus dans des balises h2, et les autres titres dans les balises h3 et suivantes. Vous constaterez qu’il attribué une taille (font-size) différente à chacune des balises.

a:link, a:visited, a:hover : Contiennent les informations sur les caractéristiques de liens qui se trouveront sur la page, que ce soient le lien visité (a :visited) ou les liens au-dessus desquelles se trouve le curseur (a :hover).

2. Deuxième partie

Wrapper : Elle peut aussi être nommée « wrap », « page », « container » et c’est la partie qu’occupera tout le contenu de votre blog sur la page. Ainsi, si votre wrapper est 780pixels, tandis que la page s’affiche sur un écran de 1000 pixels, comprenez qu’il y aura des espaces vides à gauche comme à droite du contenu de votre blog.

header : c’est l’entête de votre blog. C’est là que se trouve le titre de votre blog ainsi que sa bannière. Leurs propriétés sont définies dans cette balise.

menubar : Cette existe seulement dans certains modèles. Elle contient les attributs de la barre de menu horizontale au cas où elle existe. Elle peut aussi être nommée « navigation », « nav », « nav-wrapper ».

main : contient la partie composé du bloc des messages et des barres latérales. Dans les modèles proposés par Blogger, cette partie est celle contenant les messages du blog. Elle est aussi nommée main-wrapper.

Content : C’est le bloc de message. Il ainsi nommé dans la majorité des modèles proposés par des tiers, mais dans les modèles proposés par blogger, il est une sous section de la balise « main » et est nommé « .post ».

Sidebar : C’est ainsi qu’est nommé la barre latérale d’un blog, celle dans laquelle on met les widgets et autres codes html proposés par des sites tiers. Dans un modèle contenant deux sidebars, l’une est nommée sidebar_right – barre latérale droite – et sidebar_left – barre latérame gauche -, mais la nomination peut varier d’un concepteur à un autre. On peut facilement les identifier.

footer : C’est le pied de page de votre blog.

Il y aussi les balises #comments pour les commentaires, ainsi que d’autres balises que vos recherches pourront découvrir.

Il faut noter que d’habitude, ces éléments sont disposés d’une manière « géographique », c'est-à-dire que le premier élément affiché sur la page est celui pour lequel on note en premier les propriétés css, suivi du second, du troisième et ainsi de suite.

3. Troisième partie

Elle contient des sous éléments, le genre lien contenu dans les widgets,

A la différence des éléments dont la nomination commence par un « # », la nomination des sous éléments commence par un « . »

Exemple éléments :

#comments

#sidebar

Exemple sous éléments :

.feed-links

.widget

Prochainement, nous verrons comment lire aisément les propriétés attribués à chaque élément, ce qui permettra non seulement de les comprendre mais aussi de pouvoir les modifier à souhait, ainsi vous n’allez pas mouru quand vos lirez ces foutu css (mouru n’est pas une faute, juste écrit en souvenir de shreck où on dit à l’âne « t’es pas mouru l’âne, t’es pas mouru).