Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

5 juillet 2008 6 05 /07 /juillet /2008 16:09

Il est toujours intéressant de modifier l’apparence des ses textes pour les adapter au design de son blog. Le choix de la police est important, la couleur, la forme, l’espacement et bien d’autres…

Attention cependant à la règle essentielle : votre visiteur ne peut voir sur votre blog que les polices qui sont déjà installées sur son disque dur. Si vous comptez afficher la toute dernière police à la mode téléchargée sur un site dédié, c’est raté. Il y a peu de chance pour que l’internaute ait eu le même coup de foudre et qu’il en dispose. Du coup, le navigateur affichera une police par défaut (Times sur Mac et Times New Roman sur PC) qui peut nuire à votre mise en page. Le plus simple et le moins risqué est d’utiliser des polices de caractères communes.

A savoir : Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Symbol, Times New Roman, Trebuchet MS, Verdana, Webdings

 

Nous allons voir plusieurs points qui concernent la mise en forme de la police

- font-family        

C’est la propriété pour choisir la police

- font-size            

C’est la propriété pour le corps (taille de la police)

- font-weight      

C’est la propriété pour la graisse (épaisseur) de la police

- font-style         

C’est la propriété pour l'italique, le soulignement et autres

- font-variant       

C’est la propriété pour le texte en petites majuscules

- letter-spacing

C’est la propriété pour définir l'espacement entre les caractères

- word-spacing

C’est la propriété pour définir l'espacement entre les mots

 

 

Utiliser la propriété font-family permet d’indiquer la police de caractère dans le CSS

 

Exemple : Je veux que le texte des mes modules s’affichent en Verdana. Si vraiment le navigateur ne la possède pas, je préfèrerai en Arial, ou bien en Times et au pire en Helvetica… Alors on va lui indiquer les trois… ! Le navigateur affichera de préférence la première police indiquée.

 

box. {font-family:Verdana, Arial, "Times New Roman", Helvetica;}

 

Remarque : Times New Roman est entre guillemets car son nom se compose de plusieurs mots.

 

 

 

Utiliser la propriété font-size permet de modifier la taille de la police :

 

Par exemple : je veux que la police de mes modules fasse une taille de 7.5 pixels :

box. {font-size:7.5px;}


 

 

Utiliser la propriété font-weight permet de modifier la graisse, l’épaisseur, de la police : gras, très gras…

 

Le texte est en gras léger :

{font-weight:lighter;}

 

Le texte est en gras :

{font-weight:bold;}

 

Le texte s'affiche en très gras :

{font-weight:bolder;}

 

Pour afficher le texte avec une épaisseur de son choix, il suffit alors de donner une valeur numérique à la propriété font-weight

Le texte s'affiche avec une épaisseur de 500 :

{font-weight:500;}

 

 

 

Modifier la propriété text-decoration permet de donner du style au texte :

 

Le texte est simple, sans ajout de style :

{text-decoration:none;}

 

Le texte est souligné :

{text-decoration:underline;}

 

Le texte possède une ligne au dessus :

{text-decoration: overline;}

 

Le texte est barré :

{text-decoration:line-through;}

 

Le texte clignote : (Attention, Internet Explorer ne prend pas en compte cette propriété) 

{text-decoration:blink;}

 

Le texte est en italique :

{font-style:italic;}

 

Le texte est incliné vers la gauche :

{font-style:oblique;}

 

 

 

La propriété font-variant permet d’afficher une variation : des petites majuscules avec la valeur small-caps

 


{font-variant: small-caps;}



 

Pour modifier l’espacement entre les lettres du texte, il suffit d’utiliser la propriété letter-spacing :

 


Modifier cette propriété permet de modifier l'espacement  entre les lettres. On utilise une valeur numérique ou une valeur en pourcentage. Celle-ci peut être négative.

 

Espacement large entre les lettres

{letter-spacing : 30px;}

 

Espacement rétréci entre les lettres

{letter-spacing : -2px ;}

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
18 juin 2008 3 18 /06 /juin /2008 16:33

