[Tuto] Habiller ses posts
Olympus Project :: Hors-jeu :: Echanges
Page 1 sur 1 • Partagez
[Tuto] Habiller ses posts
Pour personnaliser son RP, on peut utiliser du code HTML/CSS. Par exemple moi j'ajoute un fond bibliothèque à mes 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) :
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 :
Un que j'ai appelé "cadre" pour gérer le cadre de mon RP.
Et à l'intérieur il y a un autre div que j'ai appelé "text" pour gérer… le texte de mon RP
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(https://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 :)
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>
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(https://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
Re: [Tuto] Habiller ses posts
Oh pratique ^-^ Merci pour la contribution *augmente le niveau d'importance du post pour visibilité, parce qu'on aime les tutos*
Re: [Tuto] Habiller ses posts
Merci Laurelynn <3
J'ai juste une question, est ce que tu as un truc qui fait retour à la ligne automatique?
Kissouille
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
Re: [Tuto] Habiller ses posts
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 ?)
(en supprimant le code text-align:justify; le texte ne sera plus justifié mais aligné à gauche, c'est peut être ce que tu cherche ?)
Re: [Tuto] Habiller ses posts
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 !
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 !
Olympus Project :: Hors-jeu :: Echanges
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|