Elements CSS d'over-blog (Partie 2)

Vendredi 18 février 2005

Introduction

Dans l'article précedant, je vous ai présenté tous les sélecteur CSS basés sur les identifiants des éléments de votre blog.

Aujourd'hui, nous allons énumérer les sélecteurs de classe prédéfinis. Ces sélecteurs commencent tous par un point.

Les selecteurs CSS basés sur des noms de classe

Pour les modules :

Classe CSS	Description	Classe parente
.box	Le module lui-même	Aucune
.box-top	Cadre définissant la bordure supérieure centrale	.box
.box-right	Cadre définissant la bordure droite centrale	.box-top
.box-bottom	Cadre définissant la bordure inférieure centrale	.box-right
.box-left	Cadre définissant la bordure gauche centrale	.box-bottom
.box-topLeft	Cadre définissant le coin supérieur gauche	.box-left
.box-topRight	Cadre définissant le coin supérieur droit	.box-topLeft
.box-bottomLeft	Cadre définissant le coin inférieur gauche	.box-topRight
.box-bottomRight	Cadre définissant le coin inférieur droit	.box-bottomLeft
.box-content	Cadre définissant le contenu du module (Titre + contenu)	.box-bottomRight

Attention ! Il ne suffit pas de définir une couleur dans la classe .box-content pour que celle-ci s'applique à tout le contenu.
Vous devrez l'étendre par le type de contenu adéquat :

