Personnaliser son profil couchsurfing 

Si vous êtes couchsurfer, peut-être souhaitez-vous ajouter de la couleur ou des images à votre profil. Je vous propose quelques astuces que j’ai moi-même appliquées pour égayer mon profil. Cet article fait suite à une demande reçue il y a quelques temps à laquelle je réponds aujourd’hui.

Pour celles et ceux qui ignorent ce qu’est le Couchsurfing, je vous conseille de lire l’article dédié : Couchsurfing ou comment dormir gratuitement. Pour résumer, le couchsurfing est une communauté internationale qui offre la possibilité de loger des voyageurs ou d’être logé lors de ses voyages.

Attention, ceci est un article technique ! Il est loin d’être exhaustif mais j’ai souhaité expliquer quelques bases simples pour égayer votre profil. J’espère être le plus clair et simple possible. Si vous buttez quelque part, n’hésitez pas à laisser un commentaire.

Personnaliser son profil Couchsurfer
Une fois inscrit sur le site internet couchsurfing.org, rendez-vous dans le menu qui porte votre pseudo puis « Mon profil » et enfin « Modifier mon profil ». Vous pourrez ainsi éditer votre fiche personnelle de couchsurfer en cliquant sur le bouton « Modifier » des différentes parties : description personnelle, ma participation au projet CS, expérience sur Couchsurfing, etc.

Les blocs
Vous devez tout d’abord créer des paragraphes ou blocs. Pour cela il suffit d’ajouter les balises DIV autour de votre texte :
<div style= » … « > Votre texte </div>
Votre bloc ainsi défini, vous pouvez maintenant personnaliser votre paragraphe en utilisant les effets de style du bloc (à renseigner entre les guillemets). On peut jouer sur la couleur de fond, la couleur et la forme du cadre, la couleur du texte, la police utilisée, etc.

Les couleurs
Pour indiquer une couleur, il faut connaître son code à 6 chiffres ou lettres. Le plus simple est de se servir de ce nuancier : Webcolors. Le code se trouve en tête de chaque couleur.

Pour le fond du bloc, on utilise le mot-clé background-color. Par exemple pour un fond vert :
<div style= »background-color:#66FF33; »> Votre texte </div>
Ce qui donne :

Votre texte

 

Pour la couleur du texte, en rouge par exemple, on utilise color :
<div style= »color:#FF0000; »> Votre texte </div>
ce qui donne :

Votre texte

 

Si vous souhaitez modifier la couleur d’un mot en plein milieu de votre paragraphe, nous aurons recours à la balise SPAN. Par exemple on veut un mot bleu au milieu d’un texte en rouge : <div style= »color:#FF0000; »> Votre texte en <span style= »color:#0000FF; »>bleu</span> et rouge </div>
Le résultat :

Votre texte en bleu et rouge

 

Le cadre
Vous pouvez personnaliser l’encadrement du paragraphe : l’épaisseur du trait, sa couleur et sa forme, avec le mot-clé border suivi de l’épaisseur (à partir de 0px pour rendre le cadre invisible à ce que vous voulez) ; la forme qui peut être dashed, solid, dotted, double, etc. ; et la couleur comme précédemment vue.
<div style= »border:3px double #FF0000; »> Votre texte </div>
Résultat :

Votre texte

 

Le texte et autres joyeusetés
Pour mettre un mot en gras ou en italique, il faut utiliser les balises B et I autour dudit mot. Par exemple : <div style= » »> Votre texte en <b>gras</b> et en <i>italique</i> </div>
Résultat :

Votre texte en gras et en italique

 

Pour afficher une image, on utilise la balise IMG avec l’adresse internet de l’image, comme dans cet exemple : <img src= »http://www.couchsurfing.org/images/final-logo.png »>
Ce qui donne :

Enfin, pour créer un lien vers une page d’un site internet, nous utiliserons la balise A complétée de l’adresse du site internet, comme dans l’exemple qui mène vers le site eP2V :
<a href= »http://www.ep2v.fr »>Aller sur eP2V</a>
On notera qu’entre les 2 balises on affiche le texte que l’on souhaite voir apparaître comme lien. Le résultat :
Aller sur eP2V

Le final : tout est combinable !
Bien évidemment tout ce que je vous ai indiqué peut-être utilisé en même temps en prenant bien soin de séparer chaque mot-clé par un point-virgule ! Prenons l’exemple ci-dessous :
<div style= »border: 2px solid #00FF00; background-color: #66FF33; color:#333333; »>
<img src= »http://www.couchsurfing.com/images/icon_hosted.gif »>
Lorem <b>ipsum</b> dolor sit amet, <i>consectetur adipisicing elit</i>, sed do eiusmod <span style= »color:#0000FF; »>tempor incididunt</span> ut labore et <a href= »http://www.carnets-du-voyageur.fr »>dolore magna aliqua</a>.
</div>
Voici le résultat :


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

Aller plus loin …

Vous pouvez réaliser bien d’autres choses : justifier un texte, changer la police de caractères, mettre une image de fond, ajouter du son, faire des effets de chevauchements de texte, modifier les marges internes et externes à un bloc, etc. Toutes les données de cet article sont en fait du code HTML et CSS qui permettent de créer des sites internet.

Si vous souhaitez aller plus loin dans la personnalisation de votre profil de couchsurfer (ou dans la création web), je vous engage à consulter des livres ou des sites internet qui traitent de ces deux langages de programmation. Une bonne adresse pour commencer : Site du zéro.

Suivez les commentaires de cet article avec le flux RSS 2.0
Ajoutez un rétrolien vers cet article depuis votre site.
5 commentaires
  1. Abadie Roselyne says:

    bonjour
    je voudrais proposer 2 couchsurfing , mais je ne vois pas où cela se met .De plus je n’ai pas pu le mettre sur le forum de mon espace perso ..
    Pouvez-vous m’aider ?merci

    Roselyne

  2. chap says:

    Bonsoir!
    je viens de m’inscrire sur surfcouching mais j’ai un soucis; dans « terminer votre profil », étape 3 il y a une case: « Merci de vous décrire, comment vous décririez-vous ?  »
    J’ai essayer plusieurs fois avec des infos différentes, (texte en français puis en Anglais), mais rien ne passe
    si quelqu’un peut m’aider :/

  3. coco says:

    Salut, jai tenté d’incérer une image sur mon profil Couchsurfing avec le code, mais ca marche pas
    s’agit-il d’une erreur ? Merci…

  4. anawis says:

    Merci mille fois de m’avoir répondu et d’offrir un article si détaillé et vraiment pratique pour une béotienne comme moi. J’ai déjà commencé à modifier mon profil et bientôt, j’apprendrai le html.

    Merci!!!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *