Ce sujet a pour but d'aider les plus motiver à rendre plus "beau" leur post RP.

Avant-tout:

(Cette partie à pour but de vous aider à comprendre ce que vous faîtes et pas copier bêtement les codes sans en saisir le sens plus tard. Elle est peu digeste, mais évitera à beaucoup de se prendre la tête.)

Il y a pour comprendre mes explications quelques notions à savoir.

La plus basique c'est les couleurs, sur internet, les couleurs ressemble à ça "#ff0000" ce qui est en réalité du Rouge. Alors non contrairement à ce que vous pourriez penser au premier abord, ce n'est pas le mot de passe pour du porno gratuit, ce qui est bien dommage, il s'agit là d'un code hexadécimal, c'est lui qui dit qu'elle couleur est affichée.

Un très bon site pour ce qui veulent facilement avoir accès à ces codes se trouve ICI et je vous recommande vivement de le mettre en favori pour l'avoir à portée de clic lors de vos rp. Choisissez votre couleur dans la palette, et il vous donne directement le code correspondant à la "Code Hex:".(Notez qu'il faudra penser à rajouter un # avant ce code dans vos post)

L'autre notion que je n'aborderais que succinctement est une propriété HTML basique mais puissante qui se nomme la div. Elle se code à la base de cette façon:

Code:

<div> Votre contenu </div>

Sauf que ainsi elle ne sert pas vraiment à grand chose si ce n'est à donner une existence à notre contenu pour le site. Ce qui va nous intéressé nous, c'est qu'elle donne un effet à ce contenu, ce qu'on appelle dans le milieu un "style", pour cela il y a plusieurs moyens. Taper toutes les données que l'on veut dans la div, ou bien héberger ces informations sur un fichier css.

Voici un exemple de la première méthode:

Code:

<div style="background-color:#ff0000;color:#3333FF;margin-left:20px;">Votre contenu</div>

Ce qui donne:



Alors deux remarques à faire, premièrement c'est hyper moche, ça vous montre qu'il faut bien choisir les effets que vous mêlez sur votre contenu. Deuxièmement, ça fait rajouter un tas d'info peu compréhensible et qui rallonge foutrement le boulot. Décortiquons un peu ce code:

Tous nos effet sont contenus dans style="" les guillemets sont donc l'espace dans lequel on met nos effet. Il y en a trois ici:

• background-color:#ff0000; qui met le fond en rouge
  
• color:#3333FF; qui met le texte en bleu
  
• margin-left:20px; qui crée une marge de vingt pixels a gauche de notre contenu, ce qui donne cet effet de décalage.
  

Chaque effet se termine par un ; nécessaire pour que le site sache qu'il es fini. En général les effets sont facilement compréhensible puisque qu'ils sont composé de mot anglais. Avec cette méthode vous pouvez personnaliser vos div en profondeurs, et directement dans le message, hélas cela fait vite un code brouillon et trèèèèèès long selon le nombre d'effet.

L'autre méthode est d'appliquer un effet prédéfini qui est contenu sur un fichier CSS. Par chance, MER a accès à un fichier de ce type qui gère son design global, dedans j'ai retaper les mêmes effet que ci-dessus.
Alors vous allez me dire "C'est bien gentil de l'avoir taper là-bas, mais comment on y accède nous ?" à quoi je répondrais, patience petit scarabée.
Il existe pour cela une très simple méthode, remplacer les style="" par le class""! Le class va chercher lui même dans notre fichier css le nom de groupe qu'on lui donne et les effets qui y sont lié. J'explique:

Sur le fichier css que vous ne voyez pas j'ai la chose suivante :

Code:

.moche {
 
background-color:#ff0000;
color:#3333FF;
margin-left:20px;

}

"moche" est le nom du groupe(je sais c'est très inspirer), et entre les accolades on retrouve les mêmes effet que plus haut. Grace au class="" on va pouvoir très simplement appliquer ces effets sur notre contenu en tapant simplement:

Code:

<div class="moche">Votre contenu</div>

Ce qui donne:



Comme vous pouvez le voir on retrouve nos effets très laid à l'identique mais avec un code bien plus lisible pour nos petits yeux.

La dernière chose à savoir, c'est que l'on peut combiner les deux, imaginons que je veux appliquer "moche" à mon contenu, mais avec un fond vert à la place de rouge. Il suffira de mêler un class="" et un style="" dans votre div. Démonstration:

Code:

<div class="moche" style="background-color:#006600;">Votre contenu</div>

Ce qui donne:



C'est encore plus beau qu'avant ma foi ! C'est grâce à cette technique que vous pourrez personnaliser les effets que je vous proposerais à la suite.

Voilà, vous avez atteint le bout de cette section, si certains veulent en apprendre plus sur le CSS et ses possibilités pour créer leur propre style, on pourra en discuter par mp ou sur un tuto plus avancer si besoin. Passons à la pratique dans vos post.

Faire ressortir l'élément d'un rp:

Actuellement, vos rp ressemblent à ça:

Spoiler:

C'est lisible, c'est assez clair, mais ça manque peut être de gueule non ? On va essayer d'arranger ça, notamment en mettant en valeur les dialogues. C'est ici qu'on va se servir de nos div et de class que j'ai créer pour vous.

D'abord un truc très simple, on met un cadre autour de nos dialogue, avec une petite bordure de ce style:



Avec ce code ci:

Code:

<div class="cadresimple">Votre contenu</div>

Dans le rp:

Spoiler:

Maintenant on personnalise avec la couleur de notre choix grâce à ce code:

Code:

<div class="cadresimple" style="boder-color:(votre code couleur);">Votre contenu</div>

Par exemple:

Spoiler:

Ce n'est pas grand chose, car les effet sont basique, mais avec ça vous avez déjà une idée de comment mettre en valeur vos textes.

Différents effets prédéfinis:

Je vais maintenant vous donner quelques class que j'aurais créer moi même et dont vous pourrez personnaliser la couleur par vous même grâce au chapitre précédent.

Les class=""

Code:

<div class="cadre1"></div>

Code:

<div class="cadre2"></div>

Code:

<div class="cadre3"></div>

Code:

<div class="cadre4"></div>

Code:

<div class="cadre5"></div>

Code:

<div class="cadre6"></div>