[PHPBB2]Système d'alerte en temps réel / suite

Salut gang c'est encore moi , je viens vous consultez encore une fois pour un problème que j'ai réussi
à réglé ici il y quelque temps de ça déjà c'est au sujet de l'astuce Système d'alerte partage par forumactif .

La dernière fois que je suis venu vous consulté j'avais fait la demande pour créer un doublons de l'alert
comme ceci : https://www.milouze14.com/t31220-resolu-phpbb2-systeme-d-alerte-en-temps-reel-forumactif#593441
voici le rendu visuel : https://i.servimg.com/u/f84/16/67/19/10/miltes10.png

Sur le rendu j'ai encerclé en rouge les deux alert qui fonctionne sur mon forum , par contre j'ai fait un cercle bleu
c'est à cette endroit que j'aimerais mettre la troisième alert , le souci est que j'ai tout fait pour prendre l'astuce donner
par @photoclic en changeant la lettre B ajouter à realTime_alert par C mais rien n'y fait je n'y arrive pas
donc je viens ici en espérant que quelqu'un puisse m'aider encore une fois ...

Un gros merci d'avance !!!

Hello Franck,
pourquoi mettre 2 styles dans ta feuille de style?

Supprimes la css des 2 astuces:

Code:

    .realTime_alert{
    background-color: rgba(0, 0, 0, 0.64);
            -webkit-background-size:50px;
              -moz-background-size:50px;
                -o-background-size:50px;
                    background-size:50px;
            -webkit-border-radius:5px 0px 5px 5px;
              -moz-border-radius:5px 0px 5px 5px;
                    border-radius:5px 0px 5px 5px;
            position:fixed;
            top:65px;
            border-bottom: 0px #1f1f1f solid;
            border-right: 5px #057BFA solid;
            right:20px;
            min-height:60px;
            font-size:12px;
            width:400px;
            padding:10px 10px 10px 70px;
            font-family:Helvetica;
            color:#EFEFEF;
            }
            .realTime_alert b{
            display:block;
            margin-bottom:2px;
            font-size:15px;
            }
            .realTime_alert .close{
            position:absolute;
            right:10px;
            top:5px;
            font-size:15px;
            -webkit-border-radius:50px;
              -moz-border-radius:50px;
                    border-radius:50px;
            height:16px;
            width:16px;
            text-align:center;
            line-height:13px;
            cursor:pointer;
   
            }
            .realTime_alert .close:hover{
            color:#FFF;
            background:#666;
            }
            #ebtzd .tooltip{
            opacity:0;
            position:relative;
            overflow:visible;
            z-index:100!important;
            display:inline-block;
            top:5px;
            -webkit-transition-duration:500ms;
              -moz-transition-duration:500ms;
                -o-transition-duration:500ms;
                    transition-duration:500ms;
            background:rgba(0, 0, 0, .8);
            padding:10px;
            -webkit-border-radius:3px;
              -moz-border-radius:3px;
                    border-radius:3px;
            font-family:Helvetica;
            letter-spacing:1px;
            font-size:13px;
            width:300px;
            color:#fff;
            }

