— kit de l'esthétisme.

**Messages :** 77

kit de l'esthétisme

— CTRL + F = recherche rapide (Windows)
— Commande + F = recherche rapide (Apple)

<-------

ABUSEZ-EN!

Plus sérieusement, la recherche rapide est l'outil idéal pour vous y retrouver dans les codes et évitez les erreurs. Toujours dans cette optique, afin de faciliter au mieux votre expérience sur le forum, nous avons donc décidé de vous faire un petit "kit de l'esthétisme".

LES IMAGES

Le codage pour les images se déclinent de plusieurs façons. Pour commencer, nous avons le classique, très simple et connu de tous :

Code:

[img]http://nsa38.casimages.com/img/2017/06/11//170611090516984513.gif[/img]

Mais sur STBO, nous utilisons plutôt le code htlm qui permet de les afficher de la même façon tout en y apportant des modifications, contrairement à celui ci-dessus. Vous le retrouverez sur tous les codages du forum, principalement les fiches etc. Il se présente de cette façon :

Code:

<img src="http://nsa38.casimages.com/img/2017/06/11//170611090516984513.gif">

Pour réduire votre image - puisque l'agrandir n'est pas le mieux : elle se floute -, vous devez vous y prendre comme ceci :

Code:

<img src="http://nsa38.casimages.com/img/2017/06/11//170611090516984513.gif" width="150">

Le résultat est le suivant :

Pour vos signatures et autres mises en forme, il est bien sûr possible de styliser votre image. Dans l'exemple ci-dessous, sa taille a été réduite ainsi que son opacité (le forum étant très clair, pour le bien des yeux de vos congénères, évitez de la baisser trop fortement, l'idéal étant 0.9 et 0.7 sur ce type de design).

Code:

<img src="http://nsa38.casimages.com/img/2017/06/11//170611090516984513.gif" width="150" style="opacity: 0.8;">

