It is currently Wed 28 Sep 2016 - 08:49 - créer un forum

Tutoriel : Outil de prévisualisation des sujets

Skip to content

Post new topic Reply to topic Goto page: 1, 2, 3, 4, 5  >

Tutoriel : Outil de prévisualisation des sujets
Author Message
Kyosuke
Contributeurs


Offline
Contributeurs

Joined: 30 Mar 2009
Posts: 436
Niveau:
Point(s): 532
Moyenne: 1.22
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Sat 9 Aug 2014 - 00:23    Post subject: Tutoriel : Outil de prévisualisation des sujets Reply with quote

PublicitéSupprimer les publicités ?
Tutoriel : Outil de prévisualisation des sujets.
 
 

Description :

Ce tutoriel va vous permettre d'installer un outil de prévisualisation des sujets sur votre forum.
Suite à ce tutoriel, vos membres auront la possibilité d'avoir un aperçu du sujet (premier et dernier message) avant même d'y accéder.

Cette fonctionnalité a grandement été inspirée de l'outil disponible sur les forums Invision Power Board.

Démonstration :


 
 

Compatibilité du script :











Google Chrome 
 
Mozilla Firefox 
 
Internet Explorer 
 
Opera 
 
Safari 
 
version 21 et + 
 
version 21 et + 
 
Version 8 et + 
 
version 12.1 et + 
 
version 5.1 et + 
 


Si le navigateur du membre n'est pas compatible, l'outil de prévisualisation ne sera pas affiché.
 

Installation du script :

Le script suivant va ajouter l'outil de prévisualisation sur votre forum.
Il est donc important de l'installer et de le configurer correctement.

Avant toute modification sur vos templates, pensez à faire des sauvegardes afin de ne pas perdre votre travail en cas d'erreur de manipulation.
Vous pouvez par exemple copier-coller le contenu de vos templates dans le bloc-notes de Windows.

Le template que nous allons modifier se nomme VIEWFORUM_BODY.TPL, ce template contient la liste des sujets de votre forum.
C'est ici que nous allons inclure le script.

Allez donc dans votre panneau d'administration, section thème, puis sélectionnez le lien modifier les templates.
Sur cette page, vous allez voir la liste de tous les templates de votre forum, cherchez donc le template VIEWFORUM_BODY.TPL et cliquez sur le bouton modifier situé à droite du nom du template.

Vous êtes maintenant sur la page d'édition du template VIEWFORUM_BODY.TPL, ajoutez ceci au début du template :

Code: Sélectionner - Agrandir
<!-- XooitQuickView : Previsualisation des sujets - DEBUT -->
<script type="text/javascript" src="http://pokemon.power.free.fr/xooit/xooitQuickView.js"></script>
<script type="text/javascript">
<!--
xooitQuickView.init({
    firstMsg: 'Premier message :',
    lastMsg: 'Dernier message :',
    readTopic: 'Lire le sujet :',
    theme: 'white'
});
//-->
</script>
<!-- XooitQuickView : Previsualisation des sujets - FIN -->


Une fois que vous avez ajouté le script, vous pouvez le configurer, voici les options disponibles :

firstMsg :

