communauté francophone de joueurs sims
 
AccueilAccueil  Le site  Chaine You Tube  S'enregistrerS'enregistrer  ConnexionConnexion  FAQFAQ  RechercherRechercher  

Partagez | 
 

 [Apprenti] Personnalisation des posts dans un forum

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Poseur d'avant-garde
avatar
Illendel
Poseur d'avant-garde
Féminin Date d'inscription : 16/10/2009
Age : 28
Localisation : Lyon

MessageSujet: [Apprenti] Personnalisation des posts dans un forum   Mer 08 Juin 2011, 19:35

Bonjour

Aujourd'hui je vais vous apprendre à personnaliser vos posts sur le forum. Le BBcode des forums est déjà sympa mais plutôt limité, ici je vais vous apprendre à étendre vos possibilités.
Vous allez me dire, c'est un sujet vaste. Il est important de ne pas s'en servir à outrance et dans ce premier tutoriel, je ne vais en présenter que certaines utilisations. Dans le cas de ce forum, cela peut-être utile pour faire une jolie chronique et bien présenter son tutoriel. On ne tape pas, je n'ai pas utilisé cette technique pour ne pas mélanger ce que je vais vous montrer avec des fioritures. L'important, c'est de ne pas en abuser et d'éviter de créer des entorses oculaires à vos lecteurs. Alors allez-y doucement avec les effets et les couleurs ^^

Ce tutoriel va également vous permettre de vous initier au HTML et au CSS pour ceux qui ne connaissent pas. Pour les autres, vous n'avez pas franchement besoin de moi si ce n'est pour utiliser l'idée bien sûr. L'objectif de ce tutoriel n'est PAS de vous apprendre à maîtriser ces langages. Pour l'instant, je vous invite à rendre une petite visite au site du zéro, tout en sachant que je reste disponible pour toute question. Ceci n'est qu'une présentation rapide et simple, qui n'a pas vocation à donner des explications détaillées des balises.
Commençons donc par quelques petites balises pour structurer votre post. Cette liste est non exhaustive et pourra être complétée à l'avenir.

Pour définir un bloc:
Code:
<div> </div>

Pour mettre en valeur:
Code:
<span> </span>

Pour créer des titres de différents niveau:
Code:
<h1> </h1>
<h2> </h2>
<h3> </h3>

Pour mettre du texte (paragraphe):
Code:
<p> </p>

Pour créer un tableau:
Code:
<table> </table>
Ligne: <tr> </tr>
Cellule: <td> </td>

Structure:
<table>
   <tr>
      <td></td>
      <td></td>
   </tr>
   <tr>
      …
   <tr>
</table>

Pour être tout à fait honnête, vous n'irez pas très loin avec ça et ça aura pas forcément une très bonne tête. Notre objetif est de faire quelque chose de joli, donc il va nous falloir styler un peu tout ça. C'est là que les CSS entrent en scène. Là encore je n'ai pas pour objectif de vous apprendre ce langage mais seulement de vous donner un aperçu des possibilités qui s'offrent à vous. Le site du zéro vous donnera des précisions et une liste des attributs et des options possibles.
Je vais vous parler d'attributs et de valeurs. Les styles se définissent sous la forme suivante:
attribut: valeur;

Pour définir la taille d'un bloc, on utilise les attributs width et height, définissant respectivement la largeur et la hauteur. Si ces attributs ne sont pas précisés, le bloc sera à la taille dont il a besoin pour afficher la totalité des élements qu'il contient et de ses limites d'affichage. Etant dans un forum, un bloc sera limité automatiquement par sa largeur. Attention à ne pas mettre de valaurs trop grandes qui déformeraient la page. Les valeurs sont données en pixels (par exemple 100px), auto étant la valeur par défaut.
Code:
width: 100%;
height: 300px;

Pour éviter de tasser nos petites affaires, il nous faudra espacer les différents éléments. Ces attributs comportent quelques subtilités que je ne développe pas ici, vous savez vers où je vais vous rediriger pour avoir des détails … en cas de problème je suis toujours là.
Pour mettre des marges entre les blocs, on utilise margin, avec des valeurs en pixels. Ceci mettra une marge constante tout autour du bloc.
Marge au-dessus du bloc: margin-top
Margin en dessous du bloc: margin-bottom
Margin à gauche: margin-left
Margin à droite: margin-right
C'est logique n'est-ce pas ?
Pour que nos blocs soient aérés, on choisira plutôt des marges internes, définies par l'attribut padding. Il fonctionne exactement comme margin, seul l'effet est différent.
Code:
margin: 10px;
padding: 5px;

