Profil

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

Photo.Graph

Catégories

4 janvier 2009 7 04 /01 /janvier /2009 14:05

Il y a quelques temps, j'ai présenté quelques hébergeurs d'images.

Personnellement j'utilise Servimg (et mabul pour les swf).

Voici un petit tutoriel pour utiliser servimg sans se mordre les doigts.

 

L'inscription est obligatoire pour utiliser http://www.servimg.com et il faut avant tout créer un compte pour héberger des images.

C'est pas compliqué : il suffit d'une adresse e-mail et d'un mot de passe.

Pour l'instant (et ça fait plus de 4 ans que je suis inscrite) mon compte mail n'a pas été pourri par servimg ou un éventuel partenaire...

 

Vous accéderez à votre compte servimg par cette adresse http://www.servimg.com

Pour héberger une image, il suffit de simplement cliquer sur le lien « Envoyer une image » 

S'ouvre alors une fenêtre qui sert à parcourir vos fichiers et qui permet de choisir l'image à héberger (on ne peut héberger qu'une seule image à la fois).



Se pose alors la question de redimensionner l'image ou non...

Choisissez non, si vous voulez la conserver telle-quelle, mais attention elle ne doit pas dépasser 2 Mo, sinon vous pouvez la retailler, ça peut être pratique dans certains cas. Ainsi pas de logiciel de retouche d'image nécessaire.

Si vous avez beaucoup d'images à héberger, vous pouvez aussi la ranger dans une catégorie. Mais c'est par commodité et pas une obligation.

 

Ensuite il suffit de cliquer sur le bouton « envoyer ».

 

Une fois l'image chargée sur servimg, une fenêtre pleine de liens va apparaître :

 

Pour avoir l'url d'une image et l'utiliser dans le css ou même dans un article, seule la dernière ligne est utilisable.

 

Copiez la ligne et vous pouvez utiliser votre image.... !

L'hébergement est valable à vie et sans limitation.

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
13 décembre 2008 6 13 /12 /décembre /2008 09:58

Aujourd’hui, voici un petit article qui explique une manipulation toute simple dans le css. Un article écrit tout exprès pour la communauté gif et fonds de blog qui m’a demandée de leur donner quelques astuces et conseils.

 

Voici une astuce toute simple pour celui ou celle qui ne comprend rien au CSS mais qui veut modifier son fond (background) de blog sans trop se salir les mains.

La véritable marche à suivre se trouve ici : modifier le fond de votre blog

 

Il faut quand même aller dans le css, il n’y a pas de fumée sans feu…

 



Allez dans votre administration, puis dans design, puis dans « mode avancé css », et là vous allez copier tout le css qu’il y a dans la fenêtre de style « Définitions d'affichage basiques ».

Puis vous cliquez sur le bouton « mon style » et vous allez effacer tout ce qu’il y a dans la fenêtre « Définitions d'affichage basiques » et coller ce que vous avez copié il y a quelques instants.


Vous aller ensuite cocher la case « personnaliser », puis enregistrer et retourner sur le design original en cliquant sur le bouton « original »
et (si ce n’est pas déjà fait), vous allez ouvrir Les définitions avancées en cliquant sur le + et vont s’ouvrir alors quatre autres fenêtres :

- Définitions d'affichage du template

- Définitions d'affichage de la variation

- Définitions de structure de la variation

- Définitions de structure du template

 

Et vous allez réitérer les étapes précédentes pour chaque fenêtre : copier tout le css qu’il y a dans la fenêtre de style « Définitions d'affichage du template », puis vous cliquez sur le bouton « mon style » et vous allez effacer tout ce qu’il y a dans la fenêtre « Définitions d'affichage du template » et coller ce que vous avez copié il y a quelques instants.

Vous aller ensuite cocher la case « personnaliser », puis enregistrer et retourner sur le design original en cliquant sur le bouton « original » et vous refaites pour les fenêtres « Définitions d'affichage de la variation », « Définitions de structure de la variation », « Définitions de structure du template ».

 




Là il y a la base nécessaire pour modifier le css et modifier son fond. Cette astuce est valable quelque soit le design de base utilisé, à condition qu’il ait une image en background (sinon, vous n’avez pas le choix, il va falloir se frotter à cet article :
modifier le fond de votre blog)

 


Prenons le cas du design prédéfini : technologic Red

 

Nous voulons enlever le fond pour placer celui de notre choix. Ouvrez votre blog et faites un clic droit sur le background et sélectionnez l’option « enregistrer l’arrière plan sous ».

Une fenêtre va s’ouvrir, elle va indiquer le nom du background actuel. Dans le cas du thème technologic Red vous verrez que le background s’appelle « body-bg.jpg ».


Il n’est pas nécessaire d’enregistrer l’arrière plan, dans notre cas seul le nom de l’image nous intéresse et désormais nous le connaissons. Et pour ne pas le perdre, copiez le nom de l’image. Allez sur le css (mode avancé, mon style) et recherchez où se trouve l’image, ce qui est facile en connaissant son nom.



Utilisez la touche F3 pour faire une recherche automatique avec le nom body-bg.jpg ou utilisez vos yeux de lynx. Dans le cadre du design technologic Red, elle se trouve dans « Définitions d'affichage de la variation » et dans la ligne de code suivante :

 body{  background: url(http://fdata.over-blog.com/99/00/00/01/templates/270/red/article/common/pics/body-bg.jpg) top no-repeat;}


Pour modifier le background il suffit de modifier l’url par une autre de votre choix.
Par exemple :
body{  background: url(http://monurl/monbackground.jpg) top no-repeat;}



N’oubliez pas d’enregistrer, et allez voir le résultat sur votre blog.
 N’oubliez pas de vider le cache pour voir le résultat (il suffit de faire F5, parfois plusieurs fois). Cette astuce est valable pour toutes les images présentes dans un css… à vous de jouer !

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
11 décembre 2008 4 11 /12 /décembre /2008 06:35
Ce blog se construit au fil du temps en fonction des choses qui m’interpellent, ou des questions que se posent certains blogueurs. Parfois, mes articles sont simplement une réponse à une question posée par commentaire ou par mail.

C’est encore le cas aujourd’hui : Joëlle en réaction à l’article
modifier les puces dans le css demande ce qu’est une puce.

Je sais qu’il existe un film des années 1960 qui s’appelle « la puce », mais je ne parlais pas de celle là, ni de l’insecte suceur de sang, ni des électroniques qu’on trouve sur les circuits imprimés, je parlais bien de la puce typographique.

La puce typographique est un symbole qui sert à créer des listes sans numérotation. On place la puce en début de ligne pour introduire chaque élément de la liste.

Par exemple, voici ma liste pour Noël :
 • le dernier numéro de Sillage
 • un bon roman
 • le dernier n° de charlie hebdo (et son cd offert)

Dans ce cas mes puces sont des petits ronds, mais elles peuvent être carrées, de couleur différentes etc... (cf. l'article
comment modifier les puces dans le CSS)



Donc les puces, c’est bien ces petites choses que l’on trouvent souvent dans les modules et qui marquent une liste : des liens, des commentaires, des catégories, … et ça mord pas !
Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
4 décembre 2008 4 04 /12 /décembre /2008 11:13
Souvent, je lis dans les commentaires de ce blog qu'il est "embêtant" de ne pouvoir gérer l'apparence des ses articles avant de publier.



Il y a deux possibilités pour ne pas avoir de mauvaises surprises une fois la publication effectuée :

1 - faire "prévisualiser" en cliquant sur le bouton en bas de l'éditeur de texte et regarder le résultat dans une nouvelle fenêtre tout en sachant que les liens ne sont pas actifs.
Si l'aperçu n'est pas conforme à votre blog et que vous êtes en mode avancé pour le css, c'est que vous avez des erreurs dans "global".


2- appliquer son design dans l'éditeur.
Pour celà, il suffit de se rendre dans l'administration, puis "configurer", "options globales", "réglages avancés" et cocher la case "appliquer ma feuille de style..."
Ce qui donne pour cet article :






Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
22 novembre 2008 6 22 /11 /novembre /2008 08:12

Si vous souhaitez placer des bordures dans votre blog , cet article va répondre à vos questions...

La bordure peut aider à structurer l'espace de votre blog. Par exemple, si vous avez des images, des pubs, qui dépassent ou qui mordent sur le background, une bordure peut arranger l'effet visuel. Une bordure peut aussi aider à mettre en exerbe certains éléments.

 

Comment faire ?

Il suffit d'indiquer au contenant (à l'endroit où vous voulez votre bordure) cette balise supplémentaire (ou la modifier si elle est déjà présente).

border: ...

et de lui donner l'attribut désiré (forme, couleur...)

 

border : on indique en pixel l'épaisseur de la bordure

les attributs

- la couleur : on indique simplement la couleur désirée avec un code hexadécimal

- le style : on indique comment on désire la ligne

                              * solid : ligne pleine

                              * dashed : tirets

                              * dotted : losanges (pointillés)

                              * groove : gravée extérieur

 

Il est aussi possible de ne mettre la bordure qu'à un seul côté (en bas, par exemple: pour souligner ou séparer), ou à deux, ou à trois et non pas seulement entourer.

Pour celà, il suffit d'indiquer à l'attribut border où situer la bordure :

border-right : bordure à droite

border-left : bordure à gauche

border-bottom : bordure en bas

border-top : bordure en haut

 

 

Exemples :

Je souhaite mettre une bordure jaune en ligne pleine de 5 pixels d'épaisseur autour de mes modules :

.box-content {border: 5px solid #F0D700;}

 

Je souhaite placer une ligne en bas des options de commentaires (ce qui peut servir de séparation), blanche et en pointillés de 2px d'épaisseur  :

.commentOption  {border-bottom: 2px #FFFFFF dotted;}
 

 

 


Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
2 novembre 2008 7 02 /11 /novembre /2008 13:42

Voilà une valeur qui n'existe pas dans le css traditionnel. Pas la peine d'essayer d'ajouter des align :right ou autre, ça ne marchera pas !

Mais il y a une astuce...



Tout d'abord, il faut annuler le style de puce « automatique » du css, puis il faut avoir une puce en image (gif ou png). Ce qui donne tout simplement dans la balise puce :

Pour supprimer la puce automatique : list-style-type:none;

Pour mettre une image en puce : background: url(http://puce.gif)



Voici un exemple de syntaxe complète :

li { background: url(http://puce.gif) no-repeat right center;
list-style-type:none; padding-right:40px;}

 

 

 

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
24 octobre 2008 5 24 /10 /octobre /2008 10:48
Comment modifier la police, la couleur et la taille des textes de vos articles une bonne fois pour toute ?
En passant par le css... ce qui évite de sélectionner à chaque fois pour définir les paramètres.

Il suffit de repérer la bonne balise :
.contenuArticle,  {  }

et de lui indiquer la couleur désirée, la police et la taille... 
 color: #
 font-family: 

Par exemple je souhaite que le texte de mes articles s'affiche en bleu, en verdana et ait une taille de 10pt, j'indique :
.contenuArticle,  {color: #0000CC;  font-family: verdana;font-size:10px;}



Surtout : lorsque vous collez vos textes dans l'administration, "nettoyez-les" (coller en texte brut) et ne donnez pas de nouvelles indications à moins que vous ne vouliez faire une variation...

Et si ça ne marche pas (si, si ça arrive) vérifiez l'intégralité de votre css, il doit y avoir un contre-ordre caché par là ! 
Reprenez chaque ligne de code une par une (ou repartez avec un ccs vierge).

 
Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
14 octobre 2008 2 14 /10 /octobre /2008 15:43

Placer un compteur de visites n'est pas vraiment utile, mais ça reste un gadget amusant que beaucoup de blogueurs apprécient.
Alors voilà en quelques mots comment placer un compteur de visites simultanées sur son blog :


Un compteur de visites simultanées :



Comprendre qu'il s'agit d'un compteur qui affiche le nombre de blogueurs présents en même temps sur un site donné.

Le compteur se place en HTML (dans la source) et pas dans le CSS. Il est donc possible de le placer dans un article, dans l'entête, dans le pied de page ou dans un module (texte libre avec Overblog).



Plusieurs codes :
Pour connaître les visiteurs simultanés sur votre blog : 

                       Il y a actuellement &nbsp;<!-- counter(current) -->&nbsp; personne(s) sur ce blog

Ce qui donne :
Il y a actuellement    personne(s) sur ce blog


Pour connaître les personnes connectées sur tout le réseau Over-blog :

                       Il y a actuellement &nbsp;<!-- counter(global) -->&nbsp; personnes sur O-B

Ce qui donne :
Il y a actuellement    personnes sur O-B


Pour connaître les personnes sur Over-blog et sur votre blog :

                       Il y a actuellement &nbsp;<!-- counter(global) -->&nbsp; personnes connectées à Over-Blog dont &nbsp;<!-- counter(current) -->&nbsp; sur ce blog

Ce qui donne :
Il y a actuellement    personnes connectées à Over-Blog dont    sur ce blog



Bien sûr, vous pouvez modifier l'affichage (police, couleur...)
Mais vous pouvez aussi modifier les textes pour un intitulé plus proche de votre blog, comme nous pouvons le voir sur certains blogs comme sur Sylvia & Chris (http://sylviaetchris.over-blog.com) par exemple ou chez Lulu et Berlu (http://luluetberlu.over-blog.com)
                                                  Sylvia et Chris                                           Lulu et Berlu

Prochain article sur Photo.Graph : les compteurs de visite
Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
10 octobre 2008 5 10 /10 /octobre /2008 06:32

Comme promis, voici un petit tutoriel CSS pour modifier l'aspect des puces d'un blog.
Tout d'abord il faut aller dans le CSS (si vous vous demandez ce qu'est le CSS, il faut aller faire un petit tour par là: Mais c'est quoi le CSS).


Pour changer la couleur d'une puce :
Remplacer #FFFFFF par la couleur hexadécimale de votre choix.
li {color:#FFFFFF; }


Pour avoir une forme particulière de puce :
Rond :
li { list-style-type: disc; }

Carré :
li { list-style-type: square; }

Cercle :
li { list-style-type: circle; }

 

Pour mettre un ordre :
Numéro :
li { list-style-type: decimal; }

Nombre romain en minuscule :
li { list-style-type: lower-roman; }

Nombre romain en majuscule :
li { list-style-type: upper-roman; }

Lettre majuscule :
li { list-style-type: upper-alpha; }

Lettre minuscule :
li { list-style-type: lower-alpha; }


Et le plus intéressant : avec une image de votre choix (jpg, gif, gif animé, png...)
li { list-style-image : url(http://www.urldelapuce.png) ; }


Pour changer l'affichage d'une puce au passage de la souris (roll-over) :
Il suffit de faire le même code que précédemment, mais en ajoutant la définition « hover »
li:hover { ... ; }

 


Quelques exemples :


Maintenant nous allons appliquer ces informations avec quelques exemples :



Je souhaite que mes puces soient blanches et carrées. Fixes au passage de la souris :


li { list-style-type: square; color:#FFFFFF; }

Exemple de ce blog : http://photo.graph.over-blog.com





Je souhaite faire un blog avec des puces représentées par l'image de mon choix et qu'elles restent fixes au passage de ma souris :

li {list-style-image: url(http://wwwwmonsite.com/puce.png);}

Exemple emprunté sur le site http://luluetberlu.over-blog.com







Je souhaite que mes puces soient une liste avec des chiffres romains en majuscules rouges et qu'au passage de la souris les puces se transforment en image de mon choix :

li { list-style-type: upper-roman; color :#FF0000 ;}
li:hover {list-style-image: url(http://wwwwmonsite.com/puce.png);}

 

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
27 juillet 2008 7 27 /07 /juillet /2008 07:30

Il y a peu j’ai publié un article sur la transparence des éléments.

J’apporte aujourd’hui une petite précision. Si vous souhaitez que votre fond soit transparent mais que vos textes et photos apparaissent sans transparence, selon le choix du design ça peut être utile, voici la petite astuce :

Utilisez le conteneur .contenuArticle

et n’indiquez pas la transparence dans le conteneur .article que vous pourrez laisser vide.

 

 

Exemple :

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

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