346 lines
11 KiB
CSS
346 lines
11 KiB
CSS
|
/* -----------------------------------------------------------------
|
|||
|
|
* CREDITS
|
|||
|
|
* BlueStreet Theme par jibHaine (http://www.jibhaine.com)
|
|||
|
|
* Inspir<EFBFBD> du th<EFBFBD>me Barracus pour Wordpress (http://biboz.net/barracus/)
|
|||
|
|
* Blog Icons par Avi Alkaley (http://avi.alkalay.net/2007/05/blog-icons.html)
|
|||
|
|
* Structure du css par Kozlika
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* -----------------------------------------------------------------
|
|||
|
|
1. STRUCTURE
|
|||
|
|
a inscrire ici ou en important une css de structure placee dans
|
|||
|
|
le meme repertoire et appelee grace a l'instruction ci-dessous
|
|||
|
|
(exemple pour un fichier de structure nomm<EFBFBD> layout.css)
|
|||
|
|
------------------------------------------------------------------ */
|
|||
|
|
@import url(layout.css);
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* ------------------------------------------------------------
|
|||
|
|
2. BALISES HTML PAR DEFAUT
|
|||
|
|
------------------------------------------------------------- */
|
|||
|
|
*{margin:0;padding:0;border:none;font-family:Arial, Verdana, Helvetica, sans-serif;font-size:12px;}
|
|||
|
|
body { width:100%;height:100%;background:#333333 url(img/fond.png); }
|
|||
|
|
|
|||
|
|
h1 { font-size:24px;}
|
|||
|
|
h2 { font-size:18px; }
|
|||
|
|
h3 { font-size:14px;}
|
|||
|
|
h4 { font-size:13px;}
|
|||
|
|
h5 { font-size:12px;}
|
|||
|
|
h6 { font-size:10px;}
|
|||
|
|
h1,h2,h3,h4,h5,h6{font-family:Century Gothic, BitStream Vera Sans, monospace;font-weight:100;}
|
|||
|
|
|
|||
|
|
p { }
|
|||
|
|
img { }
|
|||
|
|
sup { }
|
|||
|
|
abbr, acronym {font-weight:bold; }
|
|||
|
|
|
|||
|
|
blockquote, q { font-style:italic;}
|
|||
|
|
blockquote, pre {border-left:#666 solid 3px;padding:5px;margin:5px; }
|
|||
|
|
pre {font-family:'Courier New', Courier, monospace;overflow:auto;border:#666 solid 1px;border-width:1px 1px 1px 3px;}
|
|||
|
|
|
|||
|
|
ul,
|
|||
|
|
ol,
|
|||
|
|
dl {margin-left:20px; }
|
|||
|
|
|
|||
|
|
li{list-style-type:none;}
|
|||
|
|
form { }
|
|||
|
|
fieldset { }
|
|||
|
|
input[type=text], input[type=submit] ,input[type=reset], textarea,select {border:solid #666 1px;margin:2px; }
|
|||
|
|
input[type=submit] ,input[type=reset] {
|
|||
|
|
background:#333333 url(img/fond_bouton.png) repeat-x left center;
|
|||
|
|
color:white; }
|
|||
|
|
input[type=radio], input[type=checkbox]{border:none;}
|
|||
|
|
input[type=text]{padding:1px 0px 1px 0px;}
|
|||
|
|
label { }
|
|||
|
|
|
|||
|
|
a { color:#0066CC;text-decoration:none; }
|
|||
|
|
a:link { }
|
|||
|
|
a:visited { }
|
|||
|
|
a:hover { color:#6699FF;text-decoration:underline;}
|
|||
|
|
a:focus { }
|
|||
|
|
a[hreflang]:after { }
|
|||
|
|
a img { }
|
|||
|
|
|
|||
|
|
code, pre { }
|
|||
|
|
pre { }
|
|||
|
|
|
|||
|
|
hr { }
|
|||
|
|
|
|||
|
|
/* ------------------------------------------------------------
|
|||
|
|
3. PAGE
|
|||
|
|
------------------------------------------------------------- */
|
|||
|
|
|
|||
|
|
#page { width:600px; margin:0 auto;position:relative;
|
|||
|
|
background : transparent url(img/page_fond.png) repeat-y left bottom; }
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* ------------------------------------------------------------
|
|||
|
|
4. HAUT DE PAGE
|
|||
|
|
------------------------------------------------------------- */
|
|||
|
|
|
|||
|
|
#top {width:600px;height:280px;background:transparent url(img/page_head.png) no-repeat left bottom; }
|
|||
|
|
#top h1 { position:absolute;top:200px;left:50px; }
|
|||
|
|
#top h1 a {color:#FFF;font-size:20px; font-weight:400;}
|
|||
|
|
#top h1 a:hover{text-decoration:none;}
|
|||
|
|
#prelude { position:absolute;left:150px;top:45px;color:#6699FF; }
|
|||
|
|
#prelude a { color:#6699FF;}
|
|||
|
|
#prelude a:hover{ color:#99CCFF;}
|
|||
|
|
|
|||
|
|
/* ------------------------------------------------------------
|
|||
|
|
5. WRAPPER MAIN CONTENT
|
|||
|
|
------------------------------------------------------------- */
|
|||
|
|
|
|||
|
|
#wrapper {margin:15px 35px; }
|
|||
|
|
#main { width:335px;float:left;}
|
|||
|
|
#sidebar { width:180px;float:right;}
|
|||
|
|
#content { }
|
|||
|
|
|
|||
|
|
#content-info {text-align:center;margin-bottom:10px; }
|
|||
|
|
#content-info h2 { }
|
|||
|
|
#content-info p { position:absolute;top:258px;right:50px;text-align:right; }
|
|||
|
|
#content-info a {color:#FFF;}
|
|||
|
|
.content-inner { }
|
|||
|
|
|
|||
|
|
.pagination , #navlinks {text-align:center;margin:5px 0px; }
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* ------------------------------------------------------------
|
|||
|
|
6. BILLETS
|
|||
|
|
------------------------------------------------------------- */
|
|||
|
|
|
|||
|
|
.post { }
|
|||
|
|
.post.first { }
|
|||
|
|
.post.odd { }
|
|||
|
|
|
|||
|
|
.day-date {
|
|||
|
|
text-align:right;
|
|||
|
|
color:#999;
|
|||
|
|
letter-spacing:5px;
|
|||
|
|
padding:2px 18px 2px 0px;
|
|||
|
|
background : transparent url(ico/clock.png) no-repeat right center; }
|
|||
|
|
/* police de tous les titres*/
|
|||
|
|
#top h1 a, .post-title, .post-title a , #comments h3,
|
|||
|
|
#comment-form h3, #pings h3, #attachments h3 ,#sidebar h2,#sidebar label{
|
|||
|
|
font-family:Century Gothic, BitStream Vera Sans, monospace;font-weight:100;
|
|||
|
|
margin:10px 0px 0px 0px;
|
|||
|
|
}
|
|||
|
|
#comments h3,
|
|||
|
|
#comment-form h3, #pings h3, #attachments h3{font-size:16px;}
|
|||
|
|
.post-title , .post-title a, .post-title a:hover{color:#000;text-decoration:none;font-size:18px;letter-spacing:1px; }
|
|||
|
|
.post-info, .post-info a { font-size:11px;color:#999; }
|
|||
|
|
.post-tags{padding:0;margin:4px 0px}
|
|||
|
|
.post-tags li, .tags p a{ display:inline;padding:2px 0px 2px 18px; background:transparent url(ico/tag.png) no-repeat left center;}
|
|||
|
|
.post-excerpt, .post-content {margin:15px 0px 15px 0px;text-align:justify; }
|
|||
|
|
|
|||
|
|
.read-it { text-align:right;}
|
|||
|
|
|
|||
|
|
.footnotes { }
|
|||
|
|
.footnotes h4 { }
|
|||
|
|
|
|||
|
|
.post-info-co { text-align:left;margin:5px 0px 10px 0px;}
|
|||
|
|
.post-info-co a{padding:2px 0px 2px 18px;display:inline; }
|
|||
|
|
.comment_count {background:transparent url(ico/comment.png) no-repeat left center;}
|
|||
|
|
.ping_count {background:transparent url(ico/trackback.png) no-repeat left center; }
|
|||
|
|
.attach_count {background:transparent url(ico/permalink.png) no-repeat left center; }
|
|||
|
|
|
|||
|
|
#attachments { }
|
|||
|
|
#attachments h3 { }
|
|||
|
|
#attachments ul {margin-left:0px; }
|
|||
|
|
#attachments ul li { padding:2px 0px 2px 18px;background:transparent url(ico/download.png) no-repeat left center;}
|
|||
|
|
#attachments li.image { background:transparent url(ico/edit.png) no-repeat left center;}
|
|||
|
|
#attachments li.audio { background:transparent url(ico/opml.png) no-repeat left center; }
|
|||
|
|
#attachments li.package { background:transparent url(ico/download.png) no-repeat left center; }
|
|||
|
|
#attachments li.text { background:transparent url(ico/edit.png) no-repeat left center; }
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* ------------------------------------------------------------
|
|||
|
|
7. COMMENTAIRES, PINGS
|
|||
|
|
------------------------------------------------------------- */
|
|||
|
|
|
|||
|
|
#comments { }
|
|||
|
|
#pings { }
|
|||
|
|
#pr {margin:15px;color:#06C; }
|
|||
|
|
#comment-form { }
|
|||
|
|
|
|||
|
|
#comments h3 { }
|
|||
|
|
#pings h3 { }
|
|||
|
|
#pr h3 { #comment-form h3 { }}
|
|||
|
|
|
|||
|
|
|
|||
|
|
#comments dl , #pings dl { margin:5px;}
|
|||
|
|
#comments dt { }
|
|||
|
|
#comments dd, #pings dd {border:#666 solid 1px;border-width:1px 1px 1px 3px;padding:5px;margin-bottom:5px; }
|
|||
|
|
#comments .first { }
|
|||
|
|
#comments .odd { }
|
|||
|
|
#comments dd.me , #pings dd.me {border:#06C solid 1px;border-width:1px 1px 1px 3px;}
|
|||
|
|
|
|||
|
|
#pings dl { }
|
|||
|
|
#pings dt { }
|
|||
|
|
#pings dd { }
|
|||
|
|
#pings .first { }
|
|||
|
|
#pings .odd { }
|
|||
|
|
#pings .me { }
|
|||
|
|
|
|||
|
|
#pr dl { }
|
|||
|
|
#pr dd { }
|
|||
|
|
|
|||
|
|
#comment-form fieldset { margin:0px 5px;}
|
|||
|
|
.field{ overflow:auto; }
|
|||
|
|
.field label { width:120px;margin:3px 0px 3px 0px;position:relative;float:left;vertical-align:bottom;}
|
|||
|
|
.field input ,
|
|||
|
|
.field textarea { margin:3px 0px 3px 0px;position:relative;float:right;width:200px; }
|
|||
|
|
|
|||
|
|
#comment-form input[type=submit] ,
|
|||
|
|
#comment-form input[type=reset] { padding:0px 10px 0px 10px;float:right: }
|
|||
|
|
|
|||
|
|
.form-help { }
|
|||
|
|
|
|||
|
|
#ping-url { }
|
|||
|
|
#comments-feed { margin:15px 0px;text-align:center;}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* ------------------------------------------------------------
|
|||
|
|
8. SIDEBAR
|
|||
|
|
------------------------------------------------------------- */
|
|||
|
|
|
|||
|
|
#sidebar {
|
|||
|
|
color:#FFF;
|
|||
|
|
text-align:right;
|
|||
|
|
background : transparent url(img/side_fond.png) repeat-y left top;
|
|||
|
|
}
|
|||
|
|
#blognav {
|
|||
|
|
padding:5px;
|
|||
|
|
background : transparent url(img/side_haut.png) no-repeat left top;
|
|||
|
|
}
|
|||
|
|
#blogextra {
|
|||
|
|
padding:5px;
|
|||
|
|
background : transparent url(img/side_bas.png) no-repeat left bottom;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#sidebar h2, #sidebar label { color:#CCCCCC;margin:5px 0px 5px 0px;font-size:16px;}
|
|||
|
|
#sidebar h3 {color:#999;}
|
|||
|
|
#sidebar a {color:#FFF;width:100%;}
|
|||
|
|
#sidebar a:hover {color:#999;}
|
|||
|
|
#sidebar ul{margin-left:0px;width:170px;}
|
|||
|
|
#sidebar li {padding:4px;}
|
|||
|
|
|
|||
|
|
/* boites du menu des widgets livres avec Dotclear */
|
|||
|
|
#search { }
|
|||
|
|
#search form { }
|
|||
|
|
#search #q {padding:1px 2px;width:110px;}
|
|||
|
|
#search input[type=submit] { } /* ou #search .submit */
|
|||
|
|
#topnav{position:absolute;top:258px;left:50px;text-align:left; }
|
|||
|
|
#topnav li{display:inline;}
|
|||
|
|
.topnav-arch { }
|
|||
|
|
.topnav-home { }
|
|||
|
|
#topnav span{display:none;}
|
|||
|
|
|
|||
|
|
.tags { }
|
|||
|
|
.tags ul { }
|
|||
|
|
.tags li { }
|
|||
|
|
/* a completer separement ou globalement pour le sidebar et la page
|
|||
|
|
sp<EFBFBD>cifique des tags avec les differentes class des tags en fonction
|
|||
|
|
de leur frequence - voir 9/ classes communes */
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* ------------------------------------------------------------
|
|||
|
|
9. FOOTER
|
|||
|
|
------------------------------------------------------------- */
|
|||
|
|
|
|||
|
|
#footer { width:600px;height:40px;background : #333333 url(img/page_foot.png) no-repeat left top; }
|
|||
|
|
#footer p { width:600px;height:17px;padding-top:23px;text-align:center;vertical-align:bottom;color:#999999;}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* ------------------------------------------------------------
|
|||
|
|
10. CLASSES COMMUNES
|
|||
|
|
------------------------------------------------------------- */
|
|||
|
|
|
|||
|
|
/* class sur les liens rss (on peut y placer l'icone
|
|||
|
|
feed.png a piocher dans le theme par defaut par ex.) */
|
|||
|
|
|
|||
|
|
.feed {
|
|||
|
|
padding:2px 0px 2px 18px;
|
|||
|
|
background : transparent url(ico/feed.png) no-repeat left center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* tags dans le sidebar et dans la page les regroupant
|
|||
|
|
(exemple ici pour un nuage) */
|
|||
|
|
.dc-tags #content ul li, .dc-tags #content ul li a,
|
|||
|
|
.tags ul li, .tags ul li a {
|
|||
|
|
display : inline;
|
|||
|
|
width : auto;
|
|||
|
|
padding-left : 0;
|
|||
|
|
padding-right : 4px;
|
|||
|
|
background : transparent;
|
|||
|
|
line-height : 1.5em;
|
|||
|
|
}
|
|||
|
|
.tags ul li a:hover {
|
|||
|
|
background-image :none;
|
|||
|
|
}
|
|||
|
|
.dc-tags .tag0, .tags .tag0 { font-size: 85%; }
|
|||
|
|
.dc-tags .tag10, .tags .tag10 { font-size: 90%; }
|
|||
|
|
.dc-tags .tag20, .tags .tag20 { font-size: 95%; }
|
|||
|
|
.dc-tags .tag30, .tags .tag30 { font-size: 100%; }
|
|||
|
|
.dc-tags .tag40, .tags .tag40 { font-size: 105%; }
|
|||
|
|
.dc-tags .tag50, .tags .tag50 { font-size: 110%; }
|
|||
|
|
.dc-tags .tag60, .tags .tag60 { font-size: 115%; }
|
|||
|
|
.dc-tags .tag70, .tags .tag70 { font-size: 120%; }
|
|||
|
|
.dc-tags .tag80, .tags .tag80 { font-size: 125%; }
|
|||
|
|
.dc-tags .tag90, .tags .tag90 { font-size: 130%; }
|
|||
|
|
.dc-tags .tag100, .tags .tag100 { font-size: 135%; }
|
|||
|
|
|
|||
|
|
/* messages d'erreur */
|
|||
|
|
.error {
|
|||
|
|
border : 1px solid #c44;
|
|||
|
|
background : #df0;
|
|||
|
|
padding : 0.5em;
|
|||
|
|
}
|
|||
|
|
.error ul {
|
|||
|
|
padding-left : 20px;
|
|||
|
|
}
|
|||
|
|
.error li {
|
|||
|
|
list-style : square;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* exemples de ceux que j'ajoute souvent */
|
|||
|
|
.left { float: left; margin-right : 1em; }
|
|||
|
|
.right { float: right; margin-left : 1em; }
|
|||
|
|
.center { margin-left : auto; margin-right : auto; }
|
|||
|
|
.left-text { text-align : left; }
|
|||
|
|
.right-text { text-align : right; }
|
|||
|
|
.center-text { text-align : center; }
|
|||
|
|
.little-text { font-size : .8em;}
|
|||
|
|
.little-upper-text { font-size : .8em; text-transform : uppercase; }
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* ------------------------------------------------------------
|
|||
|
|
11. PAGES SPECIFIQUES
|
|||
|
|
j'indique le marqueur du body, a completer pour cibler
|
|||
|
|
plus precisement (cf l'exemple ci-dessus pour les tags)
|
|||
|
|
------------------------------------------------------------- */
|
|||
|
|
|
|||
|
|
.dc-home { }
|
|||
|
|
.dc-post { }
|
|||
|
|
.dc-categories { }
|
|||
|
|
.dc-category { }
|
|||
|
|
.dc-archive { }
|
|||
|
|
.dc-archive-month { }
|
|||
|
|
.dc-tags { }
|
|||
|
|
.dc-tag { }
|
|||
|
|
.dc-404 { }
|
|||
|
|
.dc-search { }
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* ---------------------------------------------------
|
|||
|
|
12. ET POUR FINIR NE PAS OUBLIER LES CLEARERS
|
|||
|
|
ici ceux le plus souvent necessaires
|
|||
|
|
--------------------------------------------------- */
|
|||
|
|
.post, .post-content, .footnotes, .attachments,
|
|||
|
|
.post-info-co, #comments, #footer {
|
|||
|
|
clear:both;
|
|||
|
|
}
|