Overblog
Suivre ce blog Administration + Créer mon blog
1 avril 2009 3 01 /04 /avril /2009 15:00

Gestion des designs - Personnaliser son thème

Après beaucoup d'efforts, le staff d'over-blog va prochainement mettre à jour la gestion des thèmes sur les blogs. Au menu en avril: nouvel affichage dans l'administration, possibilité de personnaliser sans modifier le CSS, et modifications des fenetres popup sur les blogs.

Cette mise à jour de l'administration des thèmes sera accompagnée (avec un léger décalage dans le temps) par l'arrivée de nouveaux designs.


Choix d'un thème
Pour choisir un thème, la liste est plus claire. On voit dorénavant la liste des designs. Pour voir les variations d'un thème, il faut la choisir dans la liste proposée. Comme mes propos ne sont pas très clairs, petite caputre d'écran:


On remarque qu'on voit directement les possibilités de structures pour chaque design. On gagne également un clic pour sélectionner un thème, vu que tout se passe sur la page, et plus dans une fenêtre à part. En un mot, une page plus rapide à charger, et plus claire que l'actuelle.



Personnaliser son thème
Un nouvel onglet apparait dans la gestion des thèmes, il permet d'avoir un apeçu des couleurs de son blog et de les modifier directement, sans devoir modifier le CSS. Un exemple en image (qui part d'un design American Beauty):


Ce formulaire ne peut pas tout modifier (puisque certains designs ne sont pas concus de la même façon). voici la liste des éléments modifiables:
  • Couleur de fond du blog / Image de fond
  • Couleur, police et taille du titre
  • Couleur, police et taille des titres des articles et des pages
  • Couleur des fond des articles et des pages
  • Couleur, police et taille des articles et des pages (le contenu)
  • Couleur, police et taille du titre des modules
  • Couleur, police et taille des commentaires
  • Couleur, police et taille des réponses aux commentaires.
Notez qu'il peut y avoir une légère différence entre l'aperçu et la réalité (en particulier si vous avez modifié votre CSS)



Mode CSS
Un nouveau nom pour le relookage de cette partie. Elle est toujours réservée aux utilisateurs avertis, puisqu'elle nécessite des connaissances en CSS et/ou HTML. Au niveau des modifications:
  • Coloration syntaxique et numérotation des lignes sur la page "Original"
  • Suppression du css "global" pour faciliter la vie des bloggueurs: ceux qui comprennaient son utilité arriveront à gérer le nouveau système, et ceux qui ne comprenaient pas seront moins perdus.



Fenêtres sur les blogs
Les fenêtres du blog sont également repensées, avec quelques modifications pour les fenêtres "ajouter un commentaire", et  "recommander":
  • Impossibilité de changer le design de ces fenêtres. Cela permet de s'assurer que les visiteurs pourront toujours utiliser les formulaires, y compris après des erreurs de CSS. Cela règle également les problèmes de "largeurs" liés à certains designs.
  • Une meilleur gestion des problèmes lors de l'ajout de commentaires, avec des messages d'erreur en rouge, toujours lisibles.
  • Possibilité de recommander un article simultanément à 20 contacts. Pour le choix des contacts, il est possible d'accéder à sa liste de contact sur son compte hotmail, msn, yahoo, google...
  • Il est possible de recommander cet articles à ses amis sur Facebook, Twitter, Digg, Del.icio.us
Voici deux captures pour se rendre compte:

Et la page recommander:

Partager cet article
Repost0
Over-FAQ - dans Programmation & CSS
commenter cet article …
5 juillet 2007 4 05 /07 /juillet /2007 11:35

[v2.0] Choix de couleurs

Rien de plus compliqué que de choisir des couleurs pour son blog. Ce petit script va vous permettre de tester simultanément 4 couleurs: 2 couleurs pour les fonds et 2 couleurs pour les textes. (Sans oublier le noir et le blanc).  

