La date/heure actuelle est Ven 9 Déc 2016 - 02:00 - créer un forum

[Tutoriel] Avertissement vocal pour les nouveaux MP

Aller au contenu

Poster un nouveau sujet Répondre au sujet

[Tutoriel] Avertissement vocal pour les nouveaux MP
Auteur Message
RotorMan
Contributeurs


Hors ligne
Contributeurs

Inscrit le: 21 Déc 2006
Messages: 501
Niveau:
Point(s): 488
Moyenne: 0,97
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

MessagePosté le: Mer 7 Sep 2016 - 12:59    Sujet du message: [Tutoriel] Avertissement vocal pour les nouveaux MP Répondre en citant

PublicitéSupprimer les publicités ?



Tutoriel : Avertissement vocal avec Pop-up pour les nouveaux messages privés



Créateur : Kyosuke (tuto proposé avec son aimable autorisation)



Ce tutoriel va vous permettre d'avoir un message vocal et un pop-up qui vous avertiront de l'arrivée d'un (ou des) nouveau(x) message(s) privés



  • Difficulté du tutoriel : Très facile
  • Temps d'installation : 2 minutes

  • Inconvénients : Aucun





TUTO : Avertissement vocal de nouveaux Messages privés (MP)


Lorsque vous recevrez un nouveau message privé (ou plusieurs), une alerte vocale ainsi qu'un pop-up persistants se déclencheront.

Pour installer ce système, crée par notre ami
Kyosuke, il faut procéder ainsi :




- Première méthode :




Aller dans les templates du thème principal, sauvegarder le template "Overall_Header". L'ouvrir.

Au début, chercher ceci :

Code: Sélectionner - Agrandir
<!-- BEGIN switch_enable_pm_popup -->
<script language="Javascript" type="text/javascript">
<!--
if ( {PRIVATE_MESSAGE_NEW_FLAG} )
{
window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
}
//-->
</script>
<!-- END switch_enable_pm_popup -->


Le remplacer par cela :

Code: Sélectionner - Agrandir
<!-- BEGIN switch_enable_pm_popup -->
<script type="text/javascript">
/*****
Notification sonore & visuelle de la reception d'un nouveau message.
DEBUT
*****/

function newMessageAudio() {
var body = document.body || document.getElementsByTagName('body')[0],
opacity = 0,
html = '<audio autoplay>'
+ ' <source src="https://dl.dropboxusercontent.com/s/9n3h3ejb179o9bp/newmessage.mp3" type="audio/mpeg">'
+ '
[b]Vous avez reçu un nouveau message.[/b]
'
+ '</audio>'
+ '[url=http://privmsg.php/?folder=inbox]Vous avez reçu un nouveau message.[/url]';
body.insertAdjacentHTML('afterEnd', html);
var fadeIn = window.setInterval(function () {
if (opacity < 1) {
opacity += 0.1;
document.getElementById('newMessageNotification').style.opacity = opacity;
} else {
clearInterval(fadeIn);
}
}, 50);
}
if ( {PRIVATE_MESSAGE_NEW_FLAG} ) {
Event.observe(window, 'load', newMessageAudio, false);
}

/*****
Notification sonore & visuelle de la reception d'un nouveau message.
FIN
*****/
</script>
<style type="text/css" media="all">
#newMessageNotification {
position: fixed;
bottom: 25px;
left: 15px;
padding: 15px 15px 15px 57px;
background: url(http://img.xooimage.com/files101/a/a/4/chat-4620e1e.png) no-repeat 15px center rgba(255, 255, 255, 0.95);
border: 1px solid #A2A2A2;
border-radius: 3px;
box-shadow: 0 2px 3px #9C9C9C;
font-family: Arial, Sans-Serif;;
font-size: 12px;
color: #225892;
font-weight: bold;
text-shadow: 0 1px 0 #fff;
text-decoration: none;
opacity:0;
}
</style>
<!-- END switch_enable_pm_popup -->


Sauvegarder et tester.




- Deuxième méthode :




Si cela ne fonctionne pas (cela dépend des thèmes utilisés).

Méthode que j'utilise et qui fonctionne parfaitement :

Toujours dans Overall_Header.tpl, supprimer cela :

Code: Sélectionner - Agrandir
<!-- BEGIN switch_enable_pm_popup -->
<script language="Javascript" type="text/javascript">
<!--
if ( {PRIVATE_MESSAGE_NEW_FLAG} )
{
window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
}
//-->
</script>
<!-- END switch_enable_pm_popup -->


