On remarque que bien souvent les fiches d'un forum sont complètes et très longues, détaillant beaucoup de choses. Pourtant, la longueur ne fait pas tout. Mettez-vous à la place d'un visiteur : tout ce qu'il souhaite savoir sur votre forum c'est son contenu, son originalité, quel est le sujet traité et éventuellement son activité (les statistiques). À quoi bon noyer le visiteur sous des tas d'informations telles que la composition de l'équipe du forum ou autres détails brumeux lorsque l'on n'est pas inscrit sur un forum ?

Grâce à ForumActif et aux pages HTML que l'on peut créer sur son propre forum, il est possible de réaliser une fiche dont les statistiques seront en temps réel et où chaque modification est appliquée à tous les endroits où cette fiche est postée. C'est idéal pour les échanges de fiches entre partenaires ou pour mettre en premier message sur un sujet de publicité Voici un exemple avec la fiche de Coin-pub

Seuls le CSS et l'HTML sont pris en compte. Personnellement j'ai fait en CSS le cadre ainsi que les titre ; mais j'ai utilisé l'HTML pour insérer des liens, images ou couleurs au milieu du texte (les balises sont plus simples). Je ne vais pas faire un cours complet ni sur ces deux langages, mais pour les intéressés une simple recherche google devrait leur en trouver .
Dans le cas de cette fiche, j'ai utilisé "style" (indique que l'on souhaite appliquer un effet que l'on indiquera entre guillemets) associé à la balise "div" (CSS). Cela permet d'indiquer l'effet que l'on souhaite appliquer, la fermeture de la balise indiquant quant à elle jusqu'à où cela s'applique. Cela s'applique pour un titre, un paragraphe, un effet général, mais ne peut être utilisé pour un effet ponctuel (un mot au milieu d'une phrase par exemple. J'expliquerais plus bas comment faire). Voici comment placer cette balise :

Code:

<div style="effets voulus">Emplacement du texte</div>

La dernière balise < /div> symbolisant la fin de l'effet. Entre les guillemets vous pouvez indiquer les effets que vous souhaitez appliquer, en les espaçant d'un point virgule. Par exemple vous pouvez indiquer que vous voulez un cadre autour du texte, que ce cadre doit être en ligne continue, que ce cadre aura 5 px de largeur, avec une couleur de fond, ou que vous souhaitez que le texte soit en Arial, taille 18, couleur orange, avec des lettres espacées de 3 pixels etc.

Voici un exemple permettant d'illustrer l'utilisation des ";" :

Code:

 <div style="font-size:12px; color:#ffc03b;">Titre</div>

Ce qui donne :

En revanche vous remarquerez que l'on ne peut pas l'utiliser pour mettre un effet sur un mot au milieu d'une phrase puisqu'il y a un retour à la ligne automatique. Pour cela on utilise le même codage mais en replaçant "div" par "span" :

Code:

Bonjour et <span style="font-size:12px; color:#ffc03b;">bienvenue</span> sur CP !

Bonjour et bienvenue sur CP !

L'ensemble de votre texte sera encadré par cette balise qui indiquera les effets à appliquer. La balise < div style="..."> < /div> est utilisée, et chaque indication est séparée par un ";".

• Le cadre
  On commence par définir le style du cadre, indiquée grâce à border: valeur. On remplacera valeur par le nom de l'effet voulu :
  
  

  Spoiler:

  
  Suivi immédiatement par l'épaisseur de ce cadre, indiquée en pixels : 3px par exemple.
  Puis la couleur du cadre grâce à border-color: valeur, on remplacera valeur soit par le nom de la couleur en anglais (green, orange, pink ...) soit par sa valeur hexadécimale précédée d'un # (#8000c0 par exemple). Pour trouver la valeur d'une couleur, voici deux sites bien pratiques : Jokconcept et Pixelistan
  
  Ces trois informations doivent être contenues au même endroit, c'est à dire sans ";" entre elles.
  
  Exemple !

  Code:

  <div style="border:solid 1px #8000c0;">Exemple !</div>

  
  
• La couleur de fond
  On indique ensuite la couleur que l'on souhaite pour l'intérieur de notre fiche grâce à background: valeur, où valeur est remplacé par l'indication de la couleur.
  
  
• La police du texte
  On s'attaque ensuite au texte ! En commençant par la police à appliquer grâce à font-family: valeur, en remplaçant valeur par le nom de la votre (Arial, Verdana ...)
  
  
• L'alignement du texte
  On peut ensuite décider de l'alignement du texte : centré, à droite, à gauche, justifié grâce à text-align:valeur où valeur sera remplacé par ce que l'on souhaite (justify pour un texte justifié, center pour un texte centré, right pour un texte aligné à droite et left pour un texte aligné à gauche)
  
  
• La couleur du texte
  Elle est indiquée tout simplement grâce à color:valeur
  
  
• La taille du texte
  Je l'indique en pixel, ça permet d'avoir beaucoup de tailles possibles. On utilise font-size: 12px où l'on peut remplacer 12 par le chiffre voulu.
  
  
• L'espacement du texte par rapport au cadre
  Si on oublie de l'indiquer le texte se retrouve collé au cadre ! On utilise padding:5px qui indique l'espacement en pixels (remplacer 5 par le chiffre voulu).
  
  
• L'espacement entre les lignes
  Indiqué grâce à line-height:14px, valeur au choix, indiqué en pixel

Code:

<div style="border:solid 1px #8000c0; background: #F7EFFF; font-family: Arial; text-align:justify;  color:#9544FF;  font-size: 12px;  padding:5px; line-height:14px;">Exemple !</div>