Pour éviter les espaces trop importants entre un texte et une image (ce qui peut parfois arriver lorsqu'on code une signature), vous pouvez y intégrer un margin (la taille des marges à l'extérieur de l'élément). Pour l'exemple, j'ai crée un espace entre l'image et le texte, grâce à un
- qui crée donc un espace, cqfd -, et j'ai pu les rapprocher avec un margin-bottom (marge du bas) en mettant une valeur inférieure à zéro ; -0 = espace réduit / +0 = espace élargi.

Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos.

Voici le code :

Code:

<img src="http://nsa38.casimages.com/img/2017/06/11//170611090516984513.gif" width="150" style="opacity: 0.8; margin-bottom: -20px;">
<br>
Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos.

Enfin, les avatars des formulaires du forum apparaissent automatiquement en noir et blanc, par souci d'esthétisme, comme ceci :

Le code utilisé est le suivant :

Code:

<img src="http://nsa38.casimages.com/img/2017/06/11//170611090737791163.gif" style="filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);">

Mais pour celles qui voudraient conserver les effets colorés d'un avatar noir et blanc ou monochrome, tel que celui ci-dessus, il vous suffit de retirer ceci : filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);

Ensuite, le code doit ressembler à ceci :

Code:

<img src="http://nsa38.casimages.com/img/2017/06/11//170611090737791163.gif" style="">

+ les gifs / images dans le profil doivent être impérativement en largeur (ou carré) et pas en hauteur.

LES LIENS

Comme pour les images, il est possible d'afficher un lien tout en y apportant des modifications. Sur forumactif, notamment dans les messages, nous utilisons la plupart du temps celui-ci, qui est directement proposé dans l'éditeur :

Smoke the blighter out

Code:

[url=https://i.imgbox.com/CvnJX5Yc.gif]Smoke the blighter out[/url]

Mais, encore une fois, sur STBO, nous utilisons plutôt sa version htlm. Pour vous permettre de l'utiliser au mieux si le besoin se présente (nous pensons au fiche de liens où il est possible d'en voir un), voici comment il se présente :

Code:

<a href="http://dreamsaremyreality.forumsrpg.com/forum">Smoke the blighter out</a>

Vous pouvez lui imposer une couleur, comme ceci :

Code:

<a href="http://dreamsaremyreality.forumsrpg.com/forum" style="color: #424DC7;">Smoke the blighter out</a>

Smoke the blighter out

Et lui apporter, là aussi, des stylisations. Par exemple, je l'ai directement mis en majuscule (une bible de css sera à votre disposition plus bas).

Code:

<a href="http://dreamsaremyreality.forumsrpg.com/forum" style="color: #424DC7; text-transform: uppercase;">Smoke the blighter out</a>

Smoke the blighter out

BIBLE CSS

Pour utiliser le CSS, il faut d'abord créer une div. Une div s'ouvre et se ferme. Exemple :

Code:

<div></div>

Afin d'appliquer les décorations souhaitées, il faut utiliser un style de div spécifique, permettant une modification à même l'éditeur, qui est : div style. Là, nous reprenons l'exemple du texte en majuscule :

Code:: <div style="text-transform: uppercase;">exemple.</div>

exemple.

Le même code avec plusieurs décorations de suite, ici une taille 25 a été rajoutée :

Code:: <div style="text-transform: uppercase; font-size: 25px;">exemple.</div>

exemple.

Ci-dessous, une liste non exhaustive des différentes décorations possibles.

— POLICE.

Code:: <div style="font-family: police;">police.</div>

+ la police ajoutée au forum est celle-ci : "Montserrat". Elle apparaît sur les titres des annexes, etc. Elle ressemble à ceci :

Montserrat.

TAILLE.

Code:: <div style="font-size: 0px;">TAILLE.</div>

— couleur.

Code:: <div style="color: #424DC7;">couleur.</div>

+ Évitez les couleurs trop vives, par exemple pour les dialogues. Privilégiez plutôt des teintes neutres, telles que celles-ci :

« Dialogue »

Code:: <div style="color: #383657;">« Dialogue »</div>
<div style="color: #573636;">« Dialogue »</div>
<div style="color: #365751;">« Dialogue »</div>

— MINUSCULE.

— majuscule.

Code:: <div style="text-transform: uppercase;">MINUSCULE.</div>
<div style="text-transform: lowercase;">majuscule.</div>

— texte en italique.

— texte en gras.

Code:: <div style="font-style: italic;">texte en italique.</div>
<div style="font-weight: bold;">texte en gras.</div>

— texte souligné.

— texte souligné avec une couleur.

Code:: <div style="text-decoration: underline;">texte souligné.</div>
<div style="text-decoration: underline #424DC7;">texte souligné avec une couleur.</div>

— texte centré / Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos.

— texte justifié / Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos.

— texte à droite / Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos.

— texte à gauche / Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos.

Code:: <div style="text-align: center;">texte centré.</div>
<div style="text-align: justify;">texte justifié.</div>
<div style="text-align: left;">texte à droite.</div>
<div style="text-align: right;">texte à gauche.</div>

— espace plus large entre les lettres.

— espace réduit entre les lettres.

Code:: <div style="letter-spacing: 8px;">espace plus large entre les lettres.</div>
<div style="letter-spacing: -1px;">espace réduit entre les lettres.</div>

— spécifier l'espace entre les lignes / Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos.

Code:: <div style="line-height: 20px;">spécifier l'espace entre les lignes.</div>

— éviter un retour à la ligne non désiré.

Code:: <div style="display: inline;">— éviter un retour à la ligne non désiré.</div>

— imposer une largeur / Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos.

Code:: <div style="width: 250px;">imposer une largeur.</div>

— imposer une hauteur / Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis.

Code:: <div style="height: 20px;">imposer une hauteur.</div>

— mettre une bordure / Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos.

Code:: <div style="border: 1px solid; padding: 4px;">mettre une bordure.</div>

+ installer un padding (la taille des marges à l'intérieur de l'élément) empêche que le texte se colle aux bordures.

+ il est possible de choisir la couleur de la bordure : border: 1px solid #424DC7.

+ idem, vous pouvez choisir quelle bordure vous voulez voir apparaître :
- border-top : une bordure en haut.
- border-bottom : une bordure en bas.
- border-left : une bordure à droite.
- border-right : une bordure à gauche.

— mettre un fond de couleur / Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos.

Code:: <div style="background-color: #F5F5F5; padding: 4px;"><b>— mettre un fond de couleur</b> / Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos.</div>

+ comme pour les bordures, installer un padding est préférable.
+ là aussi, évitez les couleurs trop vives ou prononcées, un fond de cadre est plus joli quand il est discret.

Dernier exemple (moche).

Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant.

Code:: <center><div style="font-family: times; font-size: 13px; color: #383657; text-transform: uppercase; font-style: italic; text-decoration: underline; text-align: center; letter-spacing: 2px; line-height: 11px; width: 350px; border: 1px solid; padding: 4px; background-color: #F5F5F5;">Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant.</div></center>