Classe CSS étendue	Description
.box h2	Pour définir le style du titre du module (on aurait pu l'écrire .box-content h2 )
.box-content p	Pour définir le style d'un paragraphe standard dans le module
.box-content ul	Pour définir le style des élémentes présentés sous forme de liste (utilisé notamment pour les marges)
.box-content li	Pour définir le style des éléments d'une liste (chaque item de la liste)
.box-content a	Pour définir le style des liens présents dans le module
.box-content form	Pour les formulaires (modules Recherche et Newsletter)

Pour les éléments de la page de résultats de la recherche:

Classe CSS	Description
.Result1	Titre des résultats de la recherche (lignes paires)
.Result2	Titre des résultats de la recherche (lignes impaires)
.RNum	Numéro de résultat trouvé lors de la recherche
a.RTitle	Titre de l'article trouvé lors de la recherche
.RDesc	Résumé de l'article trouvé lors de la recherche
.ROut	Adresse du blog dans les résultats de la recherche

Pour les éléments de la page de choix d'option lors de l'inscription à la newsletter :

Classe CSS	Description
.newsletter li	Chacune des lignes du formulaire d'inscription à la newsletter (page après avoir validé son e-mail). Vos personnalisations ne seront pas prises en compte car la page utilise un CSS par défaut.
.newsletter label	Libellé de chacune des lignes du formulaire d'inscription à la newsletter. Vos personnalisations ne seront pas prises en compte car la page utilise un CSS par défaut.

Pour le calendrier simple:

Classe CSS	Description
.calendarTop1	Mois et année
.calendarToday1	Case de la date du jour sélectionné
.calendarDays1	Cases des autres jour et de la navigation
.calendarHeader1	Les noms des jours (L, M, M, J, V, S, D)
.calendarTable1	Fond du calendrier (si vous définissez une couleur de fond pour les éléments ci-dessus, le couleur de fond de .calendarTable1 servira de couleur de bordure du calendrier).

Pour le calendrier avancé :

Classe CSS	Description
.calendar	Le calendrier !!
.calendar .button	Les boutons Aujourd'hui et ?
.calendar .nav	Les boutons de navigation
.calendar thead .title	Le titre du calendrier (mois année)
.calendar thead .daynames	La ligne contenant le nom des jours (Dim, Lun, Mar, Mer, Jeu, Ven, Sam)
.calendar thead .name	La case contenant le nom d'un jour (par exemple Lun)
.calendar thead .weekend	Les cases Dim et Sam (week-end)
.calendar thead .hilite	Les boutons et noms du jour lorsqu'ils sont survolés par la souris
.calendar thead .active	Les boutons et noms du jour lorqu'ils sont pressés par la souris
.calendar tbody .day	Les cases des jours (hors le jour actif)
.calendar tbody .day.othermonth	???
.calendar tbody .day.othermonth.oweekend	???
.calendar table .wn	???
.calendar tbody .rowhilite td	La ligne survolée par la souris
.calendar tbody .rowhilite td.wn	???
.calendar tbody td.hilite	Jour survolé par la souris
.calendar tbody td.active	Jour lorsque la souris est pressée
.calendar tbody td.selected	Jour sélectionné
.calendar tbody td.weekend	Jours de week-end
.calendar tbody td.today	Date du jour
.calendar tbody .disabled	???
.calendar tbody .emptycell	Les cases des jours non présentes (cases vides)
.calendar tbody .emptyrow	La ligne qui peut être complètement vide lorsque le mois nécessite moins de 6 lignes (par exemple Février 2005)
.calendar tfoot .footrow	La ligne de pied de page du calendrier
.calendar tfoot .ttip	La case d'informations (
.calendar tfoot .hilite	Les boutons du pied de page lorqu'ils sont survolés
.calendar tfoot .active	Les boutons du pied de page lorqu'ils sont pressés
.calendar .combo	Les menus déroulants
.calendar .combo .label, .calendar .combo .label-IEfix	Le contenu des menus déroulants
.calendar .combo .hilite	L'élément de menu déroulant sous la souris
.calendar .combo .active	L'élément de menu déroulant actuellement sélectionné
.calendar td.time	L'heure
.calendar td.time .hour, .calendar td.time .minute, .calendar td.time .ampm	L'heure
.calendar td.time .ampm	L'indicateur AM / PM de l'heure
.calendar td.time .colon	Le séparateur de l'heure (:)
.calendar td.time span.hilite	L'heure lorsque la souris passe au dessus
.calendar td.time span.active	L'heure sélectionnée

Autres classes :

Classe CSS	Description
.resumeArticle	Texte du résumé de chaque article sur les pages Liste complète
.alignL	Alignement à gauche
.alignC	Alignement centré
.alignR	Alignement à droite
.floatL	Empilage à gauche
.floatR	Empilage à droite
.clear	Nettoyage de l'empilage

Voilà, avec ça je crois qu'on a fait le tour, je ne traiterai pas des selecteurs de balises HTML. A savoir tout ce qui ne commence ni par un point ni par un #.
La liste est désormais presque complètement exhaustive.
Bon CSS !!!

par Francisek publié dans : CSS et Design
recommander

Commentaires

Merci beaucoup pour ton aide qui est vraiment complète :)

commentaire n° : 1 posté par : Sissi le: 19/02/2005 02:04:19

Si t'existait pas, il faudrait t'inventer...

commentaire n° : 2 posté par : javafred (site web) le: 19/02/2005 12:16:57

Ouah, merci, c'est très clair!

commentaire n° : 3 posté par : Gabrielle (site web) le: 20/02/2005 22:17:31

comment ça genie pour lui même ?? pour moi aussi t'es un génie ... ;o) *beep*
*beep* Titemag

commentaire n° : 4 posté par : titemag (site web) le: 23/02/2005 16:01:09

ouf .. ton blog est à nouveau en "visite libre" lol !! Vais pouvoir tenter de comprendre pleins de choses ...
*beep*

commentaire n° : 5 posté par : titemag (site web) le: 24/02/2005 09:43:43

Bonjour Francisek,
je passe par ici car j'arrive du nouveau blog d'aide...il me semble avoir vu que tu pourrais aider si je suis patiente...je n'y connais rien en css et il y a quelques changements que j'aimerais faire peux-tu me joindre? merci beaucoup à l'avance, je ne suis pas pressée... je te laisse mon mail
Merci La lionne

commentaire n° : 6 posté par : Lionne du Nord (site web) le: 08/03/2005 00:29:13

Lionne >>> quand tu veux, je t'envoie mon MSN.

