Coin Pub
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.

Masculin Inscrit le : 21/07/2006
Age : 32
Messages : 39025
Localisation : France
Autre :
Coin Pub
Fondateur

Coin Pub
Faire une fiche de publicité codée tenue à jour automatiquement

On voit apparaître de plus en plus de fiches décrivant un forum. Savez-vous que grâce à ForumActif il est possible de faire en sorte
qu'elle se mette à jour automatiquement partout où elle est présente ? Le but de ce tutoriel est de vos expliquer quelques astuces pour réaliser une fiche légèrement codée avec des statistiques en temps réel, non de faire un cours de codage.

Arrow À propos des fiches de publicité ...

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 ?


Arrow Le secret : une page html liée au 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é Very Happy Voici un exemple avec la fiche de Coin-pub


Arrow Pré-requis : quelques bases en CSS

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 Wink.
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 :
Titre


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 !


Arrow Créer le cadre, indiquer la couleur de fond ainsi que la police du texte

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:valeurvaleur 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

Exemple !
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 !


Arrow Indiquer ses statistiques

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 20955 membres d'inscrits, 987796 messages postés dans 66399 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.


Arrow Quelques balises à savoir

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>


Arrow Pour finir :Hébergez votre code

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 !


Arrow Publiez votre page sur d'autres forums

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.


Arrow Exemple

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>


Arrow Lien utile

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



Tutoriel réalisé par Rem1


Plus que des compétences, ce dont nous avons réellement besoin ce sont des personnes prenant à coeur l'intérêt d'un forum. Ayant des idées et de la volonté, pour aller de l'avant. CP a besoin de vous ![/center]
Merci, c'est super utile la liste pour les statistiques autos Smile
Masculin Inscrit le : 21/07/2006
Age : 32
Messages : 39025
Localisation : France
Autre :
Coin Pub
Fondateur

Coin Pub
Merci Haldor Réaliser une fiche de publicité codée tenue à jour automatiquement Wink J'ai eu du mal à trouver pour ces statistiques, je connaissais les balises sur le forum mais pour les appliquer en dehors du forum aucune idée ! C'est pourquoi j'en fait profiter les rares à lire tout ce tutoriel Réaliser une fiche de publicité codée tenue à jour automatiquement Tongue


Plus que des compétences, ce dont nous avons réellement besoin ce sont des personnes prenant à coeur l'intérêt d'un forum. Ayant des idées et de la volonté, pour aller de l'avant. CP a besoin de vous ![/center]
Ah moi c'était l'inverse : je connaissais le script pour mettre le pseudo entre autres sur une page hors forum mais je n'avais pas la liste Smile C'est en cherchant sur Google pour mettre le pseudo dans mon entête (puisqu'elle utilise une iframe) que j'ai trouvé ^^
Féminin Inscrit le : 06/09/2012
Age : 29
Messages : 28
Localisation : Chez moi ou au collège.
Emploi / Etudes : Études » Cégep.
Loisirs : RP. Dessiner. Blablater.
http://m-no-toshi.forum-canada.com/
Bakamat
Membre

Bakamat
Bonjour =)

J'ai essayé ton tutoriel, mais quelque chose cloche! Tout mes accents ou symboles sont remplacé ou accompagné par des signes du style î,  ou ê. Ça me fait ça partout où j'ai prévisualisé le iframe. Quatre forums sur 4 me montrent ce défaut d'accent.

Savez-vous comment y remédier?

Merci ><


Réaliser une fiche de publicité codée tenue à jour automatiquement 100x1010 Rien ne peut arrêter ma folie. Réaliser une fiche de publicité codée tenue à jour automatiquement 100x1011
À quoi bon rêver lorsque la vie est aussi cruelle..?
Masculin Inscrit le : 21/07/2006
Age : 32
Messages : 39025
Localisation : France
Autre :
Coin Pub
Fondateur

Coin Pub
Bonjour ! Désolé pour le délai de réponse, est-ce que tu as trouvé solution à ton problème ? Une des explications pourrait être la police de caractère utilisée qui ne prend pas en compte les accents Réaliser une fiche de publicité codée tenue à jour automatiquement Smile Réaliser une fiche de publicité codée tenue à jour automatiquement Smile


Plus que des compétences, ce dont nous avons réellement besoin ce sont des personnes prenant à coeur l'intérêt d'un forum. Ayant des idées et de la volonté, pour aller de l'avant. CP a besoin de vous ![/center]
Masculin Inscrit le : 28/08/2012
Age : 35
Messages : 345
Localisation : Londres
Emploi / Etudes : TSM Prêt à Manger
Loisirs : Graphisme - Lecture - Ecriture
http://www.edspeleersaddicts.co.uk
Ed Speleers Addicts
Membre

Ed Speleers Addicts
Sympa ton tuto, merci mille fois Smile


Réaliser une fiche de publicité codée tenue à jour automatiquement 92837210
Edward : "Qu'est-ce que tu penses de moi?"
Me : "Qu'est-ce que tu veux dire?"
Edward : "Est-ce que tu voudrais être ma petite-amie?"
Me : "Moi? Je pourrais être ta mère!!"
Edward : "Mais tu ne l'es pas... Alors, qu'est-ce que tu penses de moi?"
Me : "Tu veux la version soft ou la version Sandy?"
Edward : "La version Sandy?"
Me : "T'es un putain de canon!!"
Edward : ""RIRES!!!!!!!"
J'ai une petite question! Razz quand j'essaie les trucs de codage et tout sur mon forum ça ne fonctionne pas... problem? Enfin bref, merci pour ce tuto! ^^
Masculin Inscrit le : 27/03/2013
Age : 24
Messages : 418
Localisation : Sur Sinnoh !
Emploi / Etudes : Collégien, dehors, mangas *-*
Loisirs : Toujours joyeux et en pleine forme !
http://poke-sword.frbb.net/
Wild
Membre

Wild
Merci beaucoup j'essayerai d'en faire une ce week-end si j'ai un problème je poserai mes questions ici ^^'


Réaliser une fiche de publicité codée tenue à jour automatiquement 130710110221138101

Merchi ma Yona :3:


Kit by x-zorobin, look :3:


Kit by Lusso, regarde =):
Inscrit le : 10/11/2007
Messages : 66
petitemanu
Membre

avatar
Bonjour,

Merci pour cette note, très bien expliquer.
Féminin Inscrit le : 05/07/2013
Age : 22
Messages : 18
KageNekko
Membre

KageNekko
Oh, merci !
Jusqu'à maintenant je ne savais pas faire des iFrames !
Merci Rem1 ! Very Happy


Incarne un chat et vit dans un monde où l'humain a tout détruit. La mort est partout et les catastrophes naturels s'accumulent. L'humanité disparaît.
Viens nous rejoindre à Apocalypsis !
Merci beaucoup pour ce tutoriel, très pratique ! Wink
Masculin Inscrit le : 31/03/2016
Messages : 370
Thor d'Asgard
Membre

Thor d'Asgard
Tres utile, merci mille fois Wink
Féminin Inscrit le : 29/12/2011
Age : 34
Messages : 596
Localisation : 86
Emploi / Etudes : Secrétaire
Loisirs : dessin, rp, informatique
https://thefallsoftheangels.forumactif.com/
Luna-chan86
Modératrice

Luna-chan86
Merci énormément Very Happy
Féminin Inscrit le : 23/09/2009
Age : 39
Messages : 80
Localisation : Normandie
Emploi / Etudes : Assistante RH
Loisirs : M'occuper de mes filles :)
http://mere-fille.forumactif.org/
Alli
Membre

Alli
Ah ça va me servir ça !! Merci !!
Féminin Inscrit le : 23/09/2009
Age : 39
Messages : 80
Localisation : Normandie
Emploi / Etudes : Assistante RH
Loisirs : M'occuper de mes filles :)
http://mere-fille.forumactif.org/
Alli
Membre

Alli
Je dois être une vraie quiche, j'y arrive pas !!
Féminin Inscrit le : 10/06/2017
Age : 24
Messages : 12
Localisation : Franche Comté
Emploi / Etudes : Terminale L
http://aequitas.forumactif.com/
Aequitas
Membre

Aequitas
Merci pour ce tuto ! Par contre ça ne marche pas, à la place des accents ça me met des symboles bizarres comme Bakamat, mais quand je prévisualise mon code de base ça ne fait pas ça, et pas moyen d'avoir les statistiques, j'ai bien mis le code mais il n'y a aucun chiffre qui apparaît...^^'
Masculin Inscrit le : 09/08/2015
Messages : 20978
https://coin-pub.actifforum.com
Mind
Retraité

Mind
Bonsoir Aequitas,

Toutes mes excuses pour le délai de réponse ! ☀ As-tu trouvé ce qui clochait finalement ?

Peut-être est-ce dû à la police utilisée, comme l'indique ce message de Rem' ?
Rem1 a écrit:Bonjour ! Désolé pour le délai de réponse, est-ce que tu as trouvé solution à ton problème ? Une des explications pourrait être la police de caractère utilisée qui ne prend pas en compte les accents Réaliser une fiche de publicité codée tenue à jour automatiquement Smile Réaliser une fiche de publicité codée tenue à jour automatiquement Smile



À la retraite, merci de contacter la modération (titulaire ou à l'essai) en cas de questions.
Féminin Inscrit le : 19/01/2018
Age : 43
Messages : 7
Miss Purple
Canard masqué

Miss Purple
Bonjour,

c'est très bien expliqué. Merci beaucoup
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum