CSS : Personnaliser le fonds, les cadres et le texte votre profil

Le but de ce tutoriel sera de vous proposer toute une gamme de codes pour personnaliser votre profil.

Il s'agit ici de vous permettre de situer les éléments auxquels nous feront appel dans ce tutoriel.

D'après l'image ci-dessous, chaque portrait est composé :


A) d'un corps de page sur lequel tous les autres éléments sont disposés (en rouge) appelé body

B) d'un header (cadre en haut cerné de vert clair, au fond transparent par défaut) appelé #PORTRAITHEADER
Ce header contient :
1) votre avatar (la petite fleur) appelé #PORTRAITHEADER IMG
2) votre pseudo qui correspond au code #PORTRAITHEADER H1
3) Une brève description avec votre nom, votre sexe, votre orientation sexuelle, votre âge et si vous êtes ou non actuellement connecté qui correspond au code #PORTRAITHEADER P

C) d'un cadre contenant votre présentation (en rose avec des bordures bleues) appelé #PORTRAITCONTENU
Votre présentation contient :
1) une série de tête de rubriques (qualités, défauts, en ce moment, j'aime, j'aime pas, sexe, recherche, contact, interview,groupes, friendlist réciproque, guestbook, participer au guestbook) qui correspondent au code #PORTRAITCONTENU H2
2) des liens (contact / historique / blog / réponses précédentes) qui correspondent au code #PORTRAITCONTENU A
3) des indications par défaut en italique (par exemple dans la rubrique "en ce moment" : j'écoute, je regarde, je lis, je joue ext... => on en retrouve aussi dans la rubrique "sexe" et "interview") qui correspondent au code EM
4) des flèches (devant "contact", "historique", "blog sur gayattitude", "si j'étais..." et "questionnaire de proust") qui correspondent au code .link1
5) des photos persos qui correspondent au code #PORTRAITCONTENU IMG
6) du texte (le texte en noir = ce que vous remplissez dans les rubriques) qui correspond au code #PORTRAITCONTENU P



Prenons l'exemple du body

Si vous souhaitez modifier l'arrière plan de votre, page, vous devrez :
1) indiquez que vous voulez modifier cette partie de votre page, en annonçant votre code par body
2) introduire les modifications que vous souhaitez affecter à l'arrière plan par une accolade {, et les clore en fermant l'accolade }
3) pour signifier la fin d'une ligne de code à l'intérieur de cette accolade, vous devrez ajouter un point-virgule ; à la fin. Ainsi, vous pouvez organiser la mise en page de votre code librement.

exemple :

Ainsi ce code :

body
{
ligne de code pour affecter un effet à l'arrière plan ;
ligne de code pour affecter un effet à l'arrière plan ;
ligne de code pour affecter un effet à l'arrière plan ;
}

aura le même effet que ce code :

body{ ligne de code pour affecter un effet à l'arrière plan ;ligne de code pour affecter un effet à l'arrière plan ;ligne de code pour affecter un effet à l'arrière plan ; }

Pour modifier n'importe quel élément de votre profil dont la liste non exhaustive a été déterminée à l'étape 1, remplacez simplement body par l'élément qui vous intéresse

Ainsi, pour modifier les liens du cadre #PORTRAITCONTENU, qui correspondent au code #PORTRAITCONTENU A, le code prendra la forme suivante :

#PORTRAITCONTENU A
{
ligne de code pour affecter un effet aux liens;
ligne de code pour affecter un effet aux liens;
ligne de code pour affecter un effet aux liens;
}



A) Le fond du body

Si vous souhaitez ajouter un fond coloré uni, ajoutez simplement le code suivant en remplaçant couleur par la couleur de votre choix :
body { background-color: couleur; }

Si vous souhaitez afficher une image à l'arrière plan, consultez ce post qui vous donnera les principales modifications possibles pour jouer sur une image d'arrière plan.

B) Le fond du #PORTRAITHEADER et du #PORTRAITCONTENU

Pour ajouter une couleur ou une image d'arrière plan à votre fond, remplacez simplement body par #PORTRAITHEADER ou #PORTRAITCONTENU selon la partie que vous souhaitez modifier.

C) Il peut cependant être intéressant de jouer sur la transparence de ces fonds :

1) rendre le fond totalement transparent
Si vous faites cela, le fond du ou des éléments que vous choisirez sera transparent, de sorte que le fond du body apparaitra directement dans ces cadres. Par exemple, d'après l'image proposée précédemment, le fond du #PORTRAITHEADER est complètement transparent, ce qui fait apparaitre le fond rouge du body.

la ligne de code : background: transparent;

Par exemple, pour un #PORTRAITCONTENU transparent sans aucune autre modification, le code sera : #PORTRAITCONTENU { transparent; }

2) jouer sur l'opacité d'un cadre entier

Il est également possible de jouer sur l'opacité d'un de de ces deux cadres, cependant cette modification affectera non seulement le fond, mais également tout ce qui se trouvera dans le cadre (ce qui peut poser des problèmes de lisibilité)...

la ligne de code : opacity:value; où value est la valeur de l'opacité de l'élément. Zéro correspondrait à un cadre totalement transparent, et 100 à un cadre totalement opaque.

Par exemple, pour un #PORTRAITCONTENU d'une opacité de 50% sans aucune autre modification, le code sera : #PORTRAITCONTENU { opacity:50 ; }

3) jouer sur l'opacité du fond du cadre uniquement

Pour cela, nul besoin de code pour gérer la transparence, mais d'une image de fond (blanc par exemple) plus ou moins transparent. Par défaut, votre profil utilise un carré blanc d'une opacité de 90% au format png. J'ai pour ma part utilisé dans mon profil un carré blanc d'une opacité de 50%, que voici :


Pour réaliser une image en jouant sur son opacité, je vous conseiller d'utiliser le logiciel gratuit Gimp. Voici pour vous aider une image figurant l'endroit à partir duquel l'opacité d'un calque est gérée :


D) Le fond d'un texte

Vous pouvez également modifier la couleur de fond d'un texte, qui correspondra à une sorte de surlignage de votre texte. Pour cela, remplacez body par l'élément textuel dont vous souhaitez modifier le fond (par exemple #PORTRAITCONTENU P) dans le code qui vous a été proposé dans le A) de cette étape.

Par exemple : #PORTRAITCONTENU P { background-color: purple; }



Vous pouvez modifier les bordures d'à peu près tous les éléments détaillés dans l'étape 1. Par exemple, la bordure du #PORTRAITHEADER a été ajoutée, grossie et colorée pour donner cette bordure verte.

le code : border: solid valuepx color;
solid => créé la bordure si elle est inexistante
valuepx => grosseur de la bordure où "value" est une valeur chiffrée en pixels (si la valeur est zéro, la bordure sera inexistante)
color => couleur de la bordure où "color" est remplacée par la couleur de votre choix

Par exemple, pour créé un cadre vert de 3 pixels autour du #PORTRAITHEADER sans aucune autre modification, le code sera : #PORTRAITCONTENU { border: solid 3px green; }



A) Modifier la police

code : font-family : police ; où police est remplacée par la police de caractère de votre choix

B) Modifier la taille de la police

code : font-size: largeur ; où largeur est remplacée par la taille désirée. Il existe des valeurs prédéterminées : xx-small, x-small, small, medium, large, x-large, xx-large

C) Modifier l'épaisseur de la police

code : font-weight: bold ; où bold vous permet d'obtenir un texte écrit en gras.

D) Modifier la couleur de la police

code : color: couleur ; où couleur est remplacé par la couleur de votre choix.