La modification du fichier CSS s'adresse à des utilisateurs avancés, mais il est possible de commencer assez facilement en changeant quelques couleurs par exemple.
1 - Il faut d'abord être en mode avancé (voir sous/menu page d'accueil) puis aller dans > Design > sous menu > Modifier le CSS.
Vous avez alors accès au fichier complet qui regroupe toutes les caractéristiques!
Chaque modèle de design pré configuré dispose de sa propre feuille de style, celle que vous ouvrez correspond donc au modèle que vous avez sélectionné dans le menu Design.
Un conseil à suivre, faites un copier/coller de ce fichier complet et enregistrez le sur votre PC comme un fichier texte (.txt)! Vous pourrez le remettre en cas de problème.
Des exemples pour faire simple:
h1 { color: #3366CC; font-size: 20px; } /*titre des pages*/
(color: #3366CC; correspond à la couleur du titre du blog (en texte))
a { text-decoration:underline; color:#3366CC; font-size:100%; } /* liens des pages */
(color:#3366CC; correspond à la couleur d'un lien)
a:hover { text-decoration:none; color:#666666 } /* liens survoles*/
(color:#666666; corrspond à la couleur d'un lien survolé avec la souris)
/* ------------------entete ---------------------*/
#header { text-align:left; background-color:#CC3300; border:0px none; margin-bottom:5px; position:relative;} /*div contenant l'entete du blog*/
text-align:left; = le titre sera aligné à gauche
background-color:#CC3300; = la couleur de fond du header (ici en rouge)
Ainsi de suite, chaque élément de la page est défini ainsi et regroupé par ensemble:
Structure ( général)
Box (les blocs modules dans les colonnes)
Entête (la partie haute du blog)
Bas de page (le pied du blog)
Articles (l'article dans la partie centrale)
etc...
Certains changements vont s'appliqués à l'ensemble du blog et d'autres à seulement une partie en fonction de la modification.
Les couleurs sont toujours définies par les 6 chiffres/lettres qui correspondent à chaque couleurs web.
par exemple: #000000 = noir / #FFFFFF = blanc / #CC0000 = rouge / #3399FF = bleu etc....
Pour changer une couleur, il suffit donc de choisir dans la palette web et de changer le code de la couleur dans le CSS que ce soit pour du texte (color:#000000; ) ou un fond (background-color:#CC3300;)
D'autres éléments sont définis dans le CSS comme les dimensions (en px ou %), les positionnements, les largeurs, les marges, les bordures... c'est un peu plus complexe et s'adresse à ceux qui veulent aller plus loin!
Il y a beaucoup de ressources sur le net sur le sujet CSS et HTML!
Un lien parmis tant d'autre sur les CSS
Un autre sur les propriétés CSS
Tutos Alsacréations, css et +
Les couleurs web:
| FFFFFF | FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 |
| FFCCFF | FFCCCC | FFCC99 | FFCC66 | FFCC33 | FFCC00 |
| FF99FF | FF99CC | FF9999 | FF9966 | FF9933 | FF9900 |
| FF66FF | FF66CC | FF6699 | FF6666 | FF6633 | FF6600 |
| FF33FF | FF33CC | FF3399 | FF3366 | FF3333 | FF3300 |
| FF00FF | FF00CC | FF0099 | FFFFFF | FF0033 | FF0000 |
| CCFFFF | CCFFCC | CCFF99 | CCFF66 | CCFF33 | CCFF00 |
| CCCCFF | CCCCCC | CCCC99 | CCCC66 | CCCC33 | CCCC00 |
| CC99FF | CC99CC | CC9999 | CC9966 | CC9933 | CC9900 |
| CC66FF | CC66CC | CC6699 | CC6666 | CC6633 | CC6600 |
| CC33FF | CC33CC | CC3399 | CC3366 | CC3333 | CC3300 |
| CC00FF | CC00CC | CC0099 | CC0066 | CC0033 | CC0000 |
| 99FFFF | 99FFCC | 99FF99 | 99FF66 | 99FF33 | 99FF00 |
| 99CCFF | 99CCCC | 99CC99 | 99CC66 | 99CC33 | 99CC00 |
| 9999FF | 9999CC | 999999 | 999966 | 999933 | 999900 |
| 9966FF | 9966CC | 996699 | 996666 | 996633 | 996600 |
| 9933FF | 9933CC | 993399 | 993366 | 993333 | 993300 |
| 9900FF | 9900CC | 990099 | 990066 | 990033 | 990000 |
| 66FFFF | 66FFCC | 66FF99 | 66FF66 | 66FF33 | 66FF00 |
| 66CCFF | 66CCCC | 66CC99 | 66CC66 | 66CC33 | 66CC00 |
| 6699FF | 6699CC | 669999 | 669966 | 669933 | 669900 |
| 6666FF | 6666CC | 666699 | 666666 | 666633 | 666600 |
| 6633FF | 6633CC | 663399 | 663366 | 663333 | 663300 |
| 6600FF | 6600CC | 660099 | 660066 | 660033 | 660000 |
| 33FFFF | 33FFCC | 33FF99 | 33FF66 | 33FF33 | 33FF00 |
| 33CCFF | 33CCCC | 33CC99 | 33CC66 | 33CC33 | 33CC00 |
| 3399FF | 3399CC | 339999 | 339966 | 339933 | 339900 |
| 3366FF | 3366CC | 336699 | 336666 | 336633 | 336600 |
| 3333FF | 3333CC | 333399 | 333366 | 333333 | 333300 |
| 3300FF | 3300CC | 330099 | 330066 | 330033 | 330000 |
| 00FFFF | 00FFCC | 00FF99 | 00FF66 | 00FF33 | 00FF00 |
| 00CCFF | 00CCCC | 00CC99 | 00CC66 | 00CC33 | 00CC00 |
| 0099FF | 0099CC | 009999 | 009966 | 009933 | 009900 |
| 0066FF | 0066CC | 006699 | 006666 | 006633 | 006600 |
| 0033FF | 0033CC | 003399 | 003366 | 003333 | 003300 |
| 0000FF | 0000CC | 000099 | 000066 | 000033 | 000000 |
| FFFFFF | EEEEEE | DDDDDD | CCCCCC |
| BBBBBB | AAAAAA | 999999 | 888888 |
| 777777 | 666666 | 555555 | 444444 |
| 333333 | 222222 | 111111 | 000000 |
>> menu "Design" (choix look du blog)
Avec possiblité de visualiser l'aspect en cliquant sur la loupe d'un modèle, puis de le sélectionner en dessous! Le changement de modèle s'applique à l'ensemble du blog.
D'autres modèles devraient venir enrichir le choix à l'avenir, à suivre...
Je rappelle que le CSS peut être également modifié manuellement (texte, couleurs, mise en forme...) !
Il faut d'abord passer en mode avancé (>> sous menu page accueil admin), puis dans "Design" >> "Sous menu/Modifier le CSS" !
Cette manipulation s'adresse toute fois aux utilisateurs plus avertis. Si vous souhaitez essayer, faites d'abors un copier/coller du ficher CSS complet dans un éditeur de texte, vous pourrez ainsi le remettre en cas d'erreur!
Si vous avez des questions sur le sujet, laissez des commentaires ci-dessous!
Menu "modules" > "en-tête" > "personnaliser ton en-tête":
1- Il faut d'abord préparer une image qui servira de bandeau.
A faire sur votre ordinateur avec un logiciel de retouche d'images ou de dessin!
Une fois réalisée, enregistrez l'image en jpg (ou gif ou png) en l'optimisant! C'est important afin de réduire le temps de téléchargement! Certains logiciels permettent de le faire directement!
Sinon, limitez la résolution et les dimensions pour quelles correspondent à la taille du blog (exemple 500px de large x 100px en 72dpi)
2- Retour dans la gestion des "modules"
> "En-tête" > "clique ici pour personnaliser ton en-tête" > Modifier l'en-tête du blog
Editeur Image: "mettre une image" > "Charger une image" : Il suffit de charger l'image en la sélectionnant sur le PC et valider!
Une fois dans l'éditeur, l'image peut-être alignée à gauche, centrée ou à droite...
Vous pouvez également mettre une couleur de fond.
Il est aussi possible d'avoir déjà son image un dossier "images" en passant par le menu "Fichiers"!
Accessible dans le menu "Design" ou "Look du blog" avec deux possibilités:
1 - Facile: En selectionnant un design pré-défini.
2 - Expert: En personnalisant la feuille de style (en mode avancé, voir menu page d'accueil)
Pour débuter choisisez plutôt parmis un modèle de design pré-défini. Il y en aura s'en doute d'autres à l'avenir.
CSS:
Il faut savoir qu'un changement de modèles change en fait le CSS (... la feuille de style, en français!)!
Le CSS défini tous les critères d'apparence, que ce soit les polices, les liens, les couleurs, les fonds, les cadres, le positionnement... etc etc!
Vous trouverez beaucoup d'aide en ligne sur le web au sujet des CSS, il suffit de chercher un peu!!
Pour ceux qui veulent aller plus loin dans l'apparence de leur blog, il faudra donc se pencher sur le CSS en allant dans le sous menu "Modifier mon CSS" ! (Il faut d'abord passer en mode "avancé", voir menu de droite de l'accueil du tableau de bord)!
Sans forcément tout changer, vous pourrez facilement modifier les couleurs des liens, des titres, du fond, du header... c'est assez simple à condition de regarder en détail!!
Histoire de ne pas partir de rien, faites un tour sur La.faq.over-blog.com >> CSS , un blog d'entre aide sur Over-Blog et qui regroupe plein d'astuces et d'explications, comme l'outil est le même qu'ici, ou à quelques détails près, il sera facile d'appliquer tout ça!
A titre d'exemple, voici ci-dessous un exemple de CSS détaillé!
Un conseil, avant de modifier votre feuille de style, faites un copier/coller dans un éditeur de texte histoire de pouvoir remettre l'original en cas de problème!
La feuille peut être éditée et modifiée dans un éditeur type WYSIWYG ou CSS sur votre PC avant de la remettre en ligne!
Les textes entre /*---- ----*/ expliquent à quoi correspondent les différents éléments.
(quelques exemples en gras)
Les infos entre crochets {...} sont les différents attributs qui s'appliquent aux éléments.
Les couleurs sont de type hexadécimal, ex: #FFFFFF (blanc) #000000 (noir)...
/*---------------- elements principaux ---------------*/
/*---------------- les styles ci-dessous affectes l'ensemble des éléments de la page n'ayant pas de style propre ou hérité --------------*/
body { margin:0px; padding:0px; background-color:#F6F6F6; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small;}
h1 { font-size: 20px; } /*titre des pages*/
h2 { color: #5B6B7C; font-size: 15px; }
h3 { color: #5B6B7C; font-size: 12px; }
a { text-decoration:underline; color:#5B6B7C; font-size:110%; } /* liens des pages */
a:hover { text-decoration:none; color:#5B6B7C} /* liens survoles*/
legend { color:#5675A4; padding-left:5px; padding-right:5px;}
li { list-style-type:none; } /*listes non ordonnees*/
img { border:0px solid #FFFFFF; } /* images */
input { border:solid 1px #D8D7D7; font-size:100%; background-color:#FFFFFF; color:#5675A4; } /* boutons, champs texte */
/* --------------- Structure -------------------- */
/* les styles ci dessous definissent l'aspect du blog quelque soit la structure (2-3 colonnes...)*/
#centrePage { width:100%;}/*div contenant la page sert à centrer le blog*/
#global { margin-left:auto; margin-right:auto; position:relative;}/*colonne principale, contient toutes les colonnes du blog*/
#main { margin-bottom:5px; background-color:#FFFFFF; border:1px solid #DFDFDF;}/*colonne principale contenant les articles*/
#content { overflow:hidden; margin:0px;}/*contenu de la colonne main*/
#rightnav { }/*colonne de droite*/
#leftnav { }/*colonne de gauche*/
/********************************************************************************************************/
/* GESTION DU POSITIONNEMENT SELON LES DIFFERENTES STRUCTURES */
/*------------------------------------------------------------------------------------------------------*/
/*/! Attention la modification des informations ci-dessous peut entrainer la déformation de votre blog */
/********************************************************************************************************/
/*~~~~~~~~~~ structure 1 colonne principale + 1 colonne à droite~~~~~~~~~~*/
#deuxColDroite #main { position:relative; float:left; overflow:hidden; width:595px; }/*colonne principale*/
#deuxColDroite #rightnav { position:relative; float:right; margin-bottom:5px; width:195px;}/*colonne de droite*/
/*~~~~~~~~~~ structure 1 colonne principale + 1 colonne à gauche~~~~~~~~~~*/
#deuxColGauche #main { position:relative; float:right; overflow:hidden; width:595px; }/*colonne principale*/
#deuxColGauche #leftnav { position:relative; float:left; margin-bottom:5px; width:195px;}/*colonne de gauche*/
/*~~~~~~~~~~ structure 1colonne à droite + 1 colonne principale + 1 colonne à gauche~~~~~~~~~~*/
#troisCol #main { position:relative; float:left; overflow:hidden; width:400px; margin-left:5px;}/*colonne principale*/
#troisCol #rightnav { position:relative; float:right; margin-bottom:5px; width:195px;}/*colonne de droite*/
#troisCol #leftnav { position:relative; float:left; margin-bottom:5px; width:195px;}/*colonne de gauche*/
/**************************************************************************************************************/
/* ------------------- Box -------------------- */
/*definie le style des modules*/
.box { background-color:#FFFFFF; border:1px solid #000000; position:relative; margin:0px; padding:0px; margin-bottom:10px; border-color:#000000; border-style:solid; border-width:1px; }
.box h2 { color:#000000; margin-left:10px; margin-right:10px; margin-top:0px; margin-bottom:0px; } /*titre de la boite*/
.box-titre { position:relative; background-color:#FDEBC1; border-width:0px 0px 0px 0px; border-color:#000000; border-style:solid; padding:0px; text-align:center; }/*div contenant le titre*/
.box-content { overflow:auto; padding:2px 5px; }/*contenu du module*/
.box-content p { margin:5px 0px 5px 15px; padding:0px; }/*paragraphe*/
.box-content ul { margin:5px 0px 5px 15px; padding:0px; }/*liste*/
.box-content li { list-style:square; color:#b6b6b6; margin:5px; padding:0px; }/*element d'une liste*/
/* ------------------entete ---------------------*/
#header { text-align:center; border:1px solid #666666; margin-bottom:5px; position:relative;}/*div contenant l'entete du blog*/
#top { padding:5px; background-color:#FDEBC1; color:#FFFFFF; }/*entete du blog*/
#top h1 { padding:0px; margin:0px; color:#FFFFFF;}/*titre du blog /! modifiable*/
.topLien{text-decoration:none;}/*lien de l'entête vers la home du blog /! modifiable*/
.topLien:hover {text-decoration:underline;}/*lien de l'entete vers la home du blog survolé /! modifiable*/
/* ---------------------Bas de page----------------*/
#footer { margin-top:10px; background-color:#FFFFFF; position:relative; border:1px solid #000000; }/*pied de page du blog*/
#footer p { margin:0px; padding: 10px; }/*paragraphes du pied de page*/
.basLien{ text-decoration:underline;}
.basLien:hover { text-decoration:underline; }
/* ---------- Recherche ----------------------- */
#Recherche { padding:0px; }
#WForm { margin:0px; border:solid 1px #D8D7D7; padding:10px; background: #F3F7FC; }
#WForm input { border:solid 1px #D8D7D7; font-size:100%; background:#f4f4f4; color:#5675A4; text-align:center;}
#WForm input:hover { border:solid 1px #5675A4; background:#fff; }
.RNum { font-weight:bold; }/*numero du resultat*/
.RDesc { padding:10px; }/*resume du resultat (premieres lignes de l'article)*/
.ROut { font-style:italic; color:#A0B8CB; }/*domaine auquel appartient le resultat*/
.RSize { color:#BFBFBF; }
a.RTitle { text-decoration:none; color:#00275E; }/*titre du resultat*/
a.RTitle:hover { text-decoration:none; color:#834141; }/*titre du resultat survole*/
#GGResults { text-align:left; margin:0px; color:#000000; }/*nombre de resultats de la recherche*/
.Result1 { padding:4px; background:#F7FAFD; }/*resultat style 1*/
.Result2 { padding:4px; background:#FBFBFB; }/*resultat style 2*/
/*------------------- Articles ----------------------------------*/
.article { margin-top:0px; padding:0px; margin-bottom:5px; }/*style general d'un article (entete texte et pied)*/
.article p { padding:0px 0px 5px 5px ;margin:0px; }/*tous les paragraphes composant un article*/
.contenuArticle { margin:1px;}/*style du texte d'un article*/
.Date { margin-right:10px;}/*style de la date affichee dans l'entete de l'article*/
.Option { padding:3px 0px; border-top:1px solid #808080; width:100%; text-align:right; font-size:85%; color:#808080;}/*style du pied de l'article (publie par, categorie, commentaire,recommander)*/
.barreHautArticle {padding:0px 0px 5px 0px; margin:0px; width:100%; background-color: #C9E3ED;}/*entete du blog contient la date*/
.categorieArticle {} /*categorie de l'article*/
.categorieArticle a { text-transform:lowercase;}/*lien sur la categorie de larticle*/
.categorieArticle a:hover { text-transform:lowercase;}/*lien survole sur la categorie de larticle*/
.titreArticle { text-decoration:none;}/*lien sur le titre de l'article*/
.titreArticle:hover { text-decoration:underline;}/*lien survole sur le titre de l'article*/
#articleSeul {} /*style d'un article lors de l'affichage de l'article avec commentaires/trackbacks*/
/*--------------------Liste des articles-------------------------*/
.listArticles { margin-top:0px; margin-bottom:10px; border:1px solid #666666; background-color:#FFFFFF;}/*style d'un article*/
.resumeArticle { background-color:#F9F8FA; border-top:1px solid #F4F4F4;}/*style du resume d'un article*/
/*--------------------Commentaires---------------------------- */
.h2commentMessage {color:#3366CC;}
.comment { }
.comment hr { }
.linkcomment { font-size:130%; color:#0099FF;}/*lien d'ajout d'un commentaire*/
.commentMessage { padding:5px; border:1px dotted #999999; background-color:#FCFEFE; margin:0px;}/*texte d'un commentaire*/
.commentOption { text-align:right; font-size:85%; color:#808080; margin-bottom:10px;}/*infos sur le commentaire auteur site...*/
/*---------------formulaire de saisie d'un commentaire--------------*/
#formComment label { width:70px; } /*texte associé aux champs de sasie*/
#formComment input { background-color:transparent; border:1px solid #000000;}/* boutons, champs texte */
#formComment textarea { background-color:transparent; border:1px solid #000000;}/*zone de saisie de texte*/
/*-------------------trackback----------------------------------*/
#addTrackback { border:1px dotted #999999; background:#FFF8D7; padding:5px;} /* cadre donnant l'adresse de trackback*/
.affTrackback { padding:5px; border:1px dotted #999999; background-color:#FCFEFE; margin-bottom:10px;}/**/
.affTrackback h2 { color:#FDEBC1;}/**/
.linkTrackback { font-size:130%; color:#0099FF;}/*lien vers la fenetre d'ajout de trackback */
.h2Trackback { color:#3366CC;}/**/
/*-----------------fenetre d'ajout d'un trackback---------------------*/
#divTrackBack{}/*style general*/
#divTrackBack input { background-color:transparent; border:1px solid #000000;}/*champs de texte bouton*/
#divTrackBack textarea { background-color:transparent; border:1px solid #000000;}/*zone de saisie de texte*/
/*-------------------fenetre de recommandation---------------------------*/
#divRecommander {}/*style general*/
#divRecommander span { font-size:larger; color:#FFCCCC;}
#divRecommander legend { font-size:larger;}/*texte du cadre*/
#divRecommander fieldset { padding:3px; margin:5px; background:#F9F8FA;}/*conteneur des champs*/
#divRecommander input { background-color:transparent; border:1px solid #000000;}/*champs de texte bouton*/
#divRecommander textarea { background-color:transparent; border:1px solid #000000;}/*zone de saisie de texte*/
/*-----------------Newsletter-----------------------------------*/
#divNewsletter h2 { text-align:center; font-size:12pt;}/*titre de la page*/
#divNewsletter input { background-color:transparent; border:1px solid #000000;}/*champs de texte checkbox*/
#divNewsletter .newsletter {}/*texte des checbox*/
* ---------------------Calendrier--------------------------------- */
.calendarTop1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; color:#FFFFFF; font-weight: bold; background-color:#F92E00;} /*entete*/
.calendarToday1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color:#FFFFFF; background-color:#F92E00;} /* Aujourd'hui */
.calendarDays1 { width:50px; height:15px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; color:#000000; background-color: #FFFFFF; text-align:center;}
.calendarHeader1{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; background-color:#F92E00; color:#FFFFFF;} /* lettre de la semaine */
.calendarTable1 { background-color:#F4F4F4;border:0px solid #5675A4} /* contour du calendrier */
/*-----------------------Pagination-------------------------*/
.pagination { color:#000000; }
.pagination a {} /*Liens*/
.pagination b{ } /*Page courante*/
/*------------------------Divers-----------------------------*/
.cleaner {clear:both;}
/*-----------------------elements commun a l'accueil et aux pages d'un album------------------------------*/
#bodyAlbum{ background-color:#FFFFFF;}/*style general de la page de l'album*/
#generalAbum{width:100%;}/*div contenant tout l'album peut etre utilise à la place de bodyAlbum*/
.topAlbum{}/*entete de l'album contient l'entete du blog*/
#enteteAlbum{ width:100%; border:1px solid #222222; background-color:#666666; font-size:130%; color:#FFCC99;}/*ligne sous l'entete du blog contient les liens vers les albums*/
#enteteAlbum a {color:#FFFFFF; text-decoration:none;}
#enteteAlbum a:hover {color:#FFFFFF; text-decoration:underline;}
.lienAlbum {text-decoration:none;}
.lienAlbum:hover{text-decoration:underline;}
#piedAlbum{ width:100%; text-align:center; margin-top:5px;}/*pied de page de l'album*/
.h2Album { text-align:center; font-size:12pt; color:#000000;}/*titre de l'album/la photo*/
.topLienAlbum{text-decoration:none;}/*lien vers un album*/
.topLienAlbum:hover{}/*lien survole*/
/*-------------------------------Accueil album------------------------*/
#centreAccAlbum{}/*contient les thumbnails de l'accueil de l'album (non utilise)*/
.AccAlbum{ text-align:center;}/*contient les thumbnails de l'accueil de l'album*/
.thumbAccAlbum { display:inline; margin:5px;}/*div contenant une miniature*/
.thumbAccAlbumimg { padding:5px 0px;}/*miniature*/
/*-----------------------Album photo--------------------------*/
.nomPhotoAlbum { font-size:large; color:#FFCC66; text-align:center;}/*nom de la photo affichée*/
.quickNavAlbum{margin:0px; padding:0px; background-color:#FFCC99; border:1px groove #666666; width:100%; text-align:center;}/*liens de navigation rapide (precedent suivant retour)*/
.quickNavAlbum a {text-decoration:none;} /*liens de la navigation rapide*/
.quickNavAlbum a:hover {text-decoration:underline;}/*liens survole de navigation rapide*/
.precAlbum{ float:left; text-decoration:none; position:relative; padding:0px; margin:0px;}/*liens et titre photo precedente*/
.suivAlbum{ float:right; text-decoration:none; position:relative; padding:0px; margin:0px;}/*liens et titre photo suivante*/
.retourAlbum{ position:relative; text-decoration:none; padding:0px; margin:0px auto; width:6em;}/*liens de retour album photo*/
#centrethumbsAlbum{ background-color: #666666;}/*contient les miniatures de l'accueil de l'album (non utilise)*/
.thumbsAlbum {background-color: #666666; padding:2px; width:550px; margin-right:auto; margin-left:auto;}/*miniatures de l'album contient toutes les miniautures*/
.thumbAlbum { display:inline; margin:3px;}/*div contenant une miniature*/
.thumbAlbum img { border:1px solid #FFFFFF;}/*miniature*/
.thumbCouranteAlbum { display:inline; margin:3px;}/*div contenant la miniature de la photo courante*/
.thumbCouranteAlbum img { border:3px dashed #FFCC99;}/*miniature de la photo courante*/
#photo{ text-align:center; }/*div contenant la photo courante*/
#photo img {margin: 0px auto; border:1px solid #333333; border-bottom:0px solid #FFFFFF;}/*photo courante*/