Code:


    /*alerte en live en bas*/
    .realTime_alertB{
    background:#FDFDFD no-repeat 10px center;
    -webkit-background-size:50px;
      -moz-background-size:50px;
        -o-background-size:50px;
            background-size:50px;
    -webkit-box-shadow:0 0 4px rgba(0,0,0,.6);
      -moz-box-shadow:0 0 4px rgba(0,0,0,.6);
            box-shadow:0 0 4px rgba(0,0,0,.6);
    position:fixed;
    bottom:50px;
    left:20px;
    min-height:60px;
    font-size:13px;
    width:50%;
    padding:10px 10px 10px 70px;
    font-family:Helvetica;
    color:#474747;
    }
    .realTime_alertB b{
    display:block;
    margin-bottom:5px;
    font-size:15px;
    }
    .realTime_alertB .close{
    position:absolute;
    right:10px;
    top:5px;
    font-size:15px;
    -webkit-border-radius:50px;
      -moz-border-radius:50px;
            border-radius:50px;
    height:16px;
    width:16px;
    text-align:center;
    line-height:13px;
    cursor:pointer;
    }
    .realTime_alertB .close:hover{
    color:#FFF;
    background:#666;
    }
    #ebtzd .tooltip{
    opacity:0;
    position:relative;
    overflow:visible;
    z-index:100!important;
    display:inline-block;
    top:5px;
    -webkit-transition-duration:500ms;
      -moz-transition-duration:500ms;
        -o-transition-duration:500ms;
            transition-duration:500ms;
    background:rgba(0, 0, 0, .8);
    padding:10px;
    -webkit-border-radius:3px;
      -moz-border-radius:3px;
            border-radius:3px;
    font-family:Helvetica;
    letter-spacing:1px;
    font-size:13px;
    width:300px;
    color:#fff;
    }



et remplaces par (en modifiant la couleur etc etc si besoin):

Code:


div[class^="realTime_alert"]
{
background:#FDFDFD no-repeat 10px center;
-webkit-background-size:50px;
  -moz-background-size:50px;
    -o-background-size:50px;
        background-size:50px;
-webkit-box-shadow:0 0 4px rgba(0,0,0,.6);
  -moz-box-shadow:0 0 4px rgba(0,0,0,.6);
        box-shadow:0 0 4px rgba(0,0,0,.6);
position:fixed;
top:50px;
right:20px;
min-height:60px;
font-size:13px;
width:200px;
padding:10px 10px 10px 70px;
font-family:Helvetica;
color:#474747;
}
div[class^="realTime_alert"] b{
display:block;
margin-bottom:5px;
font-size:15px;
}
div[class^="realTime_alert"] .close{
position:absolute;
right:10px;
top:5px;
font-size:15px;
-webkit-border-radius:50px;
  -moz-border-radius:50px;
        border-radius:50px;
height:16px;
width:16px;
text-align:center;
line-height:13px;
cursor:pointer;
}
div[class^="realTime_alert"] .close:hover{
color:#FFF;
background:#666;
}
#ebtzd .tooltip{
opacity:0;
position:relative;
overflow:visible;
z-index:100!important;
display:inline-block;
top:5px;
-webkit-transition-duration:500ms;
  -moz-transition-duration:500ms;
    -o-transition-duration:500ms;
        transition-duration:500ms;
background:rgba(0, 0, 0, .8);
padding:10px;
-webkit-border-radius:3px;
  -moz-border-radius:3px;
        border-radius:3px;
font-family:Helvetica;
letter-spacing:1px;
font-size:13px;
width:300px;
color:#fff;
}

Salut Phil , merci de ta réponse !!!
Par contre je suis vraiment pas sur de comprendre ou je dois mettre le nouveau code ?
parce que les deux astuces que tu me demande de supprimer sont en fait
différent en rendu , dans le fond j'aimerais en avoir 3 "notification" mais avec un
rendu unique au niveau graphique et au niveau de sa position sur le forum .
Dans le fond comment puis-je faire pour avoir 3 rendu diférent avec le code que tu
viens de me donner ?

Le style que je te donne sera appliqué pour les deux scripts actuel,
si tu ajoutes un script avec admettons la lettre c ce sera pareil mon ami.
En faite ceci:

Code:


div[class^="realTime_alert"]


Veut dire que tu peux avoir des class :

Code:


.realTime_alertA


Code:


.realTime_alertB


ou encore

Code:


.realTime_alerttrucbidule


et ce indéfiniment Franck

Bonsoir Philippe et Franck.

j'avais effectivement dupliqué car je souhaitais aussi des rendus différents.

Peut-être as-tu oublié de changer tous les éléments partout, y compris dans le html?

Sinon ce que présente Philippe est une bien meilleure solution que je ne connaissais pas. Merci Philippe pour cette info.

