[Tuto] Habiller ses posts

Voir le sujet précédent Voir le sujet suivant Aller en bas

[Tuto] Habiller ses posts

Message par Invité le Mar 18 Avr 2017, 16:24

Pour personnaliser son RP, on peut utiliser du code HTML/CSS. Par exemple moi j'ajoute un fond bibliothèque à mes RP :

Ici j'écris mon RP !


Pour faire ça j'utilise un petit bout de code très simple que je vais vous expliquer et que vous pourrez adapter à vos usages :)
C'est le même type de code qui est utilisé quand vous avez posté vos fiches de personnages.
Je fais ce tuto pour des personnes qui ne connaissent rien en HTML ou CSS et en essayant d'être la plus explicite possible.
N'hésitez pas à poser des questions ou faire des remarques.

Voilà à quoi ça ressemble (oui comme ça c'est pas très lisible) :
Code:
<style>.cadre-NomPerso{min-height:500px;background:url(http://i.imgur.com/18BIJv8.jpg);border:3px solid black;margin:auto;position:relative;}.text-NomPerso{min-height:325px;color:black;background:rgba(285, 285, 285, 0.8);text-align:justify;margin:30px;padding:10px;</style>
<div class="cadre-NomPerso"><div class="text-NomPerso">Ici j'écris mon RP !</div></div>

Avec une petite coloration et un peu d'espace ça donne ça :



Bon qu'est-ce qu'il y a là dedans ?
Déjà c'est séparé en 2 parties. La partie «style» où est placé le CSS et la partie HTML. Les 2 sont très liées.

Commençons par le HTML :
Code:
<div class="cadre-NomPerso"><div class="text-NomPerso">Ici j'écris mon RP !</div></div>
On voit des éléments "div", ce sont des conteneurs en HTML.

Un que j'ai appelé "cadre" pour gérer le cadre de mon RP.
Code:
<div class="cadre-NomPerso"></div>

Et à l'intérieur il y a un autre div que j'ai appelé "text" pour gérer… le texte de mon RP
Code:
<div class="text-NomPerso"></div>

Imaginez une boîte "text" dans une boîte "cadre".
Maintenant qu'on a nos conteneurs on va les habiller :)

Alors dans la balise style on a 2 aussi parties : "cadre" et "text".
Vous pouvez alors deviner que la partie "cadre" s'occupe du conteneur "cadre" et la partie "text" du conteneur "text".

Voici la partie cadre, je vais commenter chaque ligne en rouge :

.cadre-NomPerso{
min-height:500px; < ici c'est hauteur minimale du cadre
background:url(http://i.imgur.com/18BIJv8.jpg); < l'adresse vers l'image du cadre
border:3px solid black; < le style de la bordure
margin:auto; < la gestion des marges autour du cadre
position:relative; < la position du cadre dans le poste
}


La hauteur minimale du cadre c'est pour que quand il y a peu de lignes le cadre ne soit quand même pas tout riquiqui.
L'adresse vers l'image du cadre définit l'image de fond du RP pour moi ce sont des rayons de bibliothèque.
À noter qu'en l'état si le texte descend trop bas l'image va se répéter.
La gestion des marges en "auto" et la position "relative" permettent au cadre de remplir tout le poste, quelque soit la taille de celui-ci !

Ensuite la partie text :
.text-NomPerso{
min-height:325px; > Hauteur minimale dans le même principe qu'au dessus
color:black; > Pour que le texte paraisse noir
background:rgba(285, 285, 285, 0.8); > La couleur de fond du conteneur, ici un gris très clair en partie transparent
text-align:justify; > Pour justifier le texte
margin:30px; > C'est la distance entre les bords extérieurs du conteneur "text" et les bords extérieurs du conteneur "cadre". C'est la largeur des bords visibles en gros.
padding:10px; > C'est la distance entre les bords extérieurs du conteneur "text" et son contenu (ici le texte)
}


Petite illustration pour le margin et padding :


Maintenant vous pouvez utiliser ce bout de code pour personnaliser vos RP (en remplaçant l'image de fond par exemple) ou en apprendre plus sur le HTML/CSS pour faire des choses plus compliquées.

Attention, quand vous mettez du code dans un poste sur Tsuki, il faut que l'intégralité de la partie style soit sur une seule ligne car le forum interprète mal les retours à la ligne à l'intérieur du code.
Il faut bien changer les noms «NomPerso» avec le nom de votre perso (mais sans espace ni caractères spéciaux !), sinon vous pouvez réécrire les styles des autres membres sans le vouloir !

Dernier conseil :  avant de poster votre plus beau RP vérifiez toujours que votre code marche comme il faut en cliquant sur le bouton «Prévisualiser» avant de l'envoyer vraiment :)


Dernière édition par Laurelynn le Jeu 20 Avr 2017, 16:41, édité 2 fois

Invité
Invité

Revenir en haut Aller en bas

Re: [Tuto] Habiller ses posts

Message par Invité le Mer 19 Avr 2017, 16:13

Oh pratique ^-^ Merci pour la contribution *augmente le niveau d'importance du post pour visibilité, parce qu'on aime les tutos*

Invité
Invité

Revenir en haut Aller en bas

Re: [Tuto] Habiller ses posts

Message par Shulie le Mer 19 Avr 2017, 16:42

Merci beaucoup ♡ Je pense m'en servir ^-^


 
avatar
Shulie

Fiche perso'
Idéologie Dominante: 2
Niveau: 0
Exp:
100/100  (100/100)

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [Tuto] Habiller ses posts

Message par Nils le Mer 19 Avr 2017, 17:17

Merci c'est super utile, je pense m'en servir aussi c:


#F915B4
avatar
Nils

Fiche perso'
Idéologie Dominante: 2
Niveau: 0
Exp:
100/100  (100/100)

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [Tuto] Habiller ses posts

Message par Artemis le Jeu 20 Avr 2017, 13:43

Merci Laurelynn <3
J'ai juste une question, est ce que tu as un truc qui fait retour à la ligne automatique?
Kissouille


Dernière édition par Artemis le Sam 29 Avr 2017, 12:52, édité 1 fois



Je vous parle en #000055 et je miaule, aboie, rugie, meule, bêle, .... en #330000

Rim❤️



Merci Luxia, KEUR:
avatar
Artemis

Fiche perso'
Idéologie Dominante: 2
Niveau: 0
Exp:
100/100  (100/100)

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [Tuto] Habiller ses posts

Message par Invité le Jeu 20 Avr 2017, 14:24

Retour à la ligne c'est à dire ?
(en supprimant le code text-align:justify; le texte ne sera plus justifié mais aligné à gauche, c'est peut être ce que tu cherche ?)

Invité
Invité

Revenir en haut Aller en bas

Re: [Tuto] Habiller ses posts

Message par Artemis le Jeu 20 Avr 2017, 16:23

Non problème résolu désolée.
Merci!



Je vous parle en #000055 et je miaule, aboie, rugie, meule, bêle, .... en #330000

Rim❤️



Merci Luxia, KEUR:
avatar
Artemis

Fiche perso'
Idéologie Dominante: 2
Niveau: 0
Exp:
100/100  (100/100)

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [Tuto] Habiller ses posts

Message par Invité le Jeu 20 Avr 2017, 16:41

J'ai édité mon premier message pour ajouter un avertissement.
En effet, si on a tous les même noms de class et style on va mélanger nos styles (le dernier à poster va imposer son style à tous les autres posts !).

Dans les codes proposés (sauf les images) j'ai ajouté «NomPerso» qu'il va falloir changer suivant le nom de votre perso (sans espace !)

Et j'ai ajouté cette ligne au poste :
Il faut bien changer les noms «NomPerso» avec le nom de votre perso, sinon vous pouvez réécrire les styles des autres membres sans le vouloir !

Invité
Invité

Revenir en haut Aller en bas

Re: [Tuto] Habiller ses posts

Message par Contenu sponsorisé


Contenu sponsorisé

Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum