Blogs blogger css suite

Suite de ce premier post sur la partie css de blogger, nous allons voir ici plusieurs fomulations pour décrire le style d'un objet et comment un style peut s'appliquer à un objet précis dans la page.

Dans cet exemple on va en profiter pour aborder une manipulation assez demandé: effacer les bordures des images.

cliquez sur l'image pour agrandir

En 1 nous avons comme définition du style: .post img, traduisons cette ligne pas trop barbare.

D'abord .post on a vu dans le premier article qu'un terme précédé d'un point signifiait une classe d'élément. ici la classe est post Cela signifi que tous les éléments ayant dans pour attribu class="post" se verront appliquer les tyles indiqués (margin-top: .. etc). dans notre cas l'indicateur de classe (.post) est suivi d'img séparé d'un espace. on est ici dans un cas particulier, .post img cible uniquement les balise [img .../] qui se trouvent dans un élément ayant pour classe post.

En résumé .post img définit des styles pour les images qui se trouveront dans les messages, changer cette définition de styles n'affectera les images qui se trouvent das header ou sidebar (par exemple).

Les Bordures
Vous aurez peut être déjà remarqué en fin de section avant l'accolade finale, la ligne:
border: 1px solid $borderColor;
}
Pour supprimer les bordures de vos images il suffit de mettre la valeur à:
border: none;
}
Je vais quand même vous détailler les éléments de style de la ligne
1px c'est évidemment l'épaisseur de la bordure,
solid déterminera l'aspect visuel de la bordure, ici un trait, mais vous pouvez essayer dashed ou dotted (voir ici les différent style de bordure possible en css, avec de très pédagogiques illustrations),
$borderColor c'est une variable qui détermine la couleur de la bordure (les variables sont initialisés en haut de code css). Si vous voulez modifier la couleur des bordures, cherchez la lignes
[Variable name="borderColor" description="Post Border Color" type="color"
default="#bbb" value="#bbbbbb"] (je vous rappelle que je remplace les signes inférieur à et supérieur à, par des crochets [ ] pour ne pas qu'ils soient interprétés) , puis modifiez le contenu de value. Il vous laisser le signe # (dièse) puis vous pouvez jouer avec des lettres (de a à f) ou des chiffres (de 0à9), les 2 premiers caractères conditionnent le Rouge, puis les 2 autres le vert et enfin le bleu. Parmis les lettres le F est la valeur la plus forte (6f #ffffff = blanc).
ATTENTION !! pour être sûr que la suppression soit efficace, regardez dans votre code css si il n'existe pas de ligne, a img {...} ou span img {...} etc... si vous en trouvez, mettez border à none également dans ces sections.


Revenons à la description de nos styles css:
En 2 nous trouvons img tout court, c'est à dire que les styles suivant s'appliquent à toutes les balises img sauf celle stylées individuellement. de ce que nous avons déjà vu, le style ne s'appliquerai pas aux images situées dans un post par exemple.

En 3 je vous ai mis un exemple de définition que vous pouvez rencontrer:
img.blogger, #blogspot En 1 nous avons vu qu'il était possible de définir un style css pour une image contenue dans un élément de classe post. La différence ici est que la classe .blogger n'affecte que les images ayant cet attribu, [img src="mon_image.png" class="blogger" /] pour aller au bout des exemples j'ai rajouté un élément unique ayant pour id #blogspot on peut ainsi quand une valeur affecte plusieurs éléments les regrouper en une seule section u lieu d'en recréer une pour chaque classe. vous pouvvez rencontre des notations comme: img.blogger, img.google, img.jenaimarre, #blogspot {...}. Dans le cas de #blogspot inutile de répéter img puisque comme vous l'avez appris dans le post précédent (css blogger) le dièse est un identifiant unique (un seul élément peut se le voir attribuer) .

@ bientôt.