/* Theme Name: Blank WP français Theme URL: http://p.sylvestre.free.fr Description: Thème vierge pour wordpress en base de départ. Author: Pierre SYLVESTRE Author URI: http://p.sylvestre.free.fr Version 1 */ /* 1. Reset et design des balises , sémantique et typographie__________________________________________________________ */ /* Base -> Source : Alsacreations.com */ /* Importation de la police FT Rosecube */ @font-face { font-family: 'FTRosecubenormal'; src: url('polices/ftrosecu.eot'); src: local('FT Rosecube'), local('FTRosecubenormal'), url('polices/ftrosecu.woff') format('woff'), url('polices/ftrosecu.ttf') format('truetype'); } /* Page */ html { font-size: 100%; /* évite un bug d'IE 6-7. */ } body { margin: 0; padding: 1em; /* Remettre à zéro si nécessaire. */ font-family: Georgia, Times New Roman, Geneva, serif; /* Pensez à utiliser une collection de polices, par ex: font-family: Arial, Helvetica, FreeSans, sans-serif; */ font-size: 1em; /* à adapter pour la police choisie. */ line-height: 1.4; /* à adapter au design. */ color: #3e352f; /*1b0700; */ background-color:white; background-image:url(images/bg.png); } /* Titres */ h1, h2, h3, h4, h5, h6 { color: #1b0700; margin: 1em 0 .5em 0; /* Rapproche le titre du texte. */ line-height: 1.2; font-weight: bold; /* Valeur par défaut. */ font-style: normal; } h1 { font-size: 1.75em; } h2 { font-size: 1.5em; } h3 { font-size: 1.25em; } h4 { font-size: 1em; } /* Listes */ ul, ol { margin: .75em 0 .75em 32px; padding: 0; text-align:justify; } li { list-style-position:inside; } ul li { list-style-type:square; } /* Paragraphes */ p { font-size:1em; line-height:1.4em; margin: .75em 0; /* Marges plus faibles que par défaut. */ text-align:justify; } address { margin: .75em 0; font-style: normal; } /* Liens */ a { text-decoration: underline; } a:link { color: #1b0700; } a:visited { color: #1b0700; } a:hover, a:focus, a:active { color: #1b0700; text-decoration: none; } /* Pas de bordure pointillée ou halo lors du clic sur un lien */ a:active { outline: none; } /* Pas de bordure autour des images dans les liens */ a img { border: none; } a img:hover { opacity:0.6; } /* Divers éléments de type en-ligne */ em { font-style: italic; } strong { font-weight: bold; } /* Formulaires */ form, fieldset { margin: 0; padding: 0; border: none; } input, button, select { background:none; border:1px #1b0700 solid; font-family:Georgia, Times New Roman, Geneva, serif; font-size:1.1em; padding:5px; vertical-align: middle; /* Solution pb. d'alignement. */ } input[type="submit"]:hover { background-image:url(images/bg-bouton.png); cursor:pointer; } input[type="submit"]:active { background-image:url(images/bg-bouton.png); cursor:pointer; padding:6px 4px 4px 6px; } /* --- -> Supplémentaire --- */ /* Met en évidence les abréviations (ayant un attribut title) */ abbr[title] { border-bottom: 1px dotted; cursor: help; } /* Met en évidence les citations */ blockquote { font-style:italic; margin: 1.5em 80px 1em 20px; min-height:100px; padding: 0 0 0 25px; } blockquote:before { content:"\201C"; float:left; font-size:6em; height:100%; margin-left:-50px; margin-right:15px; margin-top:-25px; color:#d3c7b7; } q, cite { font-style: italic; } q cite, q q { font-style: normal } /* Supprime les guillemets automatiques (citations courtes) */ q { quotes: none; } q:before, q:after { content: ""; /* Nécessaire pour Safari/Chrome */ } /* Rapproche les paragraphes dans les listes et citations */ blockquote p, li p { margin: .5em 0; } blockquote blockquote { font-size:0.75em; } small { font-size:11px; } pre, code { background-image:url(images/carre.png); border:1px solid #1b0700; color:#fbf1df; display:block; font-size:13px; line-height:1.3em; margin:20px; padding:2px; overflow:auto; white-space:pre; } code { display:inline; } pre:before { display:block; content:"CODE"; background-color:#fbf1df; color:#1b0700; font-weight:bold; margin-bottom:5px; padding-left:5px; } small code { background:none; color:#1b0700; font-size:11px; display:inline; border:none; margin:5px; white-space:normal; } small code:before { display:inline; content:""; padding-left:0; } /* Styles de base pour les listes de définition */ dl { margin: .75em 0; } dt { margin: .75em 0 0 0; font-weight: bold; } dd { margin: .25em 0 .25em 32px; text-align:justify; } /* Mise en forme simple pour les tableaux */ table { margin: 0; border: 1px solid gray; /* Pas de bordure = "none". */ border-collapse: collapse; /* Valeur par défaut: "separate". */ border-spacing: 0; } table td, table th { padding: 4px; /* Pas de retrait autour du texte = "0". */ border: 1px solid #ccc; /* Pas de bordure = "none". */ vertical-align: top; /* Valeur par défaut: "middle" */ } /* Conteneurs sémantiques de HTML 5 */ article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } /* Balise clear */ .clear { clear:both; } .alignright { float:right; margin-bottom:14px; margin-left:14px; margin-top:14px } .alignleft { float:left; margin-bottom:14px; margin-right:14px; margin-top:14px } .aligncenter { text-align:center; margin-top:14px; margin-bottom:14px; } .div-center { margin:0 auto; } .float-left { float:left; } .wp-caption { background-image:url(images/bg-sidebar.png); padding-top:5px; text-align:center; } .wp-caption a img { position:relative; z-index:1; } .wp-caption-text { background-image:url(images/bg-sidebar.png); color:#fbf1df; font-variant:small-caps; margin-bottom:0; margin-top:-22px; position:relative; text-align:center; width:100%; z-index:2; } a.anchor { border-bottom:none; color:#3E352F; text-decoration:none; } a.anchor:hover { border-bottom:none; color:#1b0700; } a.anchor:after { color:#3E352F; content:" \25CA"; border-bottom:0px; text-decoration:none; font-weight:bold; } .textwidget p { font-family:Georgia, Times New Roman, Geneva, serif; font-size:0.75em; margin:14px; text-align:center; } .ftrose { font-family:'FTRosecubenormal'; } /* 2. Design des
et structure du thème ________________________________________________________*/ #container{ margin:0 auto; width:960px; } #header{ float:left; height:295px; width:960px; } #header ul li { float:left; list-style:none; margin-left:10px; } #top_title{ } #header h1, #header h2, #header p { text-indent: -5000px; } #header h1, #header h2 { font-size:28px; } #logo { background-image:url(images/logo-ange.png); float:left; height:167px; width:757px; } #logo a.rss { display:block; float:left; height:167px; text-align:center; text-decoration:none; width:119px; } #logo a.rss span { display:none; font-size:0.9em; } #logo a.rss:hover span { background-image:url(images/bg-bouton.png); display:block; height:45px; margin:87px 90px; width:120px; } #logo a.home { display:block; height:167px; margin-left:119px; width:638px; } #searchform { height:120px; margin-top:20px; margin-left:757px; text-align:center; width:174px; } #searchform input, #searchform label { display:block; margin: 10px auto; } #searchform label { font-family:'FTRosecubenormal'; font-size:1.4em; height:16px; margin-top:-10px; margin-bottom:20px; width:174px; } #searchform input { width:150px; } #searchform input#searchsubmit { width:120px; } .barre { background-image:url(images/barre.png); background-repeat:no-repeat; height:48px; margin-top:-60px; padding-top:1px; text-align:center; width:960px; } .barre-texte-gauche { display:block; float:left; margin-top:8px; margin-left:70px; } .barre-texte-droit { display:block; float:right; margin-top:-4px; margin-right:70px; width:150px; } .barre-gauche { background-image:url(images/motif-h.png); float:left; height:7px; margin-left:5px; margin-top:18px; width:205px; } .barre-droite { background-image:url(images/motif-h.png); float:left; height:7px; margin-left:221px; margin-top:18px; width:149px; } #top_nav { font-family:'FTRosecubenormal'; font-size:2.4em; margin-top:-32px; } #top_nav ul li { margin-left:30px; } #top_nav li a, #top_nav li a:visited { color:#5f514c; text-decoration:none; } #top_nav li a:hover { color:#1b0700; text-decoration:underline; } #top_nav li.current_page_item a { color:#1b0700; text-decoration:underline; } #content{ float:left; margin-top:-10px; padding-top:10px; width:720px; color:#3e352f; /*756559;*/ overflow:hidden; } #content p { } #content h1 { font-size:2.75em; margin-top:15px; margin-bottom:30px; font-variant:small-caps; } #content li { margin-bottom:0.8em; } .post-col { float:left; margin-top:-15px; min-height:450px; padding:7px 7px; width:220px; } .post-col a { height:100%; width:100%; } .post-col .postmeta { margin-top:10px; } .post-col h2 { font-variant:small-caps; margin-top:-10px; } .post-thumb { width:220px; max-height:220px; text-align:center; overflow:hidden; } .post-thumb p { display:none; } p.category a { font-size:0.8em; margin-left:3px; } p.category:before { content:url(images/carre.png); } .barre-verticale { background:url(images/motif-v.png) repeat-y 0 0px ; float:left; height:420px; margin-top:30px; width:8px; } hr { background-image:url(images/motif-h.png); clear:both; height:7px; margin-left:155px; margin-top:5px; width:399px; border:none; } .sticky { min-height:250px; margin-top:-20px; overflow:hidden; padding:7px 7px; width:705px; } .sticky .post-thumb { margin-top:13px; overflow:visible; position:absolute; z-index:1; } .sticky h2 { background-image:url(images/carre.png); color:#fbf1df; font-size:2em; font-variant:small-caps; margin-top:55px; max-width:350px; padding:10px; position:absolute; z-index:2; } .sticky h2:before { content:'A la une : '; font-size:0.7em; } .sticky h2 a, .sticky h2 a:visited { color:#fbf1df; } .sticky p, .sticky div.postmeta { display:none; } .post{} .postmeta { margin-top:35px; margin-bottom:20px; } .postmeta p { text-align:center; margin:5px; } #postnavigation, p.page-nav { clear:both; position:relative; top:0%; } #postnavigation p, p.page-nav { margin-bottom:40px; margin-top:40px; font-variant:small-caps; font-weight:bold; text-align:center; } .nocomments{} #comments .author{} .standard{} .alt{} #comments_list li { list-style:none; } .comments_meta { padding:1px; } .comments_meta img { float:left; margin-right:10px; } .comment_text { border-bottom:1px #d3c7b7 solid; margin-bottom:10px; } .comments_navigation{} .comments_reply{} #commentform{} #sidebar { background-image:url(images/bg-sidebar.png); color:#fbf1df; font-family:'FTRosecubenormal'; float:left; padding-bottom:30px; width:240px; } #sidebar ul { margin:0 auto; } #sidebar ul li { font-size:1.4em; list-style-position:outside; list-style-type:none; text-align:center; } #sidebar ul li ul { margin-left:70px; } #sidebar ul li ul li { font-size:1.1em; list-style-type:square; text-align:left; } #sidebar a, #sidebar a:visited { color:#fbf1df; text-decoration:none; } #sidebar a:hover { color:#d3c7b7; text-decoration:underline; } ul li#twitter-tools ul li { border-bottom:1px solid #d3c7b7; font-family:georgia; font-size:0.65em; list-style-type:none; margin:0 25px 10px -45px; } ul li#twitter-tools ul li a { color:#d3c7b7; } ul li#twitter-tools ul li.aktt_more_updates { border:none; font-size:1em; font-variant:small-caps; text-align:center; } #automobile { background-image:url(images/automobile.png); height:163px; margin-left:10px; margin-top:-60px; width:220px; } #facebook { background-image:url(images/facebook.png); float:left; height:84px; margin-left:20px; margin-top:25px; width:89px; } #facebook a, #twitter a { display:block; width:100%; height:100%; } #twitter { background-image:url(images/twitter.png); height:84px; margin-left:120px; margin-top:25px; width:105px; } #footer{ float:left; width:100%; } #footer .barre { margin-top:0px; } #footer .barre-gauche { float:left; margin-left:70px; width:300px; } #footer .barre-droite { float:right; margin-left:0px; margin-right:70px; width:300px; } #footer h4 { font-family:'FTRosecubenormal'; font-size:1.6em; margin-top:5px; text-align:center; } #footer ul li { list-style-type:square; } #footer-recent-comments { float:left; padding:0 7px; width:306px; } #footer-recent-comments ul { margin-left:60px; width:240px; } #footer-recent-posts { float:left; padding:0 7px; width:306px; } #footer-recent-posts ul { margin-left:70px; width:240px; } #about { background-image:url(images/about.png); background-position:95% 100%; background-repeat:no-repeat; float:left; height:200px; padding:0 7px; width:306px; } #about p, #about a { margin-left:30px; margin-right:115px; } #copyright { margin:0 auto; text-align:center; font-size:0.7em; } #copyright li { display:inline; } /* Single */ /* Ajoute un tic après chaque lien déjà visité ! */ #content.the-single a:visited:after { color:#3e352f; content: "\00A0\221A"; font-size: 30%; text-decoration: none!important; vertical-align: super; } #content.the-single, #content.the-category, #content.the-search, #content.the-archive, #content.the-page, #content.the-author { padding:7px 28px; width:664px; } #content.the-category h2, #content.the-search h2, #content.the-archive h2 { font-size:2em; font-variant:small-caps; max-width:430px; } #content.the-single div.post-thumb, #content.the-category div.post-thumb, #content.the-search div.post-thumb, #content.the-archive div.post-thumb, #content.the-page div.post-thumb { float:right; margin-left:12px; margin-top:-45px; overflow:hidden; width:220px; } .the-search:first-child { text-align:center; } .aligncenter p { text-align:center; } .aligncenter ul li { margin:0 auto; width:300px; } #content a[rel="prev"] { float:left; font-variant:small-caps; margin-top:-8px; margin-bottom:5px; } #content a[rel="prev"]:before { content:"\00ab"; } #content a[rel="next"] { float:right; font-variant:small-caps; margin-top:-8px; margin-bottom:5px; } #content a[rel="next"]:after { content:"\00bb"; } a.glossaire, a.glossaire:visited { color:#3e352f; /*756559;*/ text-decoration:none; border-bottom: 1px dotted #a59589; } a.glossaire:hover { border-bottom: none; } #breadcrumb { font-variant:small-caps; } #content.the-author dd img { float:right; margin-left:14px; margin-bottom:14px; } .the-404 p { float:left; width:505px; padding:0px 30px 0px 30px; text-align:center; } .the-404 h2 { text-align:center; } .the-404 ul li { margin-left:180px; } .the-404 div { margin-left:50px; } .img-404 { background-image:url(images/velo-tricycle-retro.png); float:left; height:202px; margin-left:0px!important; width:150px; } /* Page */ #index-list { float:left; margin:0 auto; width:100%; } #index-list ul { list-style-type:none; margin:10px 0 10px 0; padding-left:10px; } #index-list ul li { background-image:url(images/etiquette-glossaire.png); background-repeat:no-repeat; display:block; float:left; height:50px; margin:20px 0 20px 0; padding:7px 18px 0 20px; width:180px; } #index-list a { display:block; height:100%; width:100%; } #link-list { float:left; margin:0 auto; width:50%; } #link-list ul { border-left:1px #1b0700 solid; padding-left:5px; } img.vignette { margin-left:25px; } .bon-a-savoir, .sommaire { background-image:url(images/bg-bouton.png); font-size:0.9em; width:250px; margin-top:0; margin-bottom:0; padding:7px; text-align:justify; } .bon-a-savoir:before { display:block; content:"BON A SAVOIR !"; background-image:url(images/bg-sidebar.png); color:#fbf1df; font-family:'FTRosecubenormal'; font-size:1.5em; margin:-7px -7px 5px -7px; padding-left:5px; text-align:center; } .sommaire:before { display:block; content:"SOMMAIRE"; background-image:url(images/bg-sidebar.png); color:#fbf1df; font-family:'FTRosecubenormal'; font-size:1.5em; margin:-7px -7px 5px -7px; padding-left:5px; text-align:center; } .bon-a-savoir ul, .bon-a-savoir ol, .sommaire ul, .sommaire ol { margin: .4em 0 .4em; padding: 0; text-align:justify; } /* Réseaux sociaux */ .bk-sociaux { margin:20px auto; height:50px; width:325px; } .bk-sociaux a { float:left; } .bk-sociaux a:hover { opacity:0.6; } .bk-facebook { display:block; background:url(images/reseaux-sociaux.png) 0 0; height:50px; margin-left:15px; width:50px; } .bk-twitter { display:block; background:url(images/reseaux-sociaux.png) -50px 0; height:50px; margin-left:15px; width:50px; } .bk-google { display:block; background:url(images/reseaux-sociaux.png) -101px 0; height:50px; margin-left:15px; width:49px; } .bk-delicious { display:block; background:url(images/reseaux-sociaux.png) -151px 0; height:50px; margin-left:15px; width:50px; } .bk-stumbleupon { display:block; background:url(images/reseaux-sociaux.png) -200px 0; height:50px; margin-left:15px; width:50px; } /*-------------- RECLAME -> catégorie Webdesign -------------- */ #reclame { background:url(images/reclame.png) no-repeat 0 0; border:dashed 3px #1b0700; width:400px; min-height:150px; margin:0 auto; padding:0 5px 0 50px; /*color:#fbf1df;*/ } #reclame a { font-size:18px; }