Si vous souhaitez faire un effet de transparence sur votre blog, ne cherchez plus, tout est là !
Il y a deux solutions possibles.
La plus simple mais la moins esthétique, consiste à placer un gif transparent ou un png transparent en superposition sur le background (l’image de fond) général.

Vous pouvez télécharger une image avec 50% de transparence si vous en avez besoin
     gif blanc    png blanc           gif bleu     png bleu          gif jaune    png jaune          gif rouge    png rouge        
 
gif noir     
png noir          gif vert     png vert


Ensuite il suffit d’insérer le code dans l’élément voulu.
La syntaxe à employer :
sélecteur {background-image: url(http://www.monimage.png);}


Exemple :
Je veux placer une image à 50% transparent sous mes articles (ce qui laissera apparaître le backround général en transparence). 

.article {background-image: url(http://idata.over-blog.com/1/46/60/50/opacity/blanc.png); background-repeat:repeat;}

ou :

.article {background-image: url(http://idata.over-blog.com/1/46/60/50/opacity/blanc.gif); background-repeat:repeat;}

Remarques : la transparence des png est plus esthétique qu’un gif. Mais la transparence des png n’est affichée qu’avec internet 7 et les suivants, ou avec les autres navigateurs (Mozilla…)


La deuxième solution est un peu plus compliquée, mais est plus esthétique.
Il suffit d’indiquer dans le css le bon code qui permettra d’afficher l'opacité à une couleur d’arrière plan (ou à un élément).
Mais attention, tous les navigateurs (encore) ne le prenne pas en compte.
 



La syntaxe à employer :
sélecteur {background-color: couleur désirée; filter:alpha(opacity=x); -moz-opacity:0.x; opacity: 0.x;}

Explications :
Il suffit d’indiquer la couleur désirée avec le code haxadécimal (ne pas oublier le #).
filter:alpha(opacity=x) il suffit d’indiquer à la place du x le pourcentage désiré d’opacité (sans le %) pour 50% il faut écrire 50. Ce code fonctionne avec Internet Explorer 6 et suivants.
-moz-opacity:0.x il suffit d’indiquer la valeur décimale désirée. Pour 50% il faut écrire 0,5. Ce code fonctionne avec Mozilla 1,6 et antérieur.
opacity:0.x comme pour le code précédent, il suffit d’indiquer la valeur décimale désirée. Pour 50% il faut écrire 0,5. Ce code fonctionne avec le CSS3 et Mozilla supérieur à 1,6.


Exemple :
Je veux mettre un fond blanc visible à 50% par transparence en fond des modules.

.box {background-color: #FFFFFF; filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;}



Vous pouvez trouver quelques détails supplémentaires sur l'article Transparence et opacité du background

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
17 juin 2008 2 17 /06 /juin /2008 16:55

Votre blog comporte plusieurs éléments qui peuvent être cernés d’une ligne. Cette ligne peut prendre différents aspects : pleine, pointillée, épaisse ou fine, en relief.

La propriété :
border
Les valeurs possibles :
none : pas de bordure (ou hidden)
dotted :  avec des petits points
dashed : avec des pointillés
solid : ligne entière
double : double ligne entière
groove : avec du relief (et les variantes aux mêmes aspects avec ridge, inset, outset)


 

La syntaxe à employer :
sélecteur {propriété : valeurs ;}

Exemple :
Je veux mettre une double ligne blanche  de 1px de large autour des modules d’un blog
        .box {border:1px double #FFFFFF;}

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
22 mai 2008 4 22 /05 /mai /2008 05:45

Tout d’abord il vous faut une bannière… une image, que vous aimez bien ou un montage que vous avez réalisé en comprenant le titre de votre blog. L’idéal est que votre bannière soit en « harmonie » avec le reste du blog (police de caractère, couleurs, thème…). 

Si vous êtes en mode privilège ou en mode premium sur Over-Blog vous allez l’héberger dans votre dossier d’image (en n’oubliant pas de décocher l’optimisation d’image pour ne pas perdre les dimensions). 

Si vous êtes en mode « confiance » sur Over-Blog, il vous faut l’héberger ailleurs (cf. hébergeurs d’images) sinon votre bannière sera redimensionnée. 

Ouvrez votre administration dans over-blog et allez sur « configurer » et ouvrez la ou les page(s) où vous voulez que votre bannière soit affichée (accueil, articles…)

Si vous n’avez pas de module à l’entête de votre blog, faites un glisser-déposer d’un module texte libre (à gauche) jusqu’à l’emplacement libre dans votre représentation schématique du blog qui se trouve à droite.

 

Cliquez sur le marteau du module texte libre, choisissez « contenu personnalisé » et insérez votre image comme vous procédez habituellement en publiant un article, sauf que cette fois-ci vous insèrerez l’image par son adresse.

 

N’oubliez pas d’ajouter un petit lien vers l’accueil de votre blog, ça facilite la navigation…


Si vous ne souhaitez pas héberger votre bannière ailleurs que sur over-blog, c'est article devrait vous convenir : http://photo.graph.over-blog.com/article-29375599.html

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
5 mai 2008 1 05 /05 /mai /2008 13:47

EDIT : article mis à jour le 04 01 09

Vous n’êtes certainement pas sans savoir qu’over-blog n’héberge pas toutes les images !
En mode confiance, les images ne peuvent pas dépasser la taille limite de 600x600 px, ce qui est gênant pour certains aspects de son blog (par exemple une bannière de 1200px). Il y a aussi les fameux swf, les animations qu’on peut avoir du mal à héberger…

Il faut alors trouver un hébergeur d’images et le mieux c’est qu’il soit gratuit.  

 

Avantages :

- Vous allégez votre blog en lui évitant d’avoir a conserver un stock d’image important

- Vous réservez votre espace de stockage pour les albums photos. Généralement, les images des albums photos ne sont stockables que sur la plateforme du blog.

- Vous multipliez les sources d’affichages ce qui « économise » la bande passante de votre blog  

 

Inconvénients :

- Certains hébergeurs limitent l’hébergement dans le temps (du genre un mois, six mois ou un an) ce qui peut réserver de drôles de surprises comme perdre l’apparence de son blog ou perdre ses images si on n’a pas pris le temps de les sauvegarder sur un support numérique ou sur son disque dur.

- Certains hébergeurs limitent la bande passante.

- Certains hébergeurs obligent une inscription. C’est pas réellement un inconvénient, mais tout le monde n’apprécie pas.

- Rare, mais possible : vous pouvez perdre vos images à tout moment si le serveur de votre hébergeur « plante » et ce sera sans retour…

 

En ce qui me concerne, j’utilise très régulièrement Hiboox et Servimg (tous les deux en français) et j’en suis pleinement satisfaite. Il n’y a pas de limite de taille et les formats d’images sont nombreux et l’hébergement est sans limite de temps.

 

Hébergeur d’images Inscription obligatoire Formats acceptés Limite de taille par image Limite dans le temps Limite de bande passante
Servimg oui jpg, png, et gif 2 Mo non non
Hiboox non jpg, png, et gif 4 Mo A vie si utilisée tous les 3 mois non
ImageShack non jpg jpeg png gif bmp tif tiff swf 1 Mo 1 mois après la dernière visite par image de 150 mo/heure
Photobucket oui Images et vidéos 1500 Mo par mois A vie si utilisée tous les 3 mois 25 gigas/mois
ZImageZ non jpg png gif 1 Mo ou 4Mo si inscription 2 mois si non utilisée non
ImageVenue non jpg 3Mo non non
WebImages oui Jpg gif png 1Mo 1 mois si non utilisée oui 3000 affichages/mois
xs.to non Jpg, bmp, tif, gif png 2Mo 1 mois si non utilisée ?
Mabul non jpg, png, gif, bmp, tiff, tif, swf 1,5Mo non non
UpandPost non jpeg png gif bmp 8Mo non non
Hosting Pics non jpeg, png, gif, tiff et bmp 4Mo non non
ImageHotel non jpg, gif, png 4Mo Non si utilisée non
ImageCave oui Gif, png, bmp, jpg 1Mo Non non
PhotoManiak non jpeg, png, gif, tiff, swf 1Mo 1 mois si non utilisée 15 gigas/mois
ImageXoom oui jpg, gif, png 1Go non 500mb/mois
Zepload non jpg, jpeg, gif, png, bmp 4Mo non ?
Imagik non jpg, gif, png 5Mo 1 an si non utilisée ?
Zimage non jpg, png, gif, bmp, tiff 5Mo non non

 

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
2 mai 2008 5 02 /05 /mai /2008 12:42

Voici quelques précisions sur la classe des modules du CSS d’Over-Blog. Les modules sont les petites choses que l’on trouve dans les colonnes : les derniers articles publiés, les liens, la présentation, l’inscription à la newsletter… etc…

Il est souvent indispensable de savoir les modifier afin de les adapter à son choix de design.

 

Les modules s’identifient dans le CSS par cet identifiant :

.box {}

 

On peut aussi trouver les éléments suivants :

.box-titre {} _______________________ le texte du titre des module

.box h2 {}  _________________________ l’entête du module où se trouve le titre

.box-content {} _____________________ le contenu des modules

.box-content p {} ___________________ les textes des modules

.box-content ul {} __________________ les listes des modules

.box-content li {} __________________ les puces des modules

.box-footer {} ______________________ les pieds des modules

 

Ce qui est utile pour mettre une bordure, un cadre, une décoration autour des modules :

.box-top _____________________ le haut des modules

.box-left ____________________ le côté gauche des modules

.box-right ___________________ le côté droit des modules

.box-bottom __________________ le bas de la boîte des modules

.box-topLeft _________________ le coin en haut à gauche des modules

.box-topRight ________________ le coin en haut à droite des modules

.box-bottomLeft ______________ le coin en bas à gauche des modules

.box-bottomRight _____________ le coin en bas à droite des modules

 

 

Comment mettre des éléments ou un cadre autour des modules ?

 

Le haut du module :

Il faut ajouter une image en fond de la classe .box-top

.box-top { background-image: url(http://monimage/haut_module.png); }

Pour plus de précisions, on va lui indiquer que nous voulons que l’image soit placée contre le bord supérieur du module et qu’on veut qu’elle puisse être répétée pour être présente dans toute la largeur de la colonne et centrée :

.box-top { background-image: url(http://monimage/haut_module.png); background-repeat: repeat-x; background-position: top center;}

 

Il faut ensuite refaire cette opération pour chaque éléments avec chaque image si besoin est. Ce n’est pas nécessaire de mettre une image à chaque endroit possible des modules : vous pouvez n’indiquer qu’une bordure, qu’un titre, qu’un pied…

Mais si vous souhaitez faire la totale, voici un exemple de code :

Le bas du module :

Il faut ajouter une image en fond de la classe .box-bottom

.box-top { background-image: url(http://monimage/bas_module.png); }

Pour plus de précisions, on va lui indiquer que nous voulons que l’image soit placée contre le bord inférieur du module et qu’on veut qu’elle puisse être répétée pour être présente dans toute la largeur de la colonne et centrée :

.box-bottom { background-image: url(http://monimage/bas_module.png); background-repeat: repeat-x; background-position: bottom center;}

 

Encore un autre ?

L’angle en haut à droite du module :

Il faut ajouter une image en fond de la classe .box-topRight

.box-topRight { background-image: url(http://monimage/anglehautdroite_module.png); }

Pour plus de précisions, on va lui indiquer que nous voulons que l’image soit placée contre le bord supérieur du module,  qu’on ne veut pas qu’elle soit répétée et quelle soit collée à droite :

.box-topRight { background-image: url(http://monimage/ anglehautdroite.png); background-repeat:no-repeat ; background-position: top right;}

 

Allez, un dernier :

Le côté gauche du module :

Il faut ajouter une image en fond de la classe .box-left

.box-left { background-image: url(http://monimage/cotegauche_module.png); }

Pour plus de précisions, on va lui indiquer que nous voulons que l’image soit placée contre le bord supérieur du module,  qu’on veut qu’elle soit répétée en hauteur et quelle soit collée à gauche :

.box-left { background-image: url(http://monimage/cotegauche.png); background-repeat:y ; background-position: top left;}

 

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
9 avril 2008 3 09 /04 /avril /2008 09:54

L'interface d'Over-Blog a changé... après la version V2.0, nous voici au coeur de la V2.1.
Pas grand chose de nouveau, si ce n'est le design et une nouvelle interface pour modifier le CSS de son blog.
C'est la même chose qu'avant, sauf qu'il y a plus de lisibilité, de compréhension, et qu'on se perd un peu moins en surfant entre toutes les lignes de code !


Pour modifier votre CSS, consultez les précédents articles...
Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
27 février 2008 3 27 /02 /février /2008 14:56
La question qui se pose rapidement lorsqu’on désire modifier le css de son blog, c’est comment modifier la couleur du fond ? Comment insérer une image ?
 
 
Cherchez dans votre css l’élément « body »
 
Vous trouverez quelque chose qui ressemble à ça :
body {margin:0px; padding:0px; background-color: #000000; background-image:url(http://www.monimage.jpg); color:#FFF; font-size:x-small;}
 
Vous remarquez qu’il y a deux propriétés qui portent le nom de background :
background-color : couleur d’arrière plan
background-image : image d’arrière plan qui vient se placer par dessus le background-color
 
Et si elles n’y sont pas ou qu’il en manque une, vous pouvez les ajouter. Pour éviter de faire des erreurs de syntaxe (comme par exemple oublier un point virgule), vous pouvez consulter l’article sur la syntaxe du css
 
 
La couleur d’abord :
Car même si vous avez une image en background, au chargement de la page il y aura un laps de temps sans image. La couleur du fond sera alors visible en arrière plan. Autant l’adapter au style du blog.
 
body {background-color:#... ;}
Pour définir la couleur, il suffit de placer un code hexadécimal (voir l’article : les codes hexadécimaux)
Par exemple vous voulez que la couleur de votre fond de page soit rouge, écrivez :
body {background-color:#CC0000 ;}
 
 
 
 
Modifier ou placer une image en arrière plan d’un blog :
 
Plusieurs astuces s’offrent à nous…
Votre blog design de base contient déjà une image de fond ? On va voir comment la modifier très simplement (l’exemple suivant utilise le design de base d’over-blog American Beauty grey).
Assurez-vous d’héberger votre image et d’avoir son url (du genre http://monsite/mesimages/image.jpg).
Placez votre souris sur l’image d’arrière plan de votre blog et faites un clic droit.

background

Allez sur « enregistrer l’arrière plan sous », une fenêtre va s’afficher, relevez le nom qu’elle contient (ici dans l’exemple, c’est « mosaique.png »).
 background
Rendez-vous sur votre CSS (avancé) et dans accueil faites F3 (vous savez les touches qui servent pas souvent en haut de votre clavier, sinon vous pouvez toujours rechercher manuellement en ouvrant grands les yeux) une fenêtre de recherche va s’ouvrir. Tapez « mosaique.png » (sans les guillemets) vous allez trouver où se trouve dans le css l’image de fond actuelle. Collez à la place de l'url existante celle de la nouvelle image. Cherchez deux fois (on sait jamais) si ça y est deux fois (c’est possible si le css n’est pas très clair) collez une nouvelles fois l’url de la nouvelle image.
Activez l'option "Je souhaite modifier et appliquer la feuille de style à mon blog" en cochant la croix. 

background

Enregistrez.  
Vous pouvez aussi ajouter au modifier les éléments dans body :
body {background-image:url(http://www.monsite.fr/mesimages/monimage.png);}
 
 
Et pour vérifier les modifications, on n’oublie pas de rafraîchir la page du navigateur, en faisant ctrl+F5...
Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
14 février 2008 4 14 /02 /février /2008 19:15
Avec l’article précédent : Le CSS d'Over-Blog et ses héritages, nous avons vu la structure générale d’un blog.
Ainsi, nous savons qu’un blog se compose de lignes horizontales et de colonnes verticales.
 
Pour modifier la largeur globale de votre blog, il faut d’abord modifier l’ensemble de tout ces éléments, et pour cela il suffit de modifier : #global
 
Pour modifier la largeur des colonnes, il nous suffit alors de modifier les éléments correspondants dans le CSS.
 
Quel est votre blog ?  
Pour choisir la mise en page de votre blog, vous pouvez aller sur "configurer" et "mise en page". Préférez le mode "avancés".

mode avancé

Un blog avec trois colonnes avec la colonne principale au centre ? (modèle A)
Un blog avec une seule colonne ? (modèle B)
Un blog à deux colonnes avec la colonne principale à droite ? (modèle C)
Un blog à deux colonnes avec la colonne principale à gauche ? (modèle D)

modèles blog

Le blog avec une structure comme le modèle A comprend une entête une colonne d'articles (#cl_1_1), une colonne à gauche (#cl_1_0) et une colonne à droite (#cl_1_2), et un pied de page.
 
Ensuite, si vous souhaitez modifier les dimensions des colonnes, il vous suffit d’utiliser les éléments suivants :
Modèle A :
   #cl_1_0 (la colonne de gauche)
   #cl_1_1 (la colonne centrale)
   #cl_1_2 (la colonne de droite)
 
Modèle B :
 #cl_1_0 (une seule colonne)
 
Modèle C :
 #cl_1_0 (colonne de gauche)
 #cl_1_1 (la colonne principale)
 
Modèle D :
 #cl_1_0 (la colonne principale)
 #cl_1_1 (la colonne droite)
 
 
Maintenant la question est : comment indiquer une dimension dans le CSS ?
Il y a deux possibilités : les pixels et les pourcentages
Par exemple :
#global {width: 800px ;}   
Ce qui signifie que le blog aura une largeur de 800px et que si la résolution d’écran de ses visiteurs est plus large (ce qui est fort possible), son fond (background) sera visible sur les côtés.
#global {width: 80% ;}
Ce qui signifie que le blog affichera une largeur de 80% de la taille d’affichage du navigateur quelque soit sa résolution d’écran et aura un fond (background) visible à 10% de chaque côté.
 
Pour modifier les largeurs des colonnes, voici le code à modifier dans le CSS :
 
#global {width: Xpx;} ou    #global {width: X%;} 
#cl_0_0 {width:Xpx;}  ou    #cl_0_0 {width:X%;}
#cl_1_0 {width:Xpx;}  ou    #cl_1_0 {width:X%;}
#cl_1_1 {width:Xpx;}  ou    #cl_1_1 {width:X%;}
#cl_1_2 {width:Xpx;}  ou    #cl_1_2 {width:X%;}
#cl_2_0 {width:Xpx;}  ou    #cl_2_0 {width:X%;}
 
Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
11 février 2008 1 11 /02 /février /2008 16:06

css overblog

 

On remarque facilement grace à ce shéma comment fonctionne le CSS d'Over-Blog : une imbrication de cellules horizontales et verticales. 
En prenant comme exemple un blog avec deux colonnes de modules de chaque côté de la colonne centrale qui contient les articles, on trouve les verticales qui sont des colonnes :
   #cl_0_0 (la première colonne qui est l'entête)
   #cl_1_0 (la colonne de gauche)
   #cl_1_1 (la colonne centrale)
   #cl_1_2 (la colonne de droite)
   #cl_2_0 (la dernière colonne qui est le pied de page)

Et les horizontales qui sont des lignes :
   #ln_0 (la ligne d'entête)
   #ln_1 (la ligne centrale avec les modules et les articles)
   #ln_2 (la ligne du pied de page)

Nous verrons plus tard comment modifier les dimensions des colonnes !

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article