commentaire n° : 7 posté par : Francisek le: 08/03/2005 01:30:08

Salut...
j'ai bien mis mon fond d'ecran comme je voulais, cependant comme les fond des modules sont transparant je pert en lisibilité :/ comment doit je faire pour avoir un fond blan opaque dans chaqun de mes modules ?
merci par avance

commentaire n° : 8 posté par : Webis (site web) le: 01/04/2005 20:27:05

c'est super ton aide (comme d hab' !! ^^)
mais tu pourrais me dire comment on rend plus grand le cadre qui contient le titre des modules???stp

commentaire n° : 9 posté par : nana (site web) le: 02/05/2005 12:37:33

comment faire pour changer la couleur de Nom, email, sîte etc... dans la petite fenêtre qui s'ouvre lorsque l'on veut laisser un commentaire. (chez toi c'est en jaune par exemple). tu n'en parles pas dans ta liste !! snif !!

commentaire n° : 10 posté par : legnoch (site web) le: 04/05/2005 19:10:51

J'ai trouvé !! ^_^ !! Pardon pour le dérangement. Il fallait ajouter la ligne
#formComment p {color:Code couleur voulue;}
Joie !!

commentaire n° : 11 posté par : legnoch (site web) le: 04/05/2005 19:35:22

Félicitation pour l'article.
Concernant les modules, je voudrais changer leur apparence. J'ai remarqué qu'à chaque .box-* est associé une image (ex:http://data.over-blog.com/modele/2/pics/box-bottom-right.png). Moi je voudrais changé la couleur de cette image. Existe-t-il un moyen avec un logiciel de retouche d'image de changer la couleur d'une image en gardant toute les nuances de dégradés de la précédente.

Merci.

Francisek : Tout logiciel de retouche d'image qui se respecte a une fonction de remplacement de couleurs. Sinon j'ai un générateur de quelques cadres basiques à fond transparent dont tu pourras changer la couleur. C'est dans l'article Des images de modules à vos couleurs

commentaire n° : 12 posté par : Rakoun (site web) le: 15/05/2005 14:35:07

Merci pour le lien, je vais y jeter un coupe d'oeil. Sinon j'ai trouvé comment faire ce que je désirais sous The Gimp 2.0 en utilisant Outils->Colorier.

Merci encore!

commentaire n° : 13 posté par : Rakoun (site web) le: 19/05/2005 10:09:57

Super site, je te mets en lien immédiatement. Meric pour tout tes éclaircissements

commentaire n° : 14 posté par : andrael (site web) le: 09/07/2005 16:00:19

Bonjour Francisek.

J'ai une question! et comme je suis nul en css... Je m'adresse au patron!

Alors voilà. Sur le forum j'ai demandé comment faire pour reduire la largeur de mes articles et de la colonne des modules sur la droite. on m'a gentiemnt montré. Bien.

Dans la conversation de ce thread, un inernaute à suggérer qu'on pouvais remplacer les vlaeurs en pixels par des valeurs en pourcentages. Ce qui permettrait au blog de s'adapter à la configuration du lecteur.

questions, est-ce vrai? et comment faire?

Merci.

Dr Devo.

commentaire n° : 15 posté par : Dr Devo (site web) le: 27/07/2005 13:08:52

Dr Devo >>> Oui c'est possible de donner des valeurs en pourcentages, mais pour éviter les mauvaises surprises, il faut donner TOUTES les mesures en pourcentages, définir les marges explicitement afin de maximiser la compatibilité des rendus des différents navigateurs.
La simplicité même quoi !!! Surtout que certains modules (calendrier, recherche, newsletter) doivent avoir une largeur minimale pour être bien lisibles.

Tout ça pour dire que ça n'est pas aussi simple que ça en a l'air....

commentaire n° : 16 posté par : Francisek (site web) le: 27/07/2005 13:48:25

Et dire que j'ai passe plusieurs apres-midi a essayer de comprendre tout ce que tu expliques clairement en passant de mon CSS a mon blog a chaque petit changement... Si j'avais su...

Tes articles d'aides sont vraiment supers. Je te remercie (meme si je n'arrive pas a mettre en oeuvre tout ce que tu expliques :) ).