Notes:
  •  
  • Il s'agit des 216 couleurs WEB standard.Rien ne vous empêche d'en mettre d'autres, mais elles ne seront pas forcément affichées de façon parfaitement identiques sur tous les ordinateurs.
  •  
  • Internet Explorer 6 bloque l'éxécution du script. vous pouvez soit l'autoriser, soit changer de navigateur (auquel cas je vous conseille Firefox 2)

Partager cet article
Repost0
Over-FAQ - dans Programmation & CSS
commenter cet article …
8 décembre 2005 4 08 /12 /décembre /2005 22:00

[v2.0] Vider le cache

Merci à info.over-blog.com

Le cache sert à optimiser le temps de chargement des pages..

Lors du passage sur un site, la première fois, le navigateur met les pages en cache sur l'ordinateur, et ensuite, affiche les pages.

A la visite suivante, il affiche directement ce qu'il avait stocké.
En théorie, il vérifie que les pages n'ont pas changé entre temps).

De temps en temps, les navigateurs ne fonctionnent pas parfaitement, et il faut vider le cache.
Sous Firefox >> Outils / options / vie privée / Vider le cache
Sous Firefox 2 >> Outils / Effacer mes traces / Cocher "Cache" / Valider
Sous Internet Explorer 6 >> Outils / Options internet / Supprimer les Fichiers
Sous Internet Explorer 7>> Outils > Supprimer > Supprimer les fichiers internet temporaires.


Cette technique a en plus l'avantage de supprimer des tas de fichiers inutiles de votre disque dur, libérant ainsi de l'espace libre :D


Pour vider le cache sur une page seulement, il faut afficher la page, et appuyer sur CTRL + F5.
Partager cet article
Repost0
Fabrice B. - dans Programmation & CSS
commenter cet article …
20 novembre 2005 7 20 /11 /novembre /2005 00:00

[v2.0] Modifier le CSS

Version 1:
Pour modifier le CSS, il faut aller dans design.
A droite, il faut cliquer sur le lien: "modifer le css".

Si ce lien n'apparaît pas, il faut passer en mode avancé.


Version 2:
Il faut aller dans Design, puis dans "mode avancé".
Partager cet article
Repost0
Fabrice B. - dans Programmation & CSS
commenter cet article …
8 septembre 2005 4 08 /09 /septembre /2005 00:00

[v2.0] Modèles

Les modèles permettent de mettre en page rapidement et facilement les blogs.
Exemples de modèle:

Modèle 1
Modèle 2

Modèle 3
Modèle 4

Petites notes pour jouer avec les modèles:
  • Pour changer de modèle, dans l'onglet Design, il faut choisir un nouveau modèle.
    • ATTENTION: toutes les "anciennes" modifications sur votre design seront perdues.
  • Une fois le modèle changé, vous pouvez évidemment modifier le css.

Partager cet article
Repost0
Fabrice B. - dans Programmation & CSS
commenter cet article …
22 juillet 2005 5 22 /07 /juillet /2005 00:00

[v2.0] Code couleurs

Pour choisir un code couleur, il faut savoir comment ils fonctionnent. Très simplement, c'est une suite de nombres qui donnent la composition en rouge, vert, bleu.

Un petit lien pratique vers un site listant toutes les couleurs possibles sur le web

Voici la table des couleurs les plus utilisées fourni par Francisek:


