Connexion

Récupérer mon mot de passe

Derniers sujets
» *RESOLU*[PhpBB3] Couleurs des liens dans le widget " derniers sujets "
par Milouze14 Hier à 19:58

» histoire du Jour sans fin
par Quad Daniel Hier à 12:24

» [PhpBB2] Je n'ai pas le nombre de posts et sujets dans l'astuce...
par Milouze14 Hier à 5:54

» [PhpBB2]Afficher le nombre de sujets/messages sur les messages
par Milouze14 Dim 13 Oct 2019 - 18:04

» [PhpBB2] Coloration de citation parteille et autres
par Milouze14 Dim 13 Oct 2019 - 17:58

» [PhpBB3]Afficher le nombre de sujets/messages sur les messages
par Milouze14 Sam 12 Oct 2019 - 18:44

» [Edge] Probleme affichage d'avatar..
par Milouze14 Ven 11 Oct 2019 - 18:55

» *RESOLU*[Edge]Images dans les titres du forum
par Milouze14 Ven 11 Oct 2019 - 18:20

» *RESOLU*[PhpBB3] Disposition de l'avatar dans les messages
par Milouze14 Mer 9 Oct 2019 - 9:08

» Règlement de l'entraide Forumactif
par Quad Daniel Mar 8 Oct 2019 - 19:56

» Histoire de Blondes Sans Fin
par Quad Daniel Mar 8 Oct 2019 - 13:28

» *RESOLU*[Invision] rajouter une phrase pour informer les futurs membres en cas de problème d'inscriptionn
par Milouze14 Dim 6 Oct 2019 - 8:48

» Lettre ouverte à mon patron "histoire"
par Quad Daniel Sam 5 Oct 2019 - 8:23

» *CORBEILLE*[PhpBB2] Suppression de tous les posts d'invités
par Milouze14 Ven 4 Oct 2019 - 3:49

» *[AwesomeBB] Enlever bonton "Poster un nouveau sujet" sur les sujets d'un forum
par Milouze14 Jeu 3 Oct 2019 - 18:49

» *CORBEILLE*[PhpBB2] Mise en forme des liens
par Milouze14 Jeu 3 Oct 2019 - 5:21

» *RESOLU*[Edge] Afficher la prévisualisation des groupes
par Milouze14 Mer 2 Oct 2019 - 20:05

» Avant que ça recommence ! "Blagounette"
par Quad Daniel Mar 1 Oct 2019 - 7:15

» [AwesomeBB] Remplacer la phrase d'information : Désolé, mais seuls les utilisateurs avec un accès..
par Milouze14 Lun 30 Sep 2019 - 19:17

» Le message avec Le cadeau surprise "blagounette"
par Quad Daniel Sam 28 Sep 2019 - 9:51

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

Voir le sujet précédent Voir le sujet suivant Aller en bas

avatar
ThunderTB
Milouzien

MessageThunderTB le Ven 26 Oct 2018 - 23:07

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 !!!


Dernière édition par ThunderTB le Mar 30 Oct 2018 - 21:49, édité 1 fois
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Sam 27 Oct 2018 - 18:09

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;
}
avatar
ThunderTB
Milouzien

MessageThunderTB le Sam 27 Oct 2018 - 18:58

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 ?
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Sam 27 Oct 2018 - 19:10

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
photoclic
photoclic
Milouzien

Messagephotoclic le Sam 27 Oct 2018 - 19:14

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.
avatar
ThunderTB
Milouzien

MessageThunderTB le Sam 27 Oct 2018 - 19:59

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;
            }
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Dim 28 Oct 2018 - 3:50

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 clin oeil
avatar
ThunderTB
Milouzien

MessageThunderTB le Dim 28 Oct 2018 - 18:22

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 .
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Dim 28 Oct 2018 - 18:39

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 clin oeil .
photoclic
photoclic
Milouzien

Messagephotoclic le Dim 28 Oct 2018 - 19:16

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 heuu

A confirmer Franck car ta phrase est ambigüe.
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Dim 28 Oct 2018 - 19:18

Hello Serge,

oui effectivement c'est très ambiguë
avatar
ThunderTB
Milouzien

MessageThunderTB le Lun 29 Oct 2018 - 17:16

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
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Lun 29 Oct 2018 - 17:22

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?
avatar
ThunderTB
Milouzien

MessageThunderTB le Lun 29 Oct 2018 - 20:58

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 .
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Mar 30 Oct 2018 - 3:58

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

MessageThunderTB le Mar 30 Oct 2018 - 21:47

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é !!!
Jackymi
Jackymi
Milouzien

MessageJackymi le Mar 30 Oct 2018 - 23:56

-Staff du Forum Milouze14-



  • Hello 
    Sujet résolu et déplacé dans le forum adéquat.

Pour toute information,merci de contacter un Membre du Staff

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum