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*/