Re , donc si je comprend bien je doit faire ceci si je veux 3 modèle différent et le coller
dans mon css de forum ...

Code:

div[class^="realTime_alert"]
{
    background-color: rgba(0, 0, 0, 0.64);
            -webkit-background-size:50px;
              -moz-background-size:50px;
                -o-background-size:50px;
                    background-size:50px;
            -webkit-border-radius:5px 0px 5px 5px;
              -moz-border-radius:5px 0px 5px 5px;
                    border-radius:5px 0px 5px 5px;
            position:fixed;
            top:65px;
            border-bottom: 0px #1f1f1f solid;
            border-right: 5px #057BFA solid;
            right:20px;
            min-height:60px;
            font-size:12px;
            width:400px;
            padding:10px 10px 10px 70px;
            font-family:Helvetica;
            color:#EFEFEF;
            }
div[class^="realTime_alert"] b{
            display:block;
            margin-bottom:2px;
            font-size:15px;
            }
div[class^="realTime_alert"] .close{
            position:absolute;
            right:10px;
            top:5px;
            font-size:15px;
            -webkit-border-radius:50px;
              -moz-border-radius:50px;
                    border-radius:50px;
            height:16px;
            width:16px;
            text-align:center;
            line-height:13px;
            cursor:pointer;
}
div[class^="realTime_alert"] .close:hover{
color:#FFF;
background:#666;
}
            #ebtzd .tooltip{
            opacity:0;
            position:relative;
            overflow:visible;
            z-index:100!important;
            display:inline-block;
            top:5px;
            -webkit-transition-duration:500ms;
              -moz-transition-duration:500ms;
                -o-transition-duration:500ms;
                    transition-duration:500ms;
            background:rgba(0, 0, 0, .8);
            padding:10px;
            -webkit-border-radius:3px;
              -moz-border-radius:3px;
                    border-radius:3px;
            font-family:Helvetica;
            letter-spacing:1px;
            font-size:13px;
            width:300px;
            color:#fff;
            }
div[class^="realTime_alertB"]
{
  background:#FDFDFD no-repeat 10px center;
    -webkit-background-size:50px;
      -moz-background-size:50px;
        -o-background-size:50px;
            background-size:50px;
    -webkit-box-shadow:0 0 4px rgba(0,0,0,.6);
      -moz-box-shadow:0 0 4px rgba(0,0,0,.6);
            box-shadow:0 0 4px rgba(0,0,0,.6);
    position:fixed;
    bottom:50px;
    left:20px;
    min-height:60px;
    font-size:13px;
    width:50%;
    padding:10px 10px 10px 70px;
    font-family:Helvetica;
    color:#474747;
    }
div[class^="realTime_alertB"] b{
    display:block;
    margin-bottom:5px;
    font-size:15px;
    }
div[class^="realTime_alertB"] .close{
    position:absolute;
    right:10px;
    top:5px;
    font-size:15px;
    -webkit-border-radius:50px;
      -moz-border-radius:50px;
            border-radius:50px;
    height:16px;
    width:16px;
    text-align:center;
    line-height:13px;
    cursor:pointer;
    }
div[class^="realTime_alertB"] .close:hover{
color:#FFF;
background:#666;
}
        #ebtzd .tooltip{
        opacity:0;
        position:relative;
        overflow:visible;
        z-index:100!important;
        display:inline-block;
        top:5px;
        -webkit-transition-duration:500ms;
          -moz-transition-duration:500ms;
            -o-transition-duration:500ms;
                transition-duration:500ms;
        background:rgba(0, 0, 0, .8);
        padding:10px;
        -webkit-border-radius:3px;
          -moz-border-radius:3px;
                border-radius:3px;
        font-family:Helvetica;
        letter-spacing:1px;
        font-size:13px;
        width:300px;
        color:#fff;
        }