Puis rajouter le script de Kyosuke juste après la balise "body" :

Code: Sélectionner - Agrandir
<!-- BEGIN switch_enable_pm_popup -->
<script type="text/javascript">
/*****
Notification sonore & visuelle de la reception d'un nouveau message.
DEBUT
*****/

var newMessages = "{PRIVATE_MESSAGE_INFO}";
function newMessageAudio() {
var body = document.body || document.getElementsByTagName('body')[0],
opacity = 0,
html = '<audio autoplay>'
+ ' <source src="https://dl.dropboxusercontent.com/s/9n3h3ejb179o9bp/newmessage.mp3" type="audio/mpeg">'
+ '
[b]Vous avez reçu un nouveau message.[/b]
'
+ '</audio>'
+ '[url=http://privmsg.php/?folder=inbox]Vous avez reçu un nouveau message.[/url]';
body.insertAdjacentHTML('afterEnd', html);
var fadeIn = window.setInterval(function () {
if (opacity < 1) {
opacity += 0.1;
document.getElementById('newMessageNotification').style.opacity = opacity;
} else {
clearInterval(fadeIn);
}
}, 50);
}
if ( newMessages.indexOf("Vous avez") > -1 ) {
Event.observe(window, 'load', newMessageAudio, false);
}

/*****
Notification sonore & visuelle de la reception d'un nouveau message.
FIN
*****/
</script>
<style type="text/css" media="all">
#newMessageNotification {
position: fixed;
bottom: 25px;
left: 15px;
padding: 15px 15px 15px 57px;
background: url(http://img.xooimage.com/files101/a/a/4/chat-4620e1e.png) no-repeat 15px center rgba(255, 255, 255, 0.95);
border: 1px solid #A2A2A2;
border-radius: 3px;
box-shadow: 0 2px 3px #9C9C9C;
font-family: arial;
font-size: 12px;
color: #225892;
font-weight: bold;
text-shadow: 0 1px 0 #fff;
text-decoration: none;
opacity:0;
}
</style>
<!-- END switch_enable_pm_popup -->


Sauvegarder et tester.




- Pour info, le style peut tout à fait être placé dans votre css, pour cela il suffit de ne pas mettre :

Code: Sélectionner - Agrandir
<style type="text/css" media="all">
#newMessageNotification {
position: fixed;
bottom: 25px;
left: 15px;
padding: 15px 15px 15px 57px;
background: url(http://img.xooimage.com/files101/a/a/4/chat-4620e1e.png) no-repeat 15px center rgba(255, 255, 255, 0.95);
border: 1px solid #A2A2A2;
border-radius: 3px;
box-shadow: 0 2px 3px #9C9C9C;
font-family: arial;
font-size: 12px;
color: #225892;
font-weight: bold;
text-shadow: 0 1px 0 #fff;
text-decoration: none;
opacity:0;
}
</style>


après le code en "Javascript" mais placer le tout ainsi :

Code: Sélectionner - Agrandir

#newMessageNotification {
position: fixed;
bottom: 25px;
left: 15px;
padding: 15px 15px 15px 57px;
background: url(http://img.xooimage.com/files101/a/a/4/chat-4620e1e.png) no-repeat 15px center rgba(255, 255, 255, 0.95);
border: 1px solid #A2A2A2;
border-radius: 3px;
box-shadow: 0 2px 3px #9C9C9C;
font-family: arial;
font-size: 12px;
color: #225892;
font-weight: bold;
text-shadow: 0 1px 0 #fff;
text-decoration: none;
opacity:0;
}


dans votre css (feuille de style de votre forum).




Merci à Kyosuke d'avoir permis de partager son travail.





Pour toutes questions, poster à la suite de ce tuto. Merci.



_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.
Les membres suivants remercient RotorMan pour ce message :
(07/09/16)


Forum
Auteur Message
The End


Hors ligne
Invité




MessagePosté le: Mer 7 Sep 2016 - 16:04    Sujet du message: [Tutoriel] Avertissement vocal pour les nouveaux MP Répondre en citant

Excellent !

Auteur Message
Contenu Sponsorisé





MessagePosté le: Aujourd’hui à 02:00    Sujet du message: [Tutoriel] Avertissement vocal pour les nouveaux MP

Montrer les messages depuis:   
Répondre au sujet Page 1 sur 1




Portail | Index | Panneau d’administration | Créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group | Traduction par : phpBB-fr.com
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401