Palette standard des 216 couleurs Web
Avec codes HTML et composantes rgb
#000000
(0,0,0) 		#000033
(0,0,51) 		#000066
(0,0,102) 		#000099
(0,0,153) 		#0000CC
(0,0,204) 		#0000FF
(0,0,255)
#003300
(0,51,0) 		#003333
(0,51,51) 		#003366
(0,51,102) 		#003399
(0,51,153) 		#0033CC
(0,51,204) 		#0033FF
(0,51,255)
#006600
(0,102,0) 		#006633
(0,102,51) 		#006666
(0,102,102) 		#006699
(0,102,153) 		#0066CC
(0,102,204) 		#0066FF
(0,102,255)
#009900
(0,153,0) 		#009933
(0,153,51) 		#009966
(0,153,102) 		#009999
(0,153,153) 		#0099CC
(0,153,204) 		#0099FF
(0,153,255)
#00CC00
(0,204,0) 		#00CC33
(0,204,51) 		#00CC66
(0,204,102) 		#00CC99
(0,204,153) 		#00CCCC
(0,204,204) 		#00CCFF
(0,204,255)
#00FF00
(0,255,0) 		#00FF33
(0,255,51) 		#00FF66
(0,255,102) 		#00FF99
(0,255,153) 		#00FFCC
(0,255,204) 		#00FFFF
(0,255,255)
#330000
(51,0,0) 		#330033
(51,0,51) 		#330066
(51,0,102) 		#330099
(51,0,153) 		#3300CC
(51,0,204) 		#3300FF
(51,0,255)
#333300
(51,51,0) 		#333333
(51,51,51) 		#333366
(51,51,102) 		#333399
(51,51,153) 		#3333CC
(51,51,204) 		#3333FF
(51,51,255)
#336600
(51,102,0) 		#336633
(51,102,51) 		#336666
(51,102,102) 		#336699
(51,102,153) 		#3366CC
(51,102,204) 		#3366FF
(51,102,255)
#339900
(51,153,0) 		#339933
(51,153,51) 		#339966
(51,153,102) 		#339999
(51,153,153) 		#3399CC
(51,153,204) 		#3399FF
(51,153,255)
#33CC00
(51,204,0) 		#33CC33
(51,204,51) 		#33CC66
(51,204,102) 		#33CC99
(51,204,153) 		#33CCCC
(51,204,204) 		#33CCFF
(51,204,255)
#33FF00
(51,255,0) 		#33FF33
(51,255,51) 		#33FF66
(51,255,102) 		#33FF99
(51,255,153) 		#33FFCC
(51,255,204) 		#33FFFF
(51,255,255)
#660000
(102,0,0) 		#660033
(102,0,51) 		#660066
(102,0,102) 		#660099
(102,0,153) 		#6600CC
(102,0,204) 		#6600FF
(102,0,255)
#663300
(102,51,0) 		#663333
(102,51,51) 		#663366
(102,51,102) 		#663399
(102,51,153) 		#6633CC
(102,51,204) 		#6633FF
(102,51,255)
#666600
(102,102,0) 		#666633
(102,102,51) 		#666666
(102,102,102) 		#666699
(102,102,153) 		#6666CC
(102,102,204) 		#6666FF
(102,102,255)
#669900
(102,153,0) 		#669933
(102,153,51) 		#669966
(102,153,102) 		#669999
(102,153,153) 		#6699CC
(102,153,204) 		#6699FF
(102,153,255)
#66CC00
(102,204,0) 		#66CC33
(102,204,51) 		#66CC66
(102,204,102) 		#66CC99
(102,204,153) 		#66CCCC
(102,204,204) 		#66CCFF
(102,204,255)
#66FF00
(102,255,0) 		#66FF33
(102,255,51) 		#66FF66
(102,255,102) 		#66FF99
(102,255,153) 		#66FFCC
(102,255,204) 		#66FFFF
(102,255,255)
#990000
(153,0,0) 		#990033
(153,0,51) 		#990066
(153,0,102) 		#990099
(153,0,153) 		#9900CC
(153,0,204) 		#9900FF
(153,0,255)
#993300
(153,51,0) 		#993333
(153,51,51) 		#993366
(153,51,102) 		#993399
(153,51,153) 		#9933CC
(153,51,204) 		#9933FF
(153,51,255)
#996600
(153,102,0) 		#996633
(153,102,51) 		#996666
(153,102,102) 		#996699
(153,102,153) 		#9966CC
(153,102,204) 		#9966FF
(153,102,255)
#999900
(153,153,0) 		#999933
(153,153,51) 		#999966
(153,153,102) 		#999999
(153,153,153) 		#9999CC
(153,153,204) 		#9999FF
(153,153,255)
#99CC00
(153,204,0) 		#99CC33
(153,204,51) 		#99CC66
(153,204,102) 		#99CC99
(153,204,153) 		#99CCCC
(153,204,204) 		#99CCFF
(153,204,255)
#99FF00
(153,255,0) 		#99FF33
(153,255,51) 		#99FF66
(153,255,102) 		#99FF99
(153,255,153) 		#99FFCC
(153,255,204) 		#99FFFF
(153,255,255)
#CC0000
(204,0,0) 		#CC0033
(204,0,51) 		#CC0066
(204,0,102) 		#CC0099
(204,0,153) 		#CC00CC
(204,0,204) 		#CC00FF
(204,0,255)
#CC3300
(204,51,0) 		#CC3333
(204,51,51) 		#CC3366
(204,51,102) 		#CC3399
(204,51,153) 		#CC33CC
(204,51,204) 		#CC33FF
(204,51,255)
#CC6600
(204,102,0) 		#CC6633
(204,102,51) 		#CC6666
(204,102,102) 		#CC6699
(204,102,153) 		#CC66CC
(204,102,204) 		#CC66FF
(204,102,255)
#CC9900
(204,153,0) 		#CC9933
(204,153,51) 		#CC9966
(204,153,102) 		#CC9999
(204,153,153) 		#CC99CC
(204,153,204) 		#CC99FF
(204,153,255)
#CCCC00
(204,204,0) 		#CCCC33
(204,204,51) 		#CCCC66
(204,204,102) 		#CCCC99
(204,204,153) 		#CCCCCC
(204,204,204) 		#CCCCFF
(204,204,255)
#CCFF00
(204,255,0) 		#CCFF33
(204,255,51) 		#CCFF66
(204,255,102) 		#CCFF99
(204,255,153) 		#CCFFCC
(204,255,204) 		#CCFFFF
(204,255,255)
#FF0000
(255,0,0) 		#FF0033
(255,0,51) 		#FF0066
(255,0,102) 		#FF0099
(255,0,153) 		#FF00CC
(255,0,204) 		#FF00FF
(255,0,255)
#FF3300
(255,51,0) 		#FF3333
(255,51,51) 		#FF3366
(255,51,102) 		#FF3399
(255,51,153) 		#FF33CC
(255,51,204) 		#FF33FF
(255,51,255)
#FF6600
(255,102,0) 		#FF6633
(255,102,51) 		#FF6666
(255,102,102) 		#FF6699
(255,102,153) 		#FF66CC
(255,102,204) 		#FF66FF
(255,102,255)
#FF9900
(255,153,0) 		#FF9933
(255,153,51) 		#FF9966
(255,153,102) 		#FF9999
(255,153,153) 		#FF99CC
(255,153,204) 		#FF99FF
(255,153,255)
#FFCC00
(255,204,0) 		#FFCC33
(255,204,51) 		#FFCC66
(255,204,102) 		#FFCC99
(255,204,153) 		#FFCCCC
(255,204,204) 		#FFCCFF
(255,204,255)
#FFFF00
(255,255,0) 		#FFFF33
(255,255,51) 		#FFFF66
(255,255,102) 		#FFFF99
(255,255,153) 		#FFFFCC
(255,255,204) 		#FFFFFF
(255,255,255)



