/* LE FICHIER STYLE.CSS LIE AU BLOG WORDPRESS (PAS LA MAQUETTE HTML) */ /* ORGANISATION DU FICHIER : on a travaillé en plusieurs passes, d'abord la mise en place des blocs * (notée organisation primaire), puis on passe sur chaque blocs (organisation secondaire) puis on apporte * les spécificités à chaque page (article, commentaire...) */ /* -------------------- ORGANISATION PRINCIPALE : DEFINITION DES BLOCS PRINCIPAUX -------------------- */ /* De manière générale il faut se rappeler que tout les éléments ont des marges prédéfinies et qu'il faut donc les annuler */ /* Les pages sont articulées comme suit : * *
* * (généré directement par WP) *
* * *
* */ /* Première chose à faire : annuler les marges (margin et padding), mettre le background et définir la police par défaut */ body { margin:0 ; padding:0 ; background:white; font-style:Arial sans-serif; background: #efefef; } /* mettre les marge à 0 auto va centrer le contenu */ #page { margin:10px auto; width:800px; border-width:1px; border-style:solid; background:white; } #header { width:800px; height:200px; margin: 0; background: url(./images/header.JPG) no-repeat; } #navbar { width:800px; height:30px; margin: 0 0 10 0; font-family: Verdana, "Bitstream Vera Sans", Tahoma, Arial, sans-serif; background: url(./images/navbar.jpg) no-repeat; } /* Pas de height pour le content puisque cela dépend des articles on rajoute un float:left pour laisser la sidebar sur le coté droit*/ #content { width:460px; margin: 0 10px 10px 0; float:left; font-family: Verdana, "Bitstream Vera Sans", Tahoma, Arial, sans-serif; } /* Pas de height pour la sidebar puisque cela dépend des catégories on rajoute un float:right puisqu'elle se positionne sur le coté droit*/ #sidebar { width:300px; margin: 0 0 10px 0; border-width:1px; float:right; font-family: Verdana, "Bitstream Vera Sans", Tahoma, Arial, sans-serif; font-size:12px; color:#333; } /* Le clear:both permet de revenir dans le flux de la page */ #footer { width:800px; height:100px; margin: 0; clear:both; background: url(./images/footer.jpg) no-repeat; } /* -------------------- ORGANISATION PRIMAIRE - TYPOGRAPHIE -------------------- */ a { text-decoration: none; color: #333; } a:hover { text-decoration: underline; } /* -------------------- ORGANISATION SECONDAIRE - LE HEADER ET LA NAVBAR --------------------*/ /* Attention le ul a une marge de base, il faut penser à l'annuler et à jouer sur le padding pour centrer par rapport à l'image*/ #navbar ul { margin:0; padding:3px 0; height:30px; } /*Première chose à faire, mettre les li inline. Puis il faut aussi retravailler sur les marges */ #navbar ul li { display:inline; text-align:center; } /*Le padding doit se faire sur le a et non sur les ul pour que le lien prenne bien tout la ligne quand on passe dessus (hover)*/ #navbar a { position:relative; /* obligatoire pour que le padding soit pris en compte de la même manière par ie et firefox */ text-decoration:none; font-family: Verdana, "Bitstream Vera Sans", Tahoma, Arial, sans-serif; font-size: 13px; text-transform: uppercase; color: #FFFFFF; height:50px; padding: 5px 12px 9px; } #navbar a:hover { background-color: #292525; color: #FFFFFF; } /* -------------------- ORGANISATION SECONDAIRE - LA SIDEBAR -------------------- */ /* Dans la sidebar WP va générer des li (dans un ul) à partir des widgets définis dans l'admin. On se contente de les * customiser et de les insérer dans des divs de zones primaires et secondaires. * Structure de la sidebar : * * *
Image des gants
*/ /* Le padding général a été mis à 5px dans la sidebar, on ajuste ici juste l'espace entre chaque li et le li suivant */ .widget-container { margin: 20px 0 0 0; } /*Initialisation des marges pour le h2 et on ajoute une bordure pour le souligner */ #sidebar h3 { margin:8px 0 5px 0; /*la marge du haut est faite pour ajuster la hauteur au titre du site */ width:290px;/* La largeur de 300 moins le padding de 5x2*/ font-size: 12px; text-transform: uppercase; border-bottom: 1px solid #CCC; } #sidebar p { margin:0; width:290px;/* La largeur de 300 moins le padding de 5x2*/ } /*initialisation des marges pour le ul */ #sidebar ul { margin-top:0; } /* pas de point pour chaque li "container" */ #sidebar li { list-style-type:none; } /* Par contre pour les li imbriqués dans les containers on change l'image */ #sidebar li ul li { list-style-image: url(./images/puce-carre.gif); } #spacer { clear:both; padding:30px; /* a partir de cette ligne alignement de l'image*/ text-align:center; } /* -------------------- ORGANISATION SECONDAIRE - LE FOOTER -------------------- */ /* Rien de particulier, le background a déjà été traité dans l'organisation primaire, * on customise juste les marges et la police du petit contenu qu'on va mettre dedans */ #footer p { font-size: 10px; color: white; padding: 30px 5px 5px 5px; } /* -------------------- ORGANISATION SECONDAIRE - LE CONTENT - PAGE D'ACCUEIL --------------------*/ /** Le content s'organise comme suit :

Le titre du site

La boucle commence ici
Le titre du post (en lien)
Les informations métadata du post
Un résumé, seulement si c'est une archive ou un résultat de recherche sinon on affiche le contenu
Le contenu
La catégorie, le nombre de commentaires...
*/ #content { font-family: Verdana, "Bitstream Vera Sans", Tahoma, Arial, sans-serif; font-size:12px; text-align:justify; padding: 10px ; /* on s'éloigne tout de suite du bord (mais attention on a réduit la largeur du div=content d'autant pour ne pas chevaucher avec la sidebar */ } /* Pas de bordures pour toutes les images */ #content img { border:none; } /* Le titre du site a une typographie spéciale à ne pas confondre avec les autres h1 (dans les posts notamment) */ .titre_page { margin:0; font-size:24px; color:#333; } /* Le fil d'ariane */ .ariane { color:red; } .ariane a { color:red; } /* A PARTIR D'ICI : LES POSTS -------------------- */ /* Chaque poste est séparé de son prédécesseur par une marge de 30px */ #content .post { margin : 30px 0 0px 0; } .entry-title { margin : 0 0 3px 0; /* séparation avec le reste de 3px */ font-size:16px; font-weight: bold; color: #000; } .entry-title a:hover { text-decoration: none; } .entry-meta { font-size: 9px; } /* Normalisation des titres générés dans l'écriture des posts (à partir de l'interface utilisateur) */ .post h1,.post h2,.post h3,.post h4,.post h5 { font-size:16px; color:#333; border:none; } .entry-utility a { color:red; } /* A PARTIR D'ICI : LA NAVIGATION -------------------- */ /* On centre la navigation, le reste est géré dans le fichier pagenavi-css.css dans le dossier du plugin pagenavi */ #page_navi { margin: 50px 0 30px 0; text-align:center; } /* -------------------- ORGANISATION SECONDAIRE - LE CONTENT - PAGES WORDPRESS (ASSOCIATION ET WINGTSUN) -------------------- */ /* La structure de la page est identique à la page d'accueil avec une boucle simplifiée (classe post pour être calé de la même manière mais pas de commentaires ni métadata) */ /* Attention, la classe de contenu est différente (entry-content-page) pour pouvoir définir une mise en page (les polices surtout) différente pas rapport aux posts. /*

Le titre du psot

La boucle commence ici
Le contenu
*/ /* Travail des titres dans les pages */ .entry-content-page h1, .entry-content-page h2, .entry-content-page h3, .entry-content-page h4{ font-size:16px; color:#333; width: 460px ; border-bottom: 1px solid #CCC; } /* Les images ont une marge juste à gauche et à droite pour ne pas coller au textes */ .entry-content-page img { margin : 0 10px 0 10px; } .entry-content-page li { list-style-image: url(./images/puce-carre.gif); } /* Traitement spécial pour l'image dans la page "Association" car impossible d'aligner la carte google map sur l'image alors * on a fait le contraire */ #maison_guill { margin:0; padding:0; } /* -------------------- ORGANISATION SECONDAIRE - LE CONTENT - LES POSTS -------------------- */ /* On reprend ici aussi une structure classique avec une boucle simplifiée. Le titre du site est remplacé par le titre du post, * Le fil d'ariane est remplacé par les informations métadata. Ces deux éléments sont sortis du div post qui a le contenu. * La navigation entre les articles est spéciale puisque non gérée par le plugin pagenavi. *
La boucle simplifiée commence ici

Le titre du post

Les informations métadata du post
Le contenu

*/ /* Liens rouges pour le méta data (puisque remplace le fil d'ariane */ .single_meta, .single_meta a { color:red; } /* Navigation entre les articles*/ .nav_articles { margin: 30px 0 30px 0; width: auto; padding:0 40px 0 20px; } .nav_articles a { color: red; } .nav-previous { float:left; } .nav-next { float:right; } /* A PARTIR D'ICI : LES COMMENTAIRES -------------------- */ /* Structure des commentaires *
*

* Il faut que l'image (l'avatar) soit en float:left pour centrer le métadata. Pour l'effet "bulle" il suffit d'encadrer la div quote puis de mette en background de l'élément "cite" la fleche de la bulle en callant avec le padding pour qu'elle vienne pile au dessus de l'encadrement. */ /* Le clear est pour les éléments de navigations qui sont en float left et right */ .comments { clear:both; margin-top:80px; } /* Titres "laisser un commetaire" et "répondre à"*/ .comments h3 { color:#333; border-bottom: 1px solid #CCC; } .commentlist { /*c'est un ul */ margin:0px 0px 10px 0px; padding:0; list-style: none; } .commentlist li { list-style-image: none; } .bulle { width: auto; margin-bottom: 20px; } .bulle .quote { margin: 0px; padding: 10px; border: 1px solid #c9c2c1; background-color: #fff; } .bulle .quote p { margin: 0px; padding: 0px; } /* L'avatar est situé à gauche de l'information méta sur l'auteur */ .bulle img { margin:0 5px 0px 0; padding:5px; float:left; } /* Information méta sur l'auteur*/ .bulle cite { position:relative; margin: 0px; padding: 7px 0px 0px 0px; top: 6px; background: transparent url(./images/FlecheBulle.gif) no-repeat 50px 0; font-style: normal; } /* Pour la réponse aux commenraires, il faut que les éléments soit en display:block sinon ils sont alignés avec le label */ .comments input, .comments textarea { display:block; } /* -------------------- ORGANISATION SECONDAIRE - LA PAGE DE RECHERCHE -------------------- */ /* Les résultats de la recherche sont en italique */ .recherche { font-style:italic; } /* Si pas de résultat, le paragraphe annoncant qu'il n'y a pas de résultat est décalé par rapport au titre de la page*/ .no_match { margin: 30px 0 30px 0; }