SOIGNER LA MISE EN PAGE ✧. ❛ profil, rps, signature etc...

Nous le savons tous, le codage n'est pas chose facile pour tout le monde. Sur I Love Harvard, vous avez la possibilité de personnaliser vos profils, signatures ou encore, rps et fiches de lien. Néanmoins, nous savons que tous le monde ne connait pas les petites astuces pour soigner la mise en page. C'est pourquoi, nous vous offrons ce petit tutoriel... Enjoy !

La zone des profils peut vous sembler compliquer à personnaliser et pourtant, dans cette partie, vous ne pouvez utiliser que le BBCode, autrement dit, la base en matière de codage et accessible à tous.

Pour ce qui est du reste (mise en page, signature...), vous pouvez utiliser le BBCODE ET HTML.

IMPORTANT

Il faut TOUJOURS fermer une balise. Si vous ouvrez une balise comme img ou blockquote ou encore div, vous devez la fermer à la fin.

Qui plus est, vous devez les fermer dans l'ordre d'ouverture si vous en avez ouvert plusieurs.

Le bon exemple :

Code:

[strike][i][b][/b][/i][/strike]

Concernant les div, vous devez refermer toutes les divs que vous avez ouvert. Si vous en ouvrez trois, alors il faudra en fermer trois.

IMPORTANT
Il faut TOUJOURS fermer une balise. Si vous ouvrez une balise comme img ou blockquote ou encore div, vous devez la fermer à la fin.


Pour mettre une image/un gif, il vous faut utiliser cette balise :

Code:

[img][/img]

Pour redimensionner l'image et/ou le gif, il vous suffit d'ajouter le nombre de pixels voulus dans cette même balise. Attention à respecter les proportions ! (Pour ceux qui ont du mal avec les maths, rendez-vous sur google, vous trouverez facilement des sites qui feront le calcul à votre place.)

Code:

[img(80px,80px)][/img]

Pour mettre un gif et/ou une image avec du HTML, c'est avec cette balise que cela se passe :

Code:

<img src="LIENDEVOTREIMAGE" style="width:80px;"/>

ou encore

Code:

<img src="LIENDEVOTREIMAGE" width="80">

Width étant la largeur et height la hauteur, c'est à vous de modifier ce champ et de mettre le nombre de pixels que vous souhaitez pour définir la taille de l'image/du gif.

HTML UNIQUEMENT
Mettre une image, c'est bien, mais la mettre en page, c'est mieux. Ici, quelques petites astuces...

Pour cela, on va reprendre le code plus haut.

Code:

<img src="LIENDEVOTREIMAGE" style="width:80px;"/>

Les modifications se feront dans la partie "style", il suffira de séparer chaque "partie" par un ;


Pour arrondir, il faudra simplement ajouter un border-radius ainsi que des pixels.

Code:

<img src="LIENDEVOTREIMAGE" style="border-radius: 5px;"/>

Pour mettre une bordure, il faudra ajouter la balise "border" puis, y mettre une couleur, un nombre de pixels pour l'épaisseur de la bordure et de ne pas oublier de mettre la forme que l'on peut que notre bordure prenne. Solid donnera une bordure normale tandis que dotted donnera une bordure pointillées avec des points et dashed donnera une bordure pointillées avec des traits. Pour doubler la bordure, il conviendra de mettre "double". Si vous voulez un effet d'ombre creusée, vous pouvez mettre groove dont l'effet inverse est ridge. À l'inverse, pour un effet d'ombre en relief, vous pouvez utiliser outset ou inset.

Code:

<img src="LIENDEVOTREIMAGE" style="border: #000000 3px solid;"/>

Si l'on met une image, qu'on la redimensionnement, arrondit les bords et ajoute une bordure, cela donnera :

Code:

<img src="LIENDEVOTREIMAGE" style="width:80px;border-radius: 5px;border: #000000 3px solid;"/>

IMPORTANT
Il faut TOUJOURS fermer une balise. Si vous ouvrez une balise comme img ou blockquote ou encore div, vous devez la fermer à la fin

La balise la plus utilisée sur le forum pour mettre en page un long texte est la balise blockquote. Celle-ci permet d'avoir une marge à gauche et à droite, et de mettre le texte en justifié.

Code:

<blockquote>VOTRE TEXTE ICI</blockquote>

Voici quelques effets en html pour le texte :
Le # c'est pour la couleur et les px sont les pixels.

Code:

<div style="text-shadow: 1px 1px 1px #000000;">votre texte ici</div>

Code:

<div style="letter-spacing:-1px;">Écriture collée</div>

Un nombre négatif va serrer le texte.

Code:

<div style="letter-spacing:4px;">votre texte ici</div>

Un nombre positif va espacer les lettres.

Pour ce qui est du BBCode, il suffit de reprendre les balises que forumactif propose quand vous écrivez un message.

Texte en gras

Code:

[b]Texte en gras[/b]

Texte en italique

Code:

[i]Texte en italique[/i]

Texte souligné

Code:

[u]Texte souligné[/u]

Texte barré

Code:

[strike]Texte barré[/strike]

Aligné à gauche

Code:

[center]Centré[/center]

Code:

[right]Aligné à droite[/right]

Code:

[justify]Texte en justifié[/justify]

• Liste
  
• Liste
  
• Liste
  

Il suffit de rajouter des * entre crochet vous même entre les balises list.

Code:

[list][*]Liste
[*]Liste
[*]Liste[/list]

1. Autre liste
   
2. Autre liste
   
3. Autre liste
   

Il suffit de rajouter des * entre crochet vous même entre les balises list=1.

Code:

[list=1]
[*]Autre liste
[*]Autre liste
[*]Autre liste
[/list]

Citer un message

Code:

[quote]Citer un message[/quote]

Il y a deux façons de cacher un message, la première est le spoiler, tout le monde y a accès en cliquant pour l'afficher :

Spoiler:

Code:

[spoiler]Cacher un message en spoiler[/spoiler]

La seconde est le hide, seules les personnes postant dans le sujet verront le message :

Code:

[hide][/hide]