div[class^="realTime_alertC"]
{
    background-color: rgba(0, 0, 0, 0.64);
            -webkit-background-size:50px;
              -moz-background-size:50px;
                -o-background-size:50px;
                    background-size:50px;
            -webkit-border-radius:5px 0px 5px 5px;
              -moz-border-radius:5px 0px 5px 5px;
                    border-radius:5px 0px 5px 5px;
            position:fixed;
            top:65px;
            border-bottom: 0px #1f1f1f solid;
            border-right: 5px #057BFA solid;
            right:20px;
            min-height:60px;
            font-size:12px;
            width:400px;
            padding:10px 10px 10px 70px;
            font-family:Helvetica;
            color:#EFEFEF;
            }
div[class^="realTime_alertC"] b{
            display:block;
            margin-bottom:2px;
            font-size:15px;
            }
div[class^="realTime_alertC"] .close{
            position:absolute;
            right:10px;
            top:5px;
            font-size:15px;
            -webkit-border-radius:50px;
              -moz-border-radius:50px;
                    border-radius:50px;
            height:16px;
            width:16px;
            text-align:center;
            line-height:13px;
            cursor:pointer;
}
div[class^="realTime_alertC"] .close:hover{
color:#FFF;
background:#666;
}
            #ebtzd .tooltip{
            opacity:0;
            position:relative;
            overflow:visible;
            z-index:100!important;
            display:inline-block;
            top:5px;
            -webkit-transition-duration:500ms;
              -moz-transition-duration:500ms;
                -o-transition-duration:500ms;
                    transition-duration:500ms;
            background:rgba(0, 0, 0, .8);
            padding:10px;
            -webkit-border-radius:3px;
              -moz-border-radius:3px;
                    border-radius:3px;
            font-family:Helvetica;
            letter-spacing:1px;
            font-size:13px;
            width:300px;
            color:#fff;
            }

Hello Franck,

ici :
https://www.milouze14.com/t31754-phpbb2systeme-d-alerte-en-temps-reel-suite#603657

, dans le fond j'aimerais en avoir 3 "notification" mais avec un
rendu unique au niveau graphique et au niveau de sa position sur le forum .

Ta css sera alors:

Code:

div[class^="realTime_alert"]
{
    background-color: rgba(0, 0, 0, 0.64);
            -webkit-background-size:50px;
              -moz-background-size:50px;
                -o-background-size:50px;
                    background-size:50px;
            -webkit-border-radius:5px 0px 5px 5px;
              -moz-border-radius:5px 0px 5px 5px;
                    border-radius:5px 0px 5px 5px;
            position:fixed;
            top:65px;
            border-bottom: 0px #1f1f1f solid;
            border-right: 5px #057BFA solid;
            right:20px;
            min-height:60px;
            font-size:12px;
            width:400px;
            padding:10px 10px 10px 70px;
            font-family:Helvetica;
            color:#EFEFEF;
            }
div[class^="realTime_alert"] b{
            display:block;
            margin-bottom:2px;
            font-size:15px;
            }
div[class^="realTime_alert"] .close{
            position:absolute;
            right:10px;
            top:5px;
            font-size:15px;
            -webkit-border-radius:50px;
              -moz-border-radius:50px;
                    border-radius:50px;
            height:16px;
            width:16px;
            text-align:center;
            line-height:13px;
            cursor:pointer;
}
div[class^="realTime_alert"] .close:hover{
color:#FFF;
background:#666;
}
            #ebtzd .tooltip{
            opacity:0;
            position:relative;
            overflow:visible;
            z-index:100!important;
            display:inline-block;
            top:5px;
            -webkit-transition-duration:500ms;
              -moz-transition-duration:500ms;
                -o-transition-duration:500ms;
                    transition-duration:500ms;
            background:rgba(0, 0, 0, .8);
            padding:10px;
            -webkit-border-radius:3px;
              -moz-border-radius:3px;
                    border-radius:3px;
            font-family:Helvetica;
            letter-spacing:1px;
            font-size:13px;
            width:300px;
            color:#fff;
            }


Et c'est tout mon ami

