Liens utiles, astuces et CSS

L'encyclopédie HP
Le Wikia Harry Potter
Le Lexicon (anglais)
Le site de JKRowling
Pottermore
HP Encyclopédia

Une fois dans la partie profil, n'oubliez pas de remplir les champs suivants:
- Le champ "DC", ou Doubles-Comptes, où vous devez écrire les autres personnages que vous interprétez, et dans la partie Champ de contact>Fiche personnage, insérez le lien de votre fiche personnage postée dans La plume magique.


- Dans la partie Préférences, cochez "toujours autoriser le HTML: oui". C'est primordial si vous voulez voir les présentations des messages importants et des fiches personnages.

Les 7 thèmes du forum sont optimisés pour Firefox, Chrome et Safari. Si vous utilisez un autre navigateur, tel que Opéra ou Internet Explorer, il est possible que vous rencontriez des bugs.

Pour sélectionner votre thème, rendez-vous tout en haut de n'importe quelle page du forum. Au-dessus de la bannière, dans le coin à gauche, se trouve un menu déroulant nommé "Choisir un style". Cliquez et choisissez votre thème préféré, c'est aussi simple que cela!
Notez cependant que le thème n'est pas défini une fois pour toute et par utilisateur. Le thème par défaut reviendra lorsque vous vous connecterez depuis un autre ordinateur, et si vous vous connectez sur le même ordinateur avec un double-compte, le thème que vous avez sélectionné restera le même.

Alors, voici un petit tuto pour vous aider à mieux utiliser le code dont vous aurez besoin sur le forum. C'est particulièrement important maintenant que nous avons plusieurs thèmes, car tout est géré en CSS. Comme je sais que pour la plupart d'entre vous, c'est un langage secret, voici quelques codes pour le déchiffrer:

• Le HTML = structure (par exemple c'est la partie < div > < /div >). Quand je mets une "div", je crée un bloc qui pourra recevoir du texte ou des images, etc… ; quand je mets un "span" je crée une mise en forme pour une ligne seulement, donc tout ce qui pourrait s'appliquer à un bloc (une largeur, une hauteur…) ne fonctionne pas.
• Le CSS = mise en forme (partie style="font-size: 18px; color: #FFF; etc…"). C'est ce qui va donner forme à ma balise. Dans l'exemple que je viens de vous mettre, j'ai ainsi dit que le texte serait écrit à la taille 18 pixels, et en blanc. Pour une div, je peux rajouter que le bloc aura un fond rouge et fera 50 pixels de hauteur, par exemple.

et se ferme avec ceci . Elles peuvent avoir n'importe quoi à l'intérieur (sur le forum, vous trouverez plus souvent: div, span, table, tr, td), il faut TOUJOURS les refermer. Pour y penser, fermez la dès que vous l'ouvrez, quelques lignes plus bas dans votre texte, comme ça vous n'avez plus à vous en préoccuper. 80% des bugs que vous aurez en manipulant les codes du forum viendront du fait que vous avez mal fermé une balise, ou que vous en avez amputé une sans faire exprès. Donc en cas de problème, vérifiez ça tout de suite .

Sur le forum, vous utilisez le BBCode pour mettre en forme vos messages. Mais vous pouvez parfois tomber sur des sites où cela ne fonctionne pas. Dans cette éventualité, voici quelques indications pour mettre en forme votre texte:
- Pour aller à la ligne, utilisez la balise

Code:

<br />

Utilisez-la deux fois si vous voulez sauter une ligne.
- Si vous voulez mettre en gras

Code:

<b></b>

- Si vous voulez mettre en italique

Code:

<i></i>

- Si vous voulez sougliner

Code:

<u></u>

- Si vous voulez center

Code:

<center></center>

- Si vous voulez mettre un lien

Code:

<a href="LIEN">Votre texte en lien</a>

- Si vous voulez mettre une image

Code:

<img src="LIEN DE L'IMAGE" />

- Si vous voulez mettre une image et la redimensionner

Code:

<img src="LIEN DE L'IMAGE" style="width: LARGEUR DE L'IMAGE EN PIXEL OU EN POURCENTAGE" />

- Si vous voulez mettre du texte en couleur (attention, ça se complique^^):

Code:

<span style="color: #FF0000">votre texte en couleur</span>

Ici, #FF0000 désigne la couleur rouge. Sur Aresto, vous pouvez remplacer cela soit par une couleur déjà présente sur le forum (orange, darkblue etc…), soit par le code hexadécimal (6 chiffes ou lettres^^) de la couleur que vous souhaitez. Voici un nuancier qui vous aidera à choisir ici (descendez en bas de la page).

Si vous êtes curieux et que vous voulez mettre en forme votre texte de manière plus approfondie, voici un petit tuto (il y a un tableau des valeurs au milieu de la page) avec lequel j'ai appris à me servir du CSS.

C'est très simple, il suffit de copier le code ci-dessous et de remplacer les textes que j'ai mis par ce que vous souhaitez. Il faut toujours utiliser ce code quand vous voulez faire une annonce ou un truc du genre, car vu qu'on a plusieurs thèmes, si vous utilisez le BBCode ou votre propre mise en forme, ça apparaîtra pareil sur tous les thèmes et ça sera très moche.

Code:

<div id="cadre">
<span id="titre1">Titre de l'annonce</span>
<span id="soustitre">Sous titre</span>

<span id="titre2">Titre du paragraphe</span>
<div id="parag">Paragraphe</div>
</div>

Une petite explication au cas z'où vous souhaitiez personnaliser: le "id" présent après chaque "div" ou "span" est l'identifiant, en quelque sorte, de la balise. Ca indique au forum qu'il faut aller chercher la mise en forme dans la feuille de style du forum (ou du thème, en l'occurrence, puisqu'on a une feuille de style par thème), et dans quel endroit dans cette feuille de style. Pour les voir: comment montrer celles de tous les thèmes?.

Si vous isolez l'une des balises dans un post sans mettre le reste, elle apparaîtra de la même manière. Attention cependant, par exemple la balise "parag" est configurée pour avoir une largeur de 90% du message. Mais "parag" est insérée dans la balise "cadre" et comme le "cadre" fait lui-même 90% du message, "parag" fait en réalité 90% du cadre, donc si vous l'utilisez sans le cadre, elle sera plus large.
Ne changez jamais la frappe des id, si vous mettez une majuscule à Cadre, le forum ne la reconnaîtra pas.

- cadre: fait apparaître le cadre fin qui entoure les paragraphes et sur lequel se place le titre.
- titre1: met en forme le texte à la façon du gros titre. Attention, j'ai mis une marge négative en haut de cette balise, c'est-à-dire qu'elle "remonte" automatiquement de plusieurs lignes, donc si vous la mettez au milieu d'un texte, elle sera placée au dessus des lignes supérieures. Exemple.
- soustitre: met en forme le texte à la façon du sous-titre.
- titre2: met en forme le texte à la façon du petit titre.
- parag: met en forme le texte et le fond du texte (couleur du fond, effet, ombré).

Vous pouvez supprimer les id="…" et faire votre propre mise en forme si vous voulez, grâce aux astuces données dans ce tuto. A la place de "id", il faudra alors mettre "style". Attention, parce que maintenant qu'on a plusieurs thèmes, si vous utilisez vos propres couleurs, elles apparaîtront identiques sur tous les thèmes et sur certains (notamment Serdaigle et le Light), ça sera probablement illisible.
Notez aussi que vous ne pouvez pas utilisez les "id" sur d'autres sites, elles ne fonctionneront pas, chaque "id" est enregistrée dans la feuille de style du site où on l'a mise/créée.

Attention aussi, quand vous voyez une balise span, n'essayez pas d'utiliser l'id qui suit avec un div, table etc… ça ne fonctionnerait qu'à moitié (voir pas du tout dans certains cas).

Pour les fiches personnages, ça fonctionne de la même manière, lisez un peu le code et vous comprendrez facilement.

Très rapidement, mais je pense que savoir les lire est utile vu qu'on a pas mal de choses basées sur ça sur le forum (dont l'entête, le QEEL, le rencensement, les rapides présentations des personnages et les petites images qui illustrent les relations du perso dans sa fiche). Donc, on a de la chance pour le coup parce que le BBCode est très semblable au html. Pour faire un tableau, il y a deux balises essentielles qui déterminent son début et sa fin:

Code:

<table></table>

Assez clair, donc :mrgreen:
Ensuite, il va falloir, entre ces deux balises, rajouter une ligne:

Code:

<table>
<tr>
</tr>
</table>

On a donc un tableau à une ligne. Et dans cette ligne, on va mettre, mettons, deux cellules:

Code:

<table>
<tr>
<td>Remplissez votre cellule</td>
<td>Remplissez votre cellule</td>
</tr>
</table>

Et voilà! Si vous voulez mettre deux lignes, vous n'avez qu'à rajouter < tr> dessous, les deux < td>< /td>, puis fermer la ligne par un dernier < /tr>. Deux choses importantes à savoir: on n'écrit qu'à l'intérieur des cellules, jamais directement dans une ligne. Si vous voulez faire un tableau à une colonne, vous mettez toujours une cellule sur la ligne. Chaque ligne doit avoir le même nombre de cellules. Y'a des moyens de fusionner mais c'est techniquement un peu plus avancé.

Et le mieux dans tout ça, c'est qu'en BBCode, ça fonctionne exactement pareil mais avec des [] à la place des <>. Je vous conseille même d'utiliser plutôt la forme BBCode car elle fonctionne mieux dans les messages de forumactif.