Note: Pour trouver des couleurs qui vont bien ensemble:
Francisek a pondu un outil très pratique: http://francisek.over-blog.com/article-151196.html
Partager cet article
Repost0
Fabrice B. - dans Programmation & CSS
commenter cet article …
20 juillet 2005 3 20 /07 /juillet /2005 00:00

CSS détaillé

Voici un CSS détaillé pour savoir quelle ligne modifie quoi.



/*---------------- elements principaux ---------------*/
/*---------------- les styles ci-dessous affectent 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      { color: #5B6B7C; 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 survolés */
legend  { color:#5675A4; padding-left:5px; padding-right:5px;}
li      { list-style-type:none; } /* listes non ordonnées */
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 quelle qu'en 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 */
/********************************************************************************************************/



#global {width:800px;}/*definie la taille du 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 -------------------- */
/*definit 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; }/*élément d'une liste*/



/* ------------------entete ---------------------*/
#header { text-align:center; border:1px solid #666666; margin-bottom:5px; position:relative;}/*div contenant l'en-tête du blog*/
#top    { padding:5px; background-color:#FDEBC1; color:#FFFFFF; }/*en-tête du blog*/
#top h1 { padding:0px; margin:0px; color:#FFFFFF;}/*titre du blog */
.topLien{text-decoration:none;}/*lien de l'entête vers la home du blog */
.topLien:hover {text-decoration:underline;}/*lien de l'entete vers la home du blog survolé */



/* ---------------------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; }/*numéro du resultat*/
.RDesc { padding:10px; }/*résumé du resultat (premières lignes de l'article)*/
.ROut  { font-style:italic; color:#A0B8CB; }/*domaine auquel appartient le résultat*/
.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; }/*résultat style 1*/
.Result2   { padding:4px; background:#FBFBFB; }/*résultat style 2*/



/*------------------- Articles ----------------------------------*/
.article     { margin-top:0px; padding:0px; margin-bottom:5px; }/*style general d'un article (en-tête 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 affichée dans l'en-tête 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 (publié par, categorie, commentaire,recommander)*/
.barreHautArticle  {padding:0px 0px 5px 0px; margin:0px; width:100%; background-color: #C9E3ED;}/*en-tête du blog contient la date*/
.categorieArticle  {} /*catégorie de l'article*/
.categorieArticle a { text-transform:lowercase;}/*lien sur la catégorie de larticle*/
.categorieArticle a:hover { text-transform:lowercase;}/*lien survolé 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 résumé 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 saisie*/
#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 fenêtre d'ajout de trackback */
.h2Trackback   { color:#3366CC;}/**/



/*-----------------fenêtre d'ajout d'un trackback---------------------*/
#divTrackBack{}/*style général*/
#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 checkbox */



/* ---------------------Calendrier--------------------------------- */
.calendarTop1  {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; color:#FFFFFF; font-weight: bold;  background-color:#F92E00;} /*en-tête*/
.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 communs à l'accueil et aux pages d'un album------------------------------*/
#bodyAlbum{ background-color:#FFFFFF;}/*style général de la page de l'album*/
#generalAbum{width:100%;} /*div contenant tout l'album peut être utilisé à la place de bodyAlbum*/
.topAlbum{}/*entete de l'album contient l'en-tête du blog*/
#enteteAlbum{ width:100%; border:1px solid #222222; background-color:#666666; font-size:130%; color:#FFCC99;}/*ligne sous l'en-tête 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 survols*/

 

/*-------------------------------Accueil album------------------------*/
#centreAccAlbum{}/*contient les thumbnails de l'accueil de l'album (non utilisé)*/
.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 (précédent suivant retour)*/
.quickNavAlbum a {text-decoration:none;} /*liens de la navigation rapide*/
.quickNavAlbum a:hover {text-decoration:underline;}/*liens survolés de navigation rapide*/
.precAlbum{ float:left; text-decoration:none; position:relative; padding:0px; margin:0px;}/*liens et titre photo précédente*/
.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 utilisé)*/
.thumbsAlbum {background-color: #666666; padding:2px; width:550px; margin-right:auto; margin-left:auto;}/*miniatures de l'album contient toutes les miniatures*/
.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*/

Partager cet article
Repost0
Fabrice B. - dans Programmation & CSS
commenter cet article …

Accueil

 

Rechercher

Recherche

 

Texte Libre

 

Liste D'articles