It is currently Fri 30 Sep 2016 - 12:02 - créer un forum

[Tutoriel] Avertissement vocal pour les nouveaux MP

Skip to content

Post new topic Reply to topic

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


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 385
Niveau:
Point(s): 366
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Wed 7 Sep 2016 - 12:59    Post subject: [Tutoriel] Avertissement vocal pour les nouveaux MP Reply with quote

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.
Following members like this message:
Gu!gan (07/09/16)


Forum
Author Message
Gu!gan
VIP


Offline
VIP

Joined: 17 Jun 2004
Posts: 1,081
Niveau:
Point(s): 1,333
Moyenne: 1.23
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Taureau (20avr-20mai) 龍 Dragon

PostPosted: Wed 7 Sep 2016 - 16:04    Post subject: [Tutoriel] Avertissement vocal pour les nouveaux MP Reply with quote

Excellent !
_______________________
(\__/)
(='.'=)
(")_(")
Voici Lapin. Copiez Lapin dans votre signature pour l'aider à concrétiser sa domination du monde


Forum
Author Message
Contenu Sponsorisé





PostPosted: Today at 12:02    Post subject: [Tutoriel] Avertissement vocal pour les nouveaux MP

Display posts from previous:   
Reply to topic Page 1 of 1




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