Grosso-modo nous avons les propriétés principales de notre fiche de publicité ! Si l'on souhaite avoir un titre ou un paragraphe avec un autre effet, il faut l'indiquer avec une autre balise < div style=".."> < /div> à l'endroit voulu (ou < span style>). À noter que l'ordre des informations par bloc n'a pas d'importance : on peut très bien placer la couleur de la police en premier, l'effet sera le même !

Certains d'entre vous doivent connaître les variables comme { USERNAME}, hé bien on utilise le même genre pour afficher ses statistiques ! ForumActif a prévu des variables pour afficher le nombre de messages, de membres, etc. d'un forum. Elles fonctionnent dans les messages du forum, mais il est également possible de les faire fonctionner sur une page HTML. Pour cela, on place au début (avant le début du code du cadre) le script suivant qui permettra d'utiliser les variables avec la balise Span. :

Code:

<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>

Exemple :

Code:

<span class="USERNAME"></span>

Il suffit de remplacer Username par la variable souhaitée :

Spoiler:

Par exemple : Coin-Pub a 20974 membres d'inscrits, 987937 messages postés dans 66413 sujets.

Code:

Coin-Pub a <span class="FORUMCOUNTUSER"></span> membres d'inscrits, <span class="FORUMCOUNTPOST"></span> messages postés dans <span class="FORUMCOUNTOPIC"></span> sujets.

Vous pouvez personnaliser certaines zones de votre texte.

• Établir une liste avec des points :

  Code:

  <li>Premier point</li>
<li>Deuxième point</li>

  
  
• Gras : font-weight:bold (ou < b> < /b>, pour un effet isolé. Si on veut faire plusieurs effets en même temps il faut prendre la première proposition, qui peut être intégrée dans une balise div style à la suite d'autres effets : on a alors un code plus propre : tout est indiqué dans une balise, ce qui évite de devoir utiliser 5 balises à la suite comme on le fait parfois en BBcode...)
  
  
• Italique : font-style:italic (ou < i> < /i>)
  
  
• Souligné : text-decoration:underline (ou < u> < /u>)
  
  
• Petites majuscules : font-variant:small-caps
  
  
• Espacement des caractères : letter-spacing:1px (1 étant à remplacer)

Cela peut être utilisé pour les titres : Titre !

Code:

<div style="font-variant:small-caps; letter-spacing:3px; color:orange; font-weight:bold">Titre !</div>

• Saut de ligne :

  Code:

  <br />

Exemple : Bienvenue sur CP
Le forum de Publicité !

Fondé par Rem1

Code:

Bienvenue sur CP<br /> Le forum de Publicité !<br /> <br /> Fondé par Rem1

Les sauts de ligne n'étant pas pris en compte, je conseille d'en mettre pour bien se repérer :

Code:

Bienvenue sur CP<br />
Le forum de Publicité !
<br /><br />
Fondé par Rem1

• Insérer un lien :

  Code:

  <a href="Votre Lien">Nom de mon Forum</a>

  
  
• Insérer un lien sans soulignement :

  Code:

  <a href="www Lien" style="text-decoration:none">Nom de mon Forum</a>

  
  
• Rendre une image cliquable :

  Code:

  <a href="www Lien"><img src="www Image Hébergée" border="0"></a>


  
  
• Centrer :

  Code:

  <center>texte</center>

Il vous suffit d'aller dans votre Panneau d'administration > Onglet "Modules" > HTML & JAVASCRIPT > Gestion des pages HTML > Créer une page HTML. Collez votre code, enregistrez !

Il suffit pour cela d'utiliser le code suivant :

Code:

 <iframe src="Lien de votre page HTML" style="width: Largeurpx; height: Hauteurpx;" frameborder="0""></iframe>

Indiquez la largeur ainsi que la hauteur que vous souhaitez,en pixels.

Spoiler:

Code:

 <iframe src="http://coin-pub.actifforum.com/h3-publicite-pour-le-tutoriel" style="width: 800px; height: 200px;" frameborder="0""></iframe>

Code:

<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
<div style="border:solid 1px #8000c0; background: #F7EFFF; font-family: Arial; text-align:justify;  color:#9544FF;  font-size: 12px;  padding:5px; line-height:14px;"><div style="font-variant:small-caps; letter-spacing:3px; color:orange; font-weight:bold">Coin-pub</div>
<br /><br />
C'est un <i>forum de publicité</i> créé par Rem1 le <span class="FORUMBIRTHDAY"></span>. Il y a plusieurs services, de l'entraide, des jeux, une super équipe !<br />
Cela fait plusieurs années que le forum est créé et il continuera ainsi.
<br /><br />
Pour nos <span style="font-variant:small-caps">statistiques</span>, nous avons :
Coin-Pub a <b><span class="FORUMCOUNTUSER"></span></b> membres d'inscrits, <span class="FORUMCOUNTPOST"></span> messages postés dans <span class="FORUMCOUNTOPIC"></span> sujets.
<br /><br />
Nous avons trois services :
<li><a href="http://coin-pub.actifforum.com/creations-graphiques-c7/?tid=5f512df76593a07653fa3d7afa2b5c8d" style="text-decoration:none"><font color="#FF3D6A";">Service graphique</font></a> </li>
<li>Service analytique</li>
<li>Service orthographique</li>
</div>

Site du zéro :

- liste non exhaustive des propriétés CSS/HTML
- formatage du texte
- couleur et fond
- bordures et ombres