Nouvelle gestion du css - V2

Publié le par Titia

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 !

Publié dans Aides diverses v2

Pour être informé des derniers articles, inscrivez vous :
Commenter cet article

Alain 13/01/2012 14:42


avec la patience qui me manque, mais grâce à toutes ces excellentes explications je vais bien finir par en faire quelque chose de mon blog ! Un grand merci pour toutes ces précieuses
informations.

cerisette 29/11/2008 15:13

voila ,j'ai fait une communauté gifs et fond de blogs qui traite de la déco des blogs mais cela me ferait plaisir de te compter parmi mes adhérents
bisous
cerisette

Titia 31/12/2008 10:59


Merci pour cette invitation.
Sauf que pour le moment, aucun de mes articles n'est à placer dans cette communauté... Donc pour le moment, je ne m'y inscris pas. Mais promis, si j'ai l'occasion, je n'y manquerai pas :)


cerisette 09/09/2008 16:09

je ne comprends pas trop quelle image jepg? peut on mettre en fond de blog et ou trouver pout changer les titresmerci bisouscerisette

Titia 12/09/2008 20:41


On peut mettre n'importe quelle image en fond de blog. Il suffit d'héberger une image sur le net (dans tes documents over-blog, par exemple) et de modifier le css comme il se doit.
Quant à "changer les titres", je ne comprends pas. Tu veux changer quoi au juste ?


cerisette 23/07/2008 20:14

ou pourrais je trouver des fonds de blogs a enregistrer directement dans mon ccscerisette

Titia 17/08/2008 11:01


Aucune idée ! Faut chercher sur google ! Attention à n'utiliser que des fonds libres de droit !


esther 30/04/2008 12:14

Ahhhhhhhhhhhhhhhhhh!!!!! Enfin !!!!!!!!!!!!!!!!!
J'ai enfin trouvé les réponses à presque toutes mes questions !!! Avec un blog comme le tien (tellement clair et bien illustré pour aider à la compréhension) je peux enfin partir à l'aventure dans le CSS; merci beaucoup

Titia 02/05/2008 23:01


Eh bien ! Joli cri du coeur ^^ ! Ravie de pouvoir t'aider. Et je pense qu'il n'y a rien de tel qu'un schéma ou un dessin pour mieux comprendre !
Et si tu as des questions précises, n'hésite pas à laisser un commentaire et je pourrais tenter d'y répondre :)