- firstMsg contient le texte du titre affiché avant le premier message. Cette option n'est pas obligatoire. Le HTML est autorisé dans cette option, mais déconseillé. Si vous devez utiliser des apostrophes dans cette option, ajoutez un slash avant l'apostrophe (par exemple : l\'aventure) de manière a échapper le caractère, autrement, le script ne fonctionnera pas.
si vous n'ajoutez pas cette option, la valeur par défaut sera : "Premier message :"

lastMsg :

- lastMsg contient le texte du titre affiché avant le dernier message. Cette option n'est pas obligatoire. Le HTML est autorisé dans cette option, mais déconseillé. Si vous devez utiliser des apostrophes dans cette option, ajoutez un slash avant l'apostrophe (par exemple : l\'aventure) de manière a échapper le caractère, autrement, le script ne fonctionnera pas.
si vous n'ajoutez pas cette option, la valeur par défaut sera : "Dernier message :"

readTopic :

- readTopic contient le texte du lien qui permet d'accéder à la dernière page du sujet. Cette option n'est pas obligatoire. Le HTML est autorisé dans cette option, mais déconseillé. Si vous devez utiliser des apostrophes dans cette option, ajoutez un slash avant l'apostrophe (par exemple : l\'aventure) de manière a échapper le caractère, autrement, le script ne fonctionnera pas.
si vous n'ajoutez pas cette option, la valeur par défaut sera : "Lire le sujet :"

theme :

- theme permet de choisir le thème de l'outil de prévisualisation. Deux thèmes sont disponibles: black (noir) et white (blanc) pour une meilleure intégration au thème de votre forum. Cette option n'est pas obligatoire. Le HTML n'est pas autorisé dans cette option.
si vous n'ajoutez pas cette option, le thème blanc sera automatiquement selectionné.

Vous avez installé et configuré le script ? Super ! Passons à la suite :

Toujours sur le template VIEWFORUM_BODY.TPL cherchez ceci (ou similaire, tout dépend de votre thème) :

Code: Sélectionner - Agrandir
  <table border="0" cellpadding="4" cellspacing="1" width="100%" class="forumline">
   <tr>
     <th colspan="2" align="center" height="25" class="thCornerL" nowrap="nowrap">&nbsp;{L_TOPICS}&nbsp;</th>


Remplacez par :

Code: Sélectionner - Agrandir
  <table id="topics-list" border="0" cellpadding="4" cellspacing="1" width="100%" class="forumline">
   <tr>
     <th colspan="2" align="center" height="25" class="thCornerL" nowrap="nowrap">&nbsp;{L_TOPICS}&nbsp;</th>


Nous avons ajouté l'identifiant topics-list sur le tableau qui contient la liste des sujets des sous-forums.
Vous pouvez maintenant sauvegarder le template VIEWFORUM_BODY.TPL.

La dernière étape consiste à éditer le template VIEWTOPIC_BODY.TPL, template qui permet l'affichage des sujets de votre forum.

Dans le template VIEWTOPIC_BODY.TPL, cherchez ceci (ou similaire, tout dépend de votre thème) :

Code: Sélectionner - Agrandir
<table class="forumline" width="100%" cellspacing="1" cellpadding="3" border="0">
   <tr align="right">
      <td class="catHead" colspan="2" height="28"><span class="nav"><a href="{U_VIEW_OLDER_TOPIC}" class="nav">{L_VIEW_PREVIOUS_TOPIC}</a> :: <a href="{U_VIEW_NEWER_TOPIC}" class="nav">{L_VIEW_NEXT_TOPIC}</a> &nbsp;</span></td>


Remplacez par :

Code: Sélectionner - Agrandir
<table id="topic-body" class="forumline" width="100%" cellspacing="1" cellpadding="3" border="0">
   <tr align="right">
      <td class="catHead" colspan="2" height="28"><span class="nav"><a href="{U_VIEW_OLDER_TOPIC}" class="nav">{L_VIEW_PREVIOUS_TOPIC}</a> :: <a href="{U_VIEW_NEWER_TOPIC}" class="nav">{L_VIEW_NEXT_TOPIC}</a> &nbsp;</span></td>


Nous avons ajouté l'identifiant topic-body sur le tableau qui contient la liste des messages des sujets.
Vous pouvez maintenant sauvegarder le template VIEWTOPIC_BODY.TPL.


Félicitations, vous venez d'ajouter l'outil de prévisualisation des sujets sur votre forum !




Si vous avez des suggestions ou des questions, n'hésitez pas.
Le script étant hébergé sur mon serveur perso, il évoluera sans que vous n’ayez besoin de faire la moindre modification.

N'hésitez pas à visiter ce sujet de temps en temps pour consulter les dernières nouveautés !

Fin du tutoriel. Smile


_______________________
Following members like this message:
Khow (09/08/14), Joel (09/08/14), RotorMan (18/09/14), R-max (03/01/15), Maya (01/02/15)


Last edited by Kyosuke on Sat 9 Aug 2014 - 01:19; edited 3 times in total
Forum
Author Message
Cinfonie
Membre


Offline
Membre

Joined: 29 Apr 2014
Posts: 199
Point(s): 201
Moyenne: 1.01
Windows Vista ou 7 Internet Explorer Féminin Poissons (20fev-20mar) 馬 Cheval

PostPosted: Sat 9 Aug 2014 - 00:39    Post subject: Tutoriel : Outil de prévisualisation des sujets Reply with quote

Mais c'est génial. Je veux ça.
Question : quand tu dis "premier message", il s'agit de la première réponse donnée à un sujet ou à l'intitulé du sujet ?

edit : ça marche pas Crying or Very sad
_______________________
http://forumami.clicforum.fr/index.php


Forum
Author Message
Kyosuke
Contributeurs


Offline
Contributeurs

Joined: 30 Mar 2009
Posts: 436
Niveau:
Point(s): 532
Moyenne: 1.22
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Sat 9 Aug 2014 - 01:16    Post subject: Tutoriel : Outil de prévisualisation des sujets Reply with quote

Re,

Cinfonie wrote:
Question : quand tu dis "premier message", il s'agit de la première réponse donnée à un sujet ou à l'intitulé du sujet


Il s'agit du premier message posté sur le sujet, soit le message de l'auteur du sujet.
Le dernier message correspond au dernier message envoyé sur le sujet.

Cinfonie wrote:
edit : ça marche pas Crying or Very sad


Apparemment, c'est parce que tu as plusieurs tables ayant la class forumline sur la même page.
Il vaut mieux que j'édite légèrement le tutoriel pour éviter ce genre de problème.

Edit: c'est fait, j'en ai profité pour effectuer les modifications sur ton forum de test. Smile
_______________________


Forum
Author Message
Cinfonie
Membre


Offline
Membre

Joined: 29 Apr 2014
Posts: 199
Point(s): 201
Moyenne: 1.01
Windows Vista ou 7 Internet Explorer Féminin Poissons (20fev-20mar) 馬 Cheval

PostPosted: Sat 9 Aug 2014 - 01:40    Post subject: Tutoriel : Outil de prévisualisation des sujets Reply with quote

oui mais ça marche toujours pas.
_______________________
http://forumami.clicforum.fr/index.php


Forum
Author Message
Kyosuke
Contributeurs


Offline
Contributeurs

Joined: 30 Mar 2009
Posts: 436
Niveau:
Point(s): 532
Moyenne: 1.22
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Sat 9 Aug 2014 - 01:44    Post subject: Tutoriel : Outil de prévisualisation des sujets Reply with quote

Tu as vidé le cache de ton navigateur (CTRL+F5 sur la liste des sujets de ton forum) ?
_______________________


Forum
Author Message
Cinfonie
Membre


Offline
Membre

Joined: 29 Apr 2014
Posts: 199
Point(s): 201
Moyenne: 1.01
Windows Vista ou 7 Internet Explorer Féminin Poissons (20fev-20mar) 馬 Cheval

PostPosted: Sat 9 Aug 2014 - 01:51    Post subject: Tutoriel : Outil de prévisualisation des sujets Reply with quote

oui je viens de le faire et il n'y a toujours rien.
_______________________
http://forumami.clicforum.fr/index.php


Forum
Author Message
Kyosuke
Contributeurs


Offline
Contributeurs

Joined: 30 Mar 2009
Posts: 436
Niveau:
Point(s): 532
Moyenne: 1.22
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Sat 9 Aug 2014 - 02:01    Post subject: Tutoriel : Outil de prévisualisation des sujets Reply with quote

Tu peux détailler ? Rien ne s'affiche ? Lorsque tu cliques sur l'icône, rien ne se passe ?

Il me semble que tu as Internet Explorer 11 ?
Quoi qu'il en soit, j'ai testé sur ton forum de test avec IE en version 11, 10, 9 et 8 et ça fonctionne (pareil avec Chrome, Firefox, Safari et Opera).

Je suis quasiment sûr c'est un problème de cache. Smile
_______________________


Forum
Author Message
Cinfonie
Membre


Offline
Membre

Joined: 29 Apr 2014
Posts: 199
Point(s): 201
Moyenne: 1.01
Windows Vista ou 7 Internet Explorer Féminin Poissons (20fev-20mar) 馬 Cheval

PostPosted: Sat 9 Aug 2014 - 02:06    Post subject: Tutoriel : Outil de prévisualisation des sujets Reply with quote

C'est bon, ça marche. Je n'avais pas compris qu'il fallait survolé avec le curseur pour voir l'icône.
Je croyais que l'icône était toujours apparente, mais elle ne se voit que quand on survole un titre. Dommage. J'aurais préféré qu'elle soit permanente. Pas possible ?
Et l'icône est trop petite. On ne peut pas l'avoir plus grosse ?
Je sais, j'en demande toujours plus. Very Happy
_______________________
http://forumami.clicforum.fr/index.php


Forum
Author Message
Kyosuke
Contributeurs


Offline
Contributeurs

Joined: 30 Mar 2009
Posts: 436
Niveau:
Point(s): 532
Moyenne: 1.22
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Sat 9 Aug 2014 - 02:22    Post subject: Tutoriel : Outil de prévisualisation des sujets Reply with quote

J'ai ajouté le CSS suivant dans ton template overall_header.tpl :

Code: Sélectionner - Agrandir
/* Bouton Previsualisation des sujets */
button.quick-view {
   display: block !important;
   height: 32px !important;
   width: 32px !important;
   background: url(http://img110.xooimage.com/files/7/a/2/circle-add-32-470d195.png) no-repeat !important;
   top: 15px !important;
}
button.quick-view.active {
   background: url(http://img110.xooimage.com/files/e/3/6/circle-cross-32-470d198.png) no-repeat !important;
}


Ça te permet d'avoir une icône beaucoup plus imposante, toujours visible et bien positionnée par rapport à la hauteur de tes cellules.
_______________________


Forum
Author Message
Cinfonie
Membre


Offline
Membre

Joined: 29 Apr 2014
Posts: 199
Point(s): 201
Moyenne: 1.01
Windows Vista ou 7 Internet Explorer Féminin Poissons (20fev-20mar) 馬 Cheval

PostPosted: Sat 9 Aug 2014 - 02:33    Post subject: Tutoriel : Outil de prévisualisation des sujets Reply with quote

ça : background: url(http://img.xooimage.com/files110/7/a/2/circle-add-32-470d195.png)
c'est pour changer l'image de l'icône (parce que je ne l'aime pas ton + Very Happy ) ?
je sais je sais je sors

Je récapitule : il faut donc que je transfère les templates
- VIEWFORUM_BODY.TPL,
- VIEWTOPIC_BODY.TPL
- overall_header.tpl

C'est ça ?

edit image souhaitée :


_______________________
http://forumami.clicforum.fr/index.php


Forum
Author Message
Kyosuke
Contributeurs


Offline
Contributeurs

Joined: 30 Mar 2009
Posts: 436
Niveau:
Point(s): 532
Moyenne: 1.22
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Sat 9 Aug 2014 - 02:39    Post subject: Tutoriel : Outil de prévisualisation des sujets Reply with quote

Cinfonie wrote:
ça : background: url(http://img.xooimage.com/files110/7/a/2/circle-add-32-470d195.png)
c'est pour changer l'image de l'icône (parce que je ne l'aime pas ton + Very Happy ) ?


Bah quoi, il est très bien mon +, nahméoh. Razz
Plus sérieusement, oui, c'est bien ce qui permet de changer l'image de l'icône.

Attention tout de même: l'icône doit faire 32px de largeur et 32px de hauteur.

Cinfonie wrote:
Je récapitule : il faut donc que je transfère les templates
- VIEWFORUM_BODY.TPL,
- VIEWTOPIC_BODY.TPL
- overall_header.tpl

C'est ça ?


C'est tout à fait ça. Wink
_______________________


Forum
Author Message
Cinfonie
Membre


Offline
Membre

Joined: 29 Apr 2014
Posts: 199
Point(s): 201
Moyenne: 1.01
Windows Vista ou 7 Internet Explorer Féminin Poissons (20fev-20mar) 馬 Cheval

PostPosted: Sat 9 Aug 2014 - 02:57    Post subject: Tutoriel : Outil de prévisualisation des sujets Reply with quote

C'est bon, j'ai mis mon image. Mais fais la s'allumer. Là, elle est quasi invisible et s'allume que quand le curseur passe dessus. Pas la peine. On fait comment pour qu'elle reste visible ? (très important car la couleur de fond peut la rendre totalement inaperçue)





Edit :
Ok l'image est bien visible. Mais il y a un autre problème. Le premier message prévisualisé est dans une zone trop étroite.
On ne peut pas le lire? Ce n'est pas assez large ou alors il faudrait annulé la zone avatar.



_______________________
http://forumami.clicforum.fr/index.php


Forum
Author Message
Kyosuke
Contributeurs


Offline
Contributeurs

Joined: 30 Mar 2009
Posts: 436
Niveau:
Point(s): 532
Moyenne: 1.22
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Sat 9 Aug 2014 - 03:32    Post subject: Tutoriel : Outil de prévisualisation des sujets Reply with quote

En ce qui me concerne, je préfère que l'icône reste discrète.
Ça dépend des personnes, mais aussi du thème; c'est sûr qu'une image à faible opacité sur du bleu turquoise, c'est moyen.

Les modifs sont faites et j'ai répondu à ton MP.
Bonne nuit. Wink
_______________________
Following members like this message:
Cinfonie (09/08/14)


Forum
Author Message
Cinfonie
Membre


Offline
Membre

Joined: 29 Apr 2014
Posts: 199
Point(s): 201
Moyenne: 1.01
Windows Vista ou 7 Internet Explorer Féminin Poissons (20fev-20mar) 馬 Cheval

PostPosted: Sat 9 Aug 2014 - 03:39    Post subject: Tutoriel : Outil de prévisualisation des sujets Reply with quote

Bonne nuit Kyosuke et encore mille fois merci et bravo pour cette nouvelle fonction. Génial.
_______________________
http://forumami.clicforum.fr/index.php


Forum
Author Message
Khow
Membre


Offline
Membre

Joined: 30 Nov 2009
Posts: 31
Niveau:
Point(s): 35
Moyenne: 1.13
Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin

PostPosted: Sat 9 Aug 2014 - 04:07    Post subject: Tutoriel : Outil de prévisualisation des sujets Reply with quote

Énorme comme d'habitude ! Un grand merci Very Happy

Forum
Author Message
Contenu Sponsorisé





PostPosted: Today at 08:49    Post subject: Tutoriel : Outil de prévisualisation des sujets

Display posts from previous:   
Reply to topic Page 1 of 5 Goto page: 1, 2, 3, 4, 5  >




Portal | Index | Administration Panel | Create a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group |
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401