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

Bonjour à tous Smile

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

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 oeil au tutoriel concernant l'utilisation de CSS.

Le portail

Ici, on va y placer tous les widgets dont on a besoin (mais on n'active pas 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.

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:

et on le remplace par

Code:

-> pour les posteurs du mois : mod_top_post_users_month
On repère ça

Code:

et on le remplace par

Code:

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 widgets (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');document.getElementById('dernier_sjt').innerHTML=frame_sjt.innerHTML;"></iframe></div>

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

Et voilà !

Des questions, problèmes ou remarques sur ce tutoriel, c'est par [ici].