Elements CSS d'over-blog (Partie 2)

Publié le par Francisek

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 !!!

Publié dans CSS et Design

Commenter cet article

vanes 15/05/2006 14:43

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

Francisek 17/05/2006 00:58

 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).

Le Poulpe 02/05/2006 01:44

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 ;))

Francisek 03/05/2006 12:16

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

Le Poulpe 29/04/2006 23:53

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.

Francisek 01/05/2006 19: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.

antho 28/04/2006 23:12

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!!

@+

Francisek 28/04/2006 23:52

 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.

anais 27/07/2005 17:16

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 :) ).