commentaire n° : 17 posté par : anais (site web) le: 27/07/2005 17:16:52

Hello!

Je n'arrive aps a trouver une adresse pour te contacter directement. Ici un post que j'ai mis sur lr forum, qui traite justement des modules et qui est un souci dont je n'ai pas encore trouvé une solution.

http://forum.over-blog.com/0-forum-blog-6-1298341.html

Si t'as une idée contacte moi!!

@+

commentaire n° : 18 posté par : antho (site web) le: 28/04/2006 23:12:38

Ton problème vient du fait que dans les modèles 10X, le contenu des modules (.box-content dans le css) inclut le titre du module mais que l'image du titre du module et dans un élément (.box-top) qui contient le contenu du module. C'est donc le serpent qui se mord la queue: afficher le fond du titre au-dessus du fond du contenu ET afficher le titre du module (inclus dans le contenu) au dessus de fond.

Si le contenu du module n'est pas au moins aussi haut son l'image de fond, ça chevauche.

En regardant ton CSS, je vois qu'il n'y a pas d'image de fond dans le .box, tu pourrais y mettre celle de .box-content, puisque .box contient tous les autres éléments du module.

réponse de : Francisek (site web) le: 28/04/2006 23:52:36

Salut Oh ! Maitre en CSS
Je galère depuis plusieurs jour sur le CSS bien entendu. J'utilise celui généré par ton site. J'ai pût adapter quelques petites choses, mais là je sèche (normal avec un pseudo pareil)
Voilà
-comment diminuer la taille en hauteur de la fenêtre de rédaction d'un commentaire le bt [Publier] est caché en 800x600
-Comment faire pour que par défaut le texte de ma réponse soit en noir (actuellment bordeaux de la même couleur que les com. , s'est pour mieux différentier la réponse du com lui-même)

En attendant merci pour toutes les infos de ton blog.

commentaire n° : 19 posté par : Le Poulpe (site web) le: 29/04/2006 23:53:26

Normalement, la fenêtre d'ajout de commentaires est prédimensionnée par le blog en 440x600, donc effectivement, sur sun écran 800x600, ça risque de poser problème. Tu peux adapter des valeurs plus de ton choix dans le sélecteur CSS #formComment
Pour tes réponses, tu peux ajouter cette ligne dans ton CSS :
.reponseMessage{color:#000;}
Toutes tes réponses non mises en forme seront en noir.

réponse de : Francisek (site web) le: 01/05/2006 19:26:51

Merci
je modifie le #formcomment width et height, mais ça ne semble pas réagir peut-il être contré par une déclaration à un autre endroit du CSS (j'ai rafraichit avec F5)

Poulpe dit le boulet ;))

commentaire n° : 20 posté par : Le Poulpe (site web) le: 02/05/2006 01:44:59

Attention, ce n'est pas #formcomment mais #formComment
La ligne existant déjà, tu peux la modifier directement ou placer ta modif après l'existante.

réponse de : Francisek (site web) le: 03/05/2006 12:16:39

bonjour
il est tres bien ton site !!!
je voulais te demandé, j'ai mis une image autor de mes modules pour faire un cadre en utilisant dans mon css : les attributs =
.box-top { background:transparent url(http etc...
j'aimerais faire pareil mais autour de mes articles , je sais kil est possible de mettre un cadre de couleur avec l'attribut "border" mais est ce possible avec une image ???
Voici le blog en question : http://fvanessa.over-blog.org/
MERCI BEAUCOUP

commentaire n° : 21 posté par : vanes (site web) le: 15/05/2006 14:43:39

Comme tu l'auras remarqué pour les modules, il faut plusieurs images pour créer un beau cadre de modules en CSS. Pour les articles c'est beaucoup plus difficile (voir impossible selon le type d'image).

réponse de : Francisek (site web) le: 17/05/2006 00:58:39