Bon c'est bien gentil tout ça, mais si on n'affiche que du texte ça ne sert pas à grand chose à part nous mettre des blancs dans tous les sens. Avec des bordures ce sera plus chouette. L'attribut border s'en chargera et on peut également choisir si on ne veut en mettre qu'à certains endroits du bloc avec top, bottom, right et left, exactement comme pour les marges.
Les caractéristiques de la bordure sont données ainsi: épaisseur style couleur.
L'épaisseur est en pixel, pour un trait fin, on optera pour 1px.
Les styles possibles sont solid, dotted, dashed pour les plus courants (En moins utilisés on a double, groove, ridge, inset et outset. Evidemment ça se teste ^^).
La couleur peut être donnée par son nom anglais (black, red …) ou par son code sous la forme d'un # suivi de six chiffres.
Code:
border: 2px solid #000000;

Pour mettre un fond, on utilise l'attribut background et on donne sa couleur de la même manière que pour la bordure. Nous avons également la possibilité de mettre une image de fond, la valeur de background devenant url('adresse-de-l-image'). Cette dernière possibilité est à utiliser avec parcimonie et attention, cela peut vite devenir encombrant voire carrément horrible si l'image se répète mal ou si elle est mal redimensionnée. J'aurais peut-être l'occasion de revenir sur ce point dans un autre tutoriel, en attendant, je garde toujours la même référence et cherchez des options contenant repeat, tout en sachant que je suis dans le coin en cas de besoin (je me répète mais étant donné le peu d'informations que je donne, je ne veux pas vous donner l'impression que je vous laisse vous dépatouiller)
Code:
background: #123456;
background: url('images/fond.png') no-repeat;

Bon ça nous fait déjà quelques éléments intéressants. Voyons un exemple de ce qu'on peut faire avec tout ça et comment le code s'organise.


Code:
<div style="width:400px; height: 200px; border: 1px dashed #BBCDD3; margin: 10px">
</div>


Fiou. Et si vous croyez que c'est fini, vous vous trompez. Ce n'est qu'un tout petit début.
Essayons maintenant de donner une bonne tête à notre texte, peu importe qu'il soit dans un span, un paragraphe, un titre ou un tableau ou ce que vous voulez.

Alors déjà on va pouvoir changer de couleur avec l'attribut color. Là c'est comme pour background, soit on met comme valeur la couleur en anglais, soit un code couleur.
Code:
color: #88C700
Exemple :

Texte coloré



On peut créer un petit décalage en début de paragraphe qui ne sera appliqué qu'à la première ligne. Ca peut être très intéressant quand il n'y a qu'une ligne, pour créer des effets de décalage.
Code:
text-indent: 10px;
Exemple :

Texte indenté de 10 pixels



On va également avoir besoin d'un paquet d'attributs qui commencent par font-. Je ne donne que ceux qui sont utilisés régulièrement et que vous serez donc susceptible d'avoir besoin.
font-size: Détermine la taille de la police en pixels
font-family: Donne une liste de polices de caractères, utilisant la première en priorité et passe à la suivante si la première est introuvable et ainsi de suite
font-style: italic ou oblique (je ne vous fais pas de dessin, ça se teste évidemment^^)
font-weight: Modifie l'épaisseur des caractères. Les valeurs possibles sont bold, bolder, lighter et normal par défaut. On peut également mettre des nombres (100, 200, 300 …).
font-variant: La seule possibilité est small-caps (petites majuscules). Sachant qu'il y a normal par défaut et inherit que j'explique juste en-dessous.
Code:
font-size: 14px;
font-family: Helvetica, sans-serif;
Exemple :

Texte taille 14, Helvetica



Ensuite on va passer à des attributs ayant des valeurs plus spécifiques. c'est à dire que la liste des possibilités est clairement déterminée.
Ce genre d'attribut a 'none' comme valeur par défaut et il est possible de choisir 'inherit', ce qui donne au bloc la valeur de l'attribut du bloc parent, c'est à dire celui dans lequel notre bloc actuel est contenu. J'espère que je n'ai perdu personne au passage …

L'attribut text-transform a trois valeurs possibles.
uppercase: Met toutes les lettres en majuscules
lowercase: Met toutes les lettres en minuscules
capitalize: Met des majuscules à chaque début de mot
Code:
text-transform: uppercase;
Exemple :

Texte en majuscules



L'attribut text-decoration a quatre valeurs possibles.
underline: Souligne le texte
overline: Surligne le texte (Créé une ligne au dessus du texte si vous voulez)
line-trough: Raye le texte
blink: Fait clignoter le texte /!\A utiliser avec parcimonie voire carrément pas du tout/!\
Code:
text-decoration: underline;
Exemple :

Texte souligné



L'attribut text-align va nous permettre de déterminer l'alignement du texte (C'est un scoop que je vous sors là !)
Les valeurs possibles sont center, justify (justifié), right et left par défaut.
Code:
text-align: justify;

Exemples d'usages possibles :


Titre qui a la classe



Code:
<div style="margin:10px;border-bottom:3px solid #C9B18D">
<span style="color:#C9B18D;text-transform:uppercase;">
[b][size=18]Titre qui a la classe[/size][/b]
</span>
</div>


---------- ---------- ----------



Note supplémentaire

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quam est, malesuada sed auctor id, pulvinar fermentum ipsum. Aliquam lorem turpis, hendrerit id dignissim at, consectetur sit amet tortor. Phasellus quis massa eros, vitae euismod odio. Proin et mi vel est dignissim placerat et eget libero.




Code:
<div style="float:right;width:300px;margin:10px;padding:0 10px 0 10px;background-color:#EEE;border:1px solid #CCC">
[b][u]Note supplémentaire[/u][/b]
<p>[i]Lorem ipsum dolor sit amet, [...] placerat et eget libero.[/i]</p>
</div>


Dernière édition par Illendel le Mer 14 Déc 2011, 19:19, édité 3 fois
Revenir en haut Aller en bas
Poseur d'avant-garde
avatar
Illendel
Poseur d'avant-garde
Féminin Date d'inscription : 16/10/2009
Age : 28
Localisation : Lyon

MessageSujet: Re: [Apprenti] Personnalisation des posts dans un forum   Lun 31 Oct 2011, 21:06

MODE D'EMPLOI

N'hésitez pas à remercier l'auteur de ce tutoriel ou à faire partager votre expérience personnelle. Si vous avez créé quelque chose en suivant le tuto pourquoi pas la poster afin de la montrer à l'auteur

-----------------------------------------

Pour d'éventuelles questions, c'est par ici et si vous souhaitez en apprendre plus sur le sujet, rendez-vous dans la salle travaux pratiques

Bonne journée

Revenir en haut Aller en bas
Illustre illustrateur
avatar
Cassie
Illustre illustrateur
Féminin Date d'inscription : 23/04/2011
Age : 19

MessageSujet: Re: [Apprenti] Personnalisation des posts dans un forum   Mer 14 Déc 2011, 14:01

Super tuto Ill' !
Je pense qu'il va servir à pas mal de monde !
Revenir en haut Aller en bas
Poseur d'avant-garde
avatar
Illendel
Poseur d'avant-garde
Féminin Date d'inscription : 16/10/2009
Age : 28
Localisation : Lyon

MessageSujet: Re: [Apprenti] Personnalisation des posts dans un forum   Mer 14 Déc 2011, 15:36

Merci.
Bien sûr, au besoin je suis là, si quelqu'un souhaite faire quelque chose de particulier, je suis là pour aider.
Revenir en haut Aller en bas
Grand artiste du pinceau
avatar
Maripiou
Grand artiste du pinceau
Féminin Date d'inscription : 29/01/2011
Age : 31
Localisation : Au Sud

MessageSujet: Re: [Apprenti] Personnalisation des posts dans un forum   Mer 14 Déc 2011, 19:13

Merci pour le tuto. J'ai lu en diagonal, mais j'aime bien la présentation que tu as faite et c'est vrai que ça serait sympa d'avoir une présentation comme celle-là (ou une autre hein ^^), pour tous les tutos. Very Happy
Revenir en haut Aller en bas
http://maripiou.jimdo.com/
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 38
Localisation : Aubais

MessageSujet: Re: [Apprenti] Personnalisation des posts dans un forum   Mer 14 Déc 2011, 19:17

Super merci Ill pour le tuto


Spoiler:
 


Dernière édition par Fuyaya le Jeu 15 Déc 2011, 13:34, édité 1 fois
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Contenu sponsorisé


MessageSujet: Re: [Apprenti] Personnalisation des posts dans un forum   

Revenir en haut Aller en bas
 
[Apprenti] Personnalisation des posts dans un forum
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Comment s'inscrire dans le forum Accueil de l'Université (In
» Arrivée dans votre forum de Cagouille 17
» Neth dans votre forum !! ^^'
» AJOUTER UN MINI LECTEUR DE MUSIQUE DEEZER A VOS POSTS
» Comment poster dans le forum modélisme ( à lire)

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Sims Artists :: Apprentissage :: Informatique et Internet :: HTML / CSS-
Sauter vers: