Le bureau de Corinne:LesChangementsDansLaCSS

Retour vers CoRinne et VeRo >> WikiNi >> MiseAJourWikini

Les changements dans la CSS

(26 novembre 2004)

Voici la CSS telle qu'elle se présente maintenant (avec le passage à la version 0.4.3) :

j'ai changé le "background" à chaque endroit où il apparaît dans la css (en recopiant la formule tirée du Wikini mst)
j'ai changé le "soulignement" des liens de navigation (color:#006; background-color: transparent; text-decoration:none;border-bottom: 1px #006 dotted;)
j'ai changé les couleurs des liens et des textes
j'ai tenté d'insérer un menu à gauche, mais ça n'a pas marché

body { margin : 10px;
	padding : 0px;
font-family : Verdana,Arial,Geneva,Helvetica,sans-serif;
font-size : 12px;
	background: #f2f0f0 url("images/fond.jpg")  fixed 0 0;
color : #557;
 }

body, p, td, li, input, select, textarea { font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.3; }
h1, h2, h3, h4, h5 { margin: 0px; padding: 0px; }


a:link{color: 	 	#333399; background-color: transparent;text-decoration:none;border-bottom: 1px #006 dotted;}
a:visited{color:  	#333399; background-color: transparent; text-decoration:none;border-bottom: 1px #006 dotted;}
a:hover {color: #ff0032; background-color: transparent; text-decoration:none; } 

body, p, td, li, input, select, textarea { font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif; font-size: 13px; }
h1, h2, h3, h4, h5 { margin: 0px; padding: 0px; }
ul { margin-top: 0px; padding-top: 0px; padding-bottom: 0px; list-style-image: url(puce.gif); list-style-type: circle}
ol { margin-top: 0px; padding-top: 0px; padding-bottom: 0px;}
form { margin: 0px; padding: 0px; }
tt { color: Navy; }
hr { border: 0px; color: Black; /* Internet Explorer */ background-color: Black; height: 1px; }


.wiki_name { float: left; margin: 0px 15px 0px 10px; font-size: 150%; }
.page_name { font-size: 150%; }

.error { color: #CC3333; font-weight: bold; }
.indent { margin-left: 40px; }
.additions { color: #008800; }
.deletions { color: #880000; }
.add { font-weight: bold; color: #c00; text-decoration: underline; }
.del { font-style: italic; color: #c00; text-decoration: line-through; }
.header { padding: 2px; padding-top: 0px }
.page { background: #f9f4f4 url("images/fond2.jpg")  fixed 0 0; 
	 padding: 10px; border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #9c9ec9;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #9c9ec9;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #9c9ec9;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #9c9ec9;
}
.page_haut { background: #f9f4f4 url("images/fond2.jpg")  fixed 0 0; 
	 padding: 10px; border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #9c9ec9;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #9c9ec9;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #9c9ec9;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #9c9ec9;
}
.prev_alert { background-color: red; color: white; font-size: 1.7em; font-weight: bold; margin-bottom: 5px; }
.edit { background: #f9f4f4 url("images/fond2.jpg")  fixed 0 0; 
	width: 99%; 
	height: 400px; 
}
.footer { background: #f9f4f4 url("images/fond2.jpg")  fixed 0 0; 
	 padding: 10px; border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #9c9ec9;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #9c9ec9;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #9c9ec9;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #9c9ec9; }
.code { background: #f9f4f4 url("images/fond2.jpg")  fixed 0 0;
	border: solid #9c9ec9 2px; 
	font-family: 'Courier New', Courier; 
	color: black; 
	font-size: 10px; 
	width: 99%; 
	height: 400px; 
	overflow: scroll; 
	padding: 3px; }
.revisioninfo { color: #AAAAAA; padding-bottom: 20px; }

.commentsheader { background: #f9f4f4 url("images/fond2.jpg")  fixed 0 0; padding: 2px 10px; 

	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #9c9ec9;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #9c9ec9;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #9c9ec9; }
.comment { background: #f9f4f4 url("images/fond2.jpg")  fixed 0 0;  padding: 10px; 
  	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #9c9ec9;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #9c9ec9;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #9c9ec9;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #9c9ec9; }
.commentinfo { color: #AAAAAA; }
.commentform { background-color: #EEEEEE; padding: 10px; border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC }

.copyright { font-size: 11px; color: #AAAAAA; text-align: right; }
.copyright A { color: #AAAAAA; }
.searchbox { background: #f9f4f4 url("images/fond2.jpg")  fixed 0 0; 
	 border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #9c9ec9;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #9c9ec9;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #9c9ec9;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #9c9ec9; padding: 0px; margin: 0px; }
.debug { font-size: 11px; color: #888888; }

.hr_clear { clear: both; visibility: hidden; }
.include_right { float: right; width: 17%; } /* bloc flotant à droite */
.include_left { float: left; width: 17%; } /* bloc flotant à gauche */
.include_solid_border { border: solid; padding: 2px; } /* encadré noir */
.include_gray_background { background-color: #DDDDDD; } /* fond gris */
.include_small_fonts { font-size: 0.8em; } /* petites polices */
.include_big_fonts { font-size: 1.2em; } /* grandes polces */
.include_height10em { height: 10em; overflow: scroll; } /* boite de 10em de hauteur, avec ascenseur */
.include_height15em { height: 15em; overflow: scroll; }
.include_height30em { height: 30em; overflow: scroll; }
.include_height60em { height: 60em; overflow: scroll; }

.trail_table { line-height: 30px;}
.trail_button { color: #993333; }

Pour comparaison, telle était la css avec la première version Wikini 0.1.1.0.3

BODY { margin : 10px; padding : 0px; font-family : Verdana,Arial,Geneva,Helvetica,sans-serif; 
font-size : 12px; background: #f2f0f0 url("images/fond.jpg") fixed 0 0; color : #557; } BODY, P, TD, 
LI, INPUT, SELECT, TEXTAREA { font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, 
Helvetica, sans-serif; font-size: 13px; line-height: 1.3; } H1, H2, H3, H4, H5 { margin: 0px; padding: 
0px; } A { color: #3737A4; font-weight: bold} UL { margin-top: 0px; margin-bottom: 0px; 
padding-top: 0px; padding-bottom: 0px; } OL { margin-top: 0px; margin-bottom: 0px; padding-top: 
0px; padding-bottom: 0px; } FORM { margin: 0px; padding: 0px; } tt { color: Navy; } .wiki_name { 
font-size:150%; background-image: url:"img src="http://www.bourgnon.net/Wikini_logo.jpg"; 
float: left; margin: 0px 15px 0px 10px; font-size: 200%; } .page_name { font-size: 150%; } .error { 
color: #CC3333; font-weight: bold; } .indent { margin-left: 40px; } .additions { color: #008800; } 
.deletions { color: #880000; } .add { font-weight: bold; color: #c00; text-decoration: underline; } .del 
{ font-style: italic; color: #c00; text-decoration: line-through; } .header { padding: 10px; padding-top: 
0px } .page { background: #f9f4f4 url("images/fond2.jpg") fixed 0 0; padding: 10px; 
border-left-width: 1px; border-left-style: solid; border-left-color: #9c9ec9; border-right-width: 1px; 
border-right-style: solid; border-right-color: #9c9ec9; border-bottom-width: 1px; border-bottom-style: 
solid; border-bottom-color: #9c9ec9; border-top-width: 1px; border-top-style: solid; border-top-color: 
#9c9ec9;; } .prev_alert { background-color: red; color: white; font-size: 1.7em; font-weight: bold; 
margin-bottom: 5px; } .edit { width: 100%; height: 400px; } .footer { background: #f9f4f4 
url("images/fond2.jpg") fixed 0 0; padding: 5px 10px; border-left-width: 1px; border-left-style: solid; 
border-left-color: #9c9ec9; border-right-width: 1px; border-right-style: solid; border-right-color: 
#9c9ec9; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #9c9ec9; } 
.code { background: #f9f4f4 url("images/fond2.jpg") fixed 0 0; border: solid #9c9ec9 2px; 
font-family: 'Courier New', Courier; color: black; font-size: 10px; width: 99%; height: 400px; 
overflow: scroll; padding: 3px; } .revisioninfo { color: #AAAAAA; padding-bottom: 20px; } 
.commentsheader { background: #f9f4f4 url("images/fond2.jpg") fixed 0 0; padding: 2px 10px; 
border-left-width: 1px; border-left-style: solid; border-left-color: #9c9ec9; border-right-width: 1px; 
border-right-style: solid; border-right-color: #9c9ec9; border-bottom-width: 1px; border-bottom-style: 
solid; border-bottom-color: #9c9ec9; } .comment { background: #f9f4f4 url("images/fond2.jpg") fixed 
0 0; padding: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: #9c9ec9; 
border-right-width: 1px; border-right-style: solid; border-right-color: #9c9ec9; border-bottom-width: 
1px; border-bottom-style: solid; border-bottom-color: #9c9ec9; border-top-width: 1px; 
border-top-style: solid; border-top-color: #9c9ec9; } .commentinfo { color: #121237; } .commentform 
{ background: #f9f4f4 url("images/fond2.jpg") fixed 0 0; border-left-width: 1px; border-left-style: 
solid; border-left-color: #9c9ec9; border-right-width: 1px; border-right-style: solid; border-right-color: 
#9c9ec9; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #9c9ec9; 
border-top-width: 1px; border-top-style: solid; border-top-color: #9c9ec9; padding: 10px; } .copyright 
{ font-size: 11px; color: #3737A4; text-align: right; } .copyright A { color: #9B76D1; } .searchbox { 
background: #f9f4f4 url("images/fond2.jpg") fixed 0 0; border-left-width: 1px; border-left-style: solid; 
border-left-color: #9c9ec9; border-right-width: 1px; border-right-style: solid; border-right-color: 
#9c9ec9; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #9c9ec9; 
border-top-width: 1px; border-top-style: solid; border-top-color: #9c9ec9; padding: 0px; margin: 0px; 
} .debug { font-size: 11px; color: #888888; } 
Le Wikini de Corinne et Véro