Re-Salut Phil , bon je dois faire mon méaculpa et avouer que en se moment je suis perdu
pourquoi suis-je perdu ? parce que je ne comprend pas le fait que un css
peu en venir à donner 3 résultats différent au rendu graphique .
Je ne suis pas sur de la méthode à employer pour faire en sorte que mon css et mon
script vienne en harmonie et fonctionner au rendu .

De mon coter tout sort de la même façon c'est a dire et ce avec mes 2 scripts
donc je veux pas prendre de ton temps précieux mais tu serais extrêment aimable
si tu pouvais me donner l'exemple à appliquer de AàZ ... Donc
Script + css pour les trois notifications avec rendu unique donc une peu être en bas
avec un 300px width 300px height et l'autre en haut avec 550px width et 250px height avec une couleurs différente .

Tu serais vraiment gentil de me guidé , d'abitude je me débrouille bien avec
les css et html par contre ici je suis perdu .

Re Franck,
le style donné(css) est applicable quelque soit le script utilisé mon ami.
Ensuite j'ai donné ce style car ta demande était la suivante:

dans le fond j'aimerais en avoir 3 "notification" mais avec un
rendu unique au niveau graphique et au niveau de sa position sur le forum .

Si je résume ta demande Franck:
Tu désires avoir plusieurs scripts comme la mentionné Serge @photoclic
Ce que je veux dire après c'est que peut installer 10000 scripts, tu
n'auras pas besoin de modifier ta feuille de style.


Donc un seul style .

Bonsoir Philippe et Franck,

J'ai l'impression que Franck souhaite en fait 3 css différents, principalement au niveau du fond de l'annonce

A confirmer Franck car ta phrase est ambigüe.

Hello Serge,

oui effectivement c'est très ambiguë

Resalut les amis et encore merci pour votre aide !!!

Je crois que je n'est peut-être pas été asser clair dans ma demande par contre
je viens de penser a quelque chose de plus simple peut-être , disons que je garde mes
2 notifications comme elle sont donc ont ne touche à rien de se que j'avais , et que
je changeais ma demande ...

Est-ce possible de créer un page html sur le forum / en sélectionnant haut du forum
"Voulez-vous utiliser le haut et le bas de page de votre forum ?" je coche oui
j'envoie un code pour afficher un contenue centré et fixe comme ceci :
https://i.servimg.com/u/f84/16/67/19/10/miltes11.png

Hello Franck,
de rien,donc on laisse tomber ta demande alors ?

Je ne comprends vraiment pas ta deuxième question,
tu veux créer une page html pour quoi faire stp et à quoi elle servira?

ReSalut !!!
Oui en effet ont oublie la première option puisque sa fonctionne pas ...

J'aimerais créer une page html sur mon forum , donc
Panneau de configuration > Modules > Gestion des pages HTML >
par la suite je créer un page envoie mon code HTML dans la page
coche OUI pour utiliser le haut de page de mon forum et coche NON pour
utiliser la page en tant que page d'accueil .

Jusque la je sais faire , j'envoie mon code et lorsque je lance prévisualisation
l'astuce semble fonctionner sa donne exactement ceci : https://i.servimg.com/u/f84/16/67/19/10/miltes11.png

Donc sa semble fonctionner par contre lorsque je valide et je retourne sur mon forum pour voir
si toute fonctionne l'astuce ne fonctionne plus et la page html ne semble pas se lancer .

Hello Franck,
tu peux donner le code html de ta page html stp
car je ne vois toujours pas le rapport avec ton sujet !!

ReSalut Phil , finalement avec tout ce "Brainstorming" j'ai trouver la solution en
utilisant la méthode de Photolic . La raison du pourquoi sa ne fonctionnais pas est
simple c'est que dans le script de l'astuce je devais changer 2tags Alert
c'est pas grand chose mais sa explique le pourquoi mes éléments notification dupliquais
avec le même css plutôt que d'avoir leurs propre rendu , donc maintenant tout est
parfait ...

Un gros merci à vous deux , très apprécié !!!