Header
Partagez | 

[ForumActif] Récupérer les widgets du forum

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: [ForumActif] Récupérer les widgets du forum   Mar 24 Jan - 15:54

Bonjour à tous Smile

Dans ce tutoriel, nous allons voir comment récupérer des widgets de FA pour les utiliser ailleurs sur le forum ou sur un site parallèle.

Arrow Pré-requis
  • Avoir un minimum de connaissance en html et CSS,
  • Savoir ce que sont les iframes,
  • Forum en phpBB2,
  • Avoir accès au template.


On va donc devoir :
-> jouer avec le portail.
-> jouer avec les templates.
-> jouer avec les pages html de FA.
-> jouer avec les iframes pour récupérer le tout.

Durant tout ce tutoriel, je vais mettre des exemples avec l'un de mes forums de test par contre, je ne m'attarderai pas sur la mise en page du texte, je vous invite à jeter un œil au tutoriel concernant l'utilisation de CSS.

Le portail



Ici, on va placer tous les widgets dont on a besoin (et on n'oublie pas d'activer le portail Wink).

PA >> Module >> Portail & widgets >> config' du portail

Pour cela, choisissez le portail que vous voulez modifier, faites "structure" et placez les widgets dont vous avez besoin.
Spoiler:
 

Sans oublier d'enregistrer.

Idea Pour faire en sorte que votre portail ne soit pas votre page d'accueil : PA >> affichage >> Page d'accueil >> généralité >> L'adresse de votre forum dirige vers : l'index du forum

Jouer avec les templates



Maintenant il va falloir donner des noms à chacun des tableaux qu'on va pouvoir récupérer.

PA >> affichage >> Template >> portail

-> pour les derniers sujets : mod_recent_topics
Rien à modifier

-> pour les news : mod_news
On repère ça
Code:
<table class="forumline mod_news" width="100%" border="0" cellspacing="1" cellpadding="0">
et on le remplace par
Code:
<table class="forumline mod_news" id="news" width="100%" border="0" cellspacing="1" cellpadding="0">

-> pour les posteurs du mois : mod_top_post_users_month
On repère ça
Code:
<table summary="{L_TOP_POST_USERS_MONTH}" width="100%">
et on le remplace par
Code:
<table id="posteurs" summary="{L_TOP_POST_USERS_MONTH}" width="100%">

N'oubliez pas de publier les templates à chaque fois.

Jouer avec les pages html de FA


Comme on ne peut pas récupérer directement les tableaux avec le javascript (pour des questions de sécurité), on va devoir ruser. Pour cela, on va aller dans :

PA >> module >> gestion des pages html

On va créer 3 pages, une pour chaque widget (comme dit plus haut, je vous donne ici le code "brut". A vous ensuite d'y ajouter du CSS)
-> derniers_sjt.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Dernier sujet</title>

<base target="_parent">

</head>
<body>
 
<h1>Derniers Sujets</h1>
 
<div id="dernier_sjt" style="width: 200px; height: 100%;" >
<iframe name="frame_sjt" style="visibility: hidden; width: 0px; height: 0px;" src="/portal.forum" onLoad="var frame_sjt=window.frame_sjt.document.getElementById('comments_scroll_div');console.log(frame_sjt);document.getElementById('dernier_sjt').innerHTML=frame_sjt.innerHTML;$('.marquee').marquee();"></iframe></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/30/frm/jquery/marquee/jquery.marquee.min.js"></script>

</body>

</html>

A vous également de faire les réglages de votre iframe en remplaçant
Code:
 style="width: 200px; height: 100%;"

Spoiler:
 

-> news
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>News</title>

<base target="_parent">
</head>
<body>

<h1>News</h1>
 <div id="news" style="width: 600px; height: 100%;" >
<iframe name="frame_news" style="visibility: hidden; width: 0px; height: 0px;" src="/portal.forum" onLoad="var frame_news=window.frame_news.document.getElementById('news');document.getElementById('news').innerHTML=frame_news.innerHTML;"></iframe></div>


</body>

</html>

-> posteurs du mois
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Posteurs du mois</title>

<base target="_parent">
</head>
<body>

<h1>Posteur</h1>
 <div id="posteurs" style="width: 200px; height: 100%;" >
<iframe name="frame_posteurs" style="visibility: hidden; width: 0px; height: 0px;" src="/portal.forum" onLoad="var frame_posteurs=window.frame_posteurs.document.getElementById('posteurs');document.getElementById('posteurs').innerHTML=frame_posteurs.innerHTML;"></iframe></div>

</body>

</html>

Jouer avec les iframes



Et maintenant, il ne nous reste plus qu'à récupérer les 3 widgets. Voilà par rapport à mon forum de test


Code:
<table cellpadding="0" cellspacing="2" style="margin:auto; width:622px; background-color:#cdbc9f; border:2px solid #44290E;text-align:center;"><tr><td><iframe name="Les derniers sujets" src="http://miettes.exprimetoi.net/h10-dernier_sjt" scrolling="no" height="200px" width="220px" frameborder="0" ></iframe></td><td><iframe name="posteurs" src="http://miettes.exprimetoi.net/h12-posteurs-mois" scrolling="no" height="200px" width="220px" frameborder="0" ></iframe></td></tr><tr><td colspan="2"><iframe name="news" src="http://miettes.exprimetoi.net/h11-news" scrolling="no" height="300px" width="622px" frameborder="0" ></iframe></td></tr></table>

Et voilà !




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
Revenir en haut Aller en bas
[ForumActif] Récupérer les widgets du forum
Page 1 sur 1
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+