Nouvelle gestion du css - V2

Le css en V2 d'over-blog a quelque peu évolué... Ci-dessous, les explications. Pensez à cliquer sur les images pour qu'elles s'aggrandissent.


Tout d'abord, comment accéder au css ?

Dans l'administration, cliquez sur "Design"
Puis allez sur "Paramètres avancés", à droite.
Vous accédez à votre css.

Vous constatez qu'il y a deux onglets : "Original" et "Mon style". Dans Original, par défaut, vous avez ça :

body {}
a {}
#top {}
#footer {}
.box-titre {}
.beforeArticle {}
.article {}
.date {}
.titreArticle {}
.box-content {}
.box {}
.commentMessage {}
.commentOption {}
.extraitArticle {}
.dateExtrait {}
.extrait {}
.plusExtrait {}

Rapidement, voici la signification des classes... j'y reviendrai... Je fais cet article rapidement pour que les gens puissent avoir des premières explications...

• body {} : le contenu complet du blog
• a {} : les liens
• #top {} : l'entête
• #footer {} : lepied de page
• .box-titre {} : le titre des modules
• .beforeArticle {} : tout le bloc avant chaque article
• .article {} : l'article
• .date {} : la date des articles
• .titreArticle {} : le titre des articles
• .box-content {} : le contenu des modules
• .box {} : les modules complets
• .commentMessage {} : les commentaires
• .commentOption {} : les infos sous les commentaires
• .extraitArticle {} : les extraits d'article (premium)
• .dateExtrait {} : la date des articles, lors de l'affichage en extrait (premium)
• .extrait {} : toujours lié aux extraits (premium)
• .plusExtrait {} : toujours lié aux extraits (premium)

Evidemment, il y a beaucoup plus de classes que cela utilisées dans les blogs. On a ici les plus couramment utilisées. Ainsi, un novice pourra facilement s'y retrouver... dans 17 lignes.
Ainsi, si vous voulez juste changer le fond du blog, vous recopiez la ligne body {} dans l'onglet "Mon style" et y mettez un fond.

Sauf qu'ainsi, nous n'avons pas la liste complète des classes. Pour une modification simple du design, cela suffit. Et c'est même bien plus pratique qu'une looooongue liste.

Mais... cela ne suffira pas aux bloggeurs un peu plus expérimentés... Voici la solution !
Lorsque vous êtes sur le css, cliquez sur le bouton "Spécialiste du CSS ? Définissez les héritages de votre blog…", en bas de page. La fenêtre suivante s'ouvre :

Les libellés risquent de changer alors parlons avec les numéros. Ca sera plus simple. Il y a 4 cases à cocher. Par défaut, elles sont toutes cochées, ce qui signifient que ces "parties du css" sont gérées automatiquement. Si vous les décochez, le css en question est recopié dans l'onglet "Original" afin que vous puissiez accéder à la liste des classes concernées... et, par un copier-coller dans l'onglet "Mon style", les modifier à votre guise. Voici la signification, un peu rapide, pour le moment... mais j'améliorerais cet article quand j'aurais un peu plus de temps.

• 1 - Ici, vous trouvez les différentes classes utilisées dans le blog, avec l'indication des largeurs, des marges, la taille des textes... C'est un css assez général. Ne décochez cette case que si vous êtes à l'aise avec le css ! (Css général du thème graphique choisi)
• 2 - Ici, vous trouvez les différentes classes utilisées dans le blog avec l'indication des couleurs du texte... et peut-être du fond aussi... En gros, cette partie vous permet de changer facilement toutes les couleurs du blog. En fait, un même modèle de design est parfois défini avec plusieurs teintes. C'est ce que l'on appelle les variations. Donc voilà. En décochant cette case, vous accédez au css de votre variation. (Css lié aux couleurs du modèle graphique : les variations d'un même modèle suivant diverses teintes - ex : curaçao, menthe, fraise, etc. )
• 3 - Les classes liées à la structure du blog : en gros, c'est là que vous déterminez la taille des colonnes, la largeur du blog. (Css lié à la structure du blog : nombre de colonnes, position des colonnes, etc.)
• 4 - Oubliez cette case... pour le moment, elle ne sert à rien ^^ ! Elle servira en fait dans un cas bien précis, pour un modèle de design... qui n'est pas encore disponible ^^ !

Voilà. Ainsi, en fonction de vos besoins, et de vos aptitudes en css, décochez les cases au fur et à mesure pour voir apparaître petit à petit de plus en plus d'informations dans l'onglet "Original" du css. De nouvelles classes css apparaissant, vous pouvez alors les recopier dans la partie "Mon style" pour les adapter à vos envies. Mais par défaut, tout est géré automatiquement, vous facilitant ainsi la manipulation.

Promis, je modifierai cet article quand j'aurais un peu plus de temps. D'ici là, n'hésitez pas à poser des questions et à m'apporter toutes vos remarques !