AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le deal à ne pas rater :
Code promo Nike : -25% dès 50€ d’achats sur tout le site Nike
Voir le deal

    (HALLOW) Demande de QEEL avec Hover et infobulles

    RainbowPanda
    RainbowPanda
    FémininAge : 30Messages : 52

    Dim 26 Oct 2014 - 0:13

    Un QEEL avec hover et infosbulles pour les groupes



    Bonsoir, déjà j'espère ne pas me tromper dans les termes "hover" et "infobulles" que de toute façon j'ai schématisé. Je n'ai pas trouvé mon bonheurs dans le libre service donc j'espère vraiment qu'ici quelqu'un pourra répondre à ma demande.

    J'ai une idée assez précise de ce que je veux, il y a peu d'éléments ( je crois ? ), mais j'aimerais que ce peu d'élément soit bien travaillé. J'aime l'idée qu'au passage de la souris, l'image de Thomas Sangster se décale ou alors devienne transparente pour laisser apparaître les crédits toussa toussa. Le deuxième effet concerne les groupes qui seront à droite, au passage de la souris j'aimerais bien que le texte devienne vert et qu'une infobulle apparaisse avec la description du groupe. Si description trop longue: possibilité d'une scrollbar ?

    J'espère avoir été assez claire sur mes désirs et merci d'avance :)


    Schéma(s) et Eléments
    Schémas :
    schémas:
    Tailles des éléments : L'image de font utilisé sur les schémas fait 900 de large sur 416 ! L'image de Thomas Sangster 141*235 le premier bloc environs 330*184 et celui du bas 500*130
    Effets voulus : Je pense que l'effet voulu pour la photo qui dévoile les crédit est une "transition" non ?
    Version de votre forum : PHPBB2


    Ressources
    Je vous fournit l'image de fond et celle de Thomas Sangster !
    images:


    Autres précisions ?
    Je pense que c'est tout, je vous remercie d'avance de la considération que vous porterez à ma demande et vous souhaite une agréable nuit !
    Anonymous
    Invité

    Dim 26 Oct 2014 - 11:42

    Hey !

    Je veux tenter, je m'y mets tout de suite :3
    RainbowPanda
    RainbowPanda
    FémininAge : 30Messages : 52

    Dim 26 Oct 2014 - 14:03

    How super, merci beaucoup :) ♥
    RainbowPanda
    RainbowPanda
    FémininAge : 30Messages : 52

    Mar 28 Oct 2014 - 16:50

    Je peu me permettre de demander des nouvelles ? Encore merci ^^
    Anonymous
    Invité

    Ven 31 Oct 2014 - 14:42

    Ca avance. Juste un doute : le "Ces derniers temps on a vu passer" correspond aux membres connectés les 24 dernières heures ou les membres en ligne ?

    Tu peux suivre l'avancée ici.


    Dernière édition par Halloween le Ven 31 Oct 2014 - 14:59, édité 1 fois
    RainbowPanda
    RainbowPanda
    FémininAge : 30Messages : 52

    Ven 31 Oct 2014 - 14:50

    Merci beaucoup, oui ce sont les membres connectés les 24 dernières heures :)
    Encore merci !
    Anonymous
    Invité

    Ven 31 Oct 2014 - 15:05

    Le soucis avec cette phrase, c'est qu'elle est complètement indépendante : elle prend la couleur d'écriture du forum uniquement, et sa taille aussi. Donc ça rend franchement pas très bien :/
    RainbowPanda
    RainbowPanda
    FémininAge : 30Messages : 52

    Ven 31 Oct 2014 - 15:14

    Ha mince... Je viens de regarder l'avancé et j'aime vraiment beaucoup ( miles mercis pour ton travail ).
    Je réfléchis du coup pour les membres connectés... Tu crois qu'on peut les mettre dans une "boite" entre les deux autres ( celle avec le bienvenue au dernier inscrit et celle avec le nombre de connecté en ce moment ) ? Et peut-être mettre en hover comme pour les crédits ? Je te fournis une image si l'idée te semble bonne :)
    Anonymous
    Invité

    Ven 31 Oct 2014 - 15:26

    Dans une autre boîte ça risque de faire minuscule :hum: Sauf si je repositionne l'image de Newt. Mais derrière une autre image ça risque de faire chargé :/
    RainbowPanda
    RainbowPanda
    FémininAge : 30Messages : 52

    Ven 31 Oct 2014 - 15:37

    Ha sinon j'ai une autre idée, mais j'ai pas envie de te faire trop galéré non plus :S
    Je fais un croquis pour que sa soit plus simple à expliquer
    Spoiler:

    Et donc mettre dans la case à droite les connectés ces dernière 24h... Je sais pas si sa rendra bien ou quoi mais c'est une idée
    Anonymous
    Invité

    Ven 31 Oct 2014 - 17:05

    Ah ah, faut que je repositionne tout /PAN/ Cela dit c'est carrément plus classe comme ça *-*
    Je m'y remets d'ici une heure Wink

    EDIT : Modifié :3
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 31 Oct 2014 - 20:06

    Bouh!

    Si je peux me permettre, pour la variable des derniers connectés, elle est habituellement sous ce format là :
    Code:
    <tr><td class="row1><span class="gensmall"> Membres connectés au cours des XX dernières heures : <a href="Lien vers le profil"><span style="color: couleur;"><strong>NOM</strong></span></a></span></td></tr>

    J'imagine que tu l'as entourée d'une table, non? Si tu donnes une class à ta table, tu peux modifier la mise en forme en mettant dans ton CSS :
    Code:
    /*Fond derrière la phrase*/
    .nom_de_la_class row1 {
    background-color : transparent;
    }

    /*Police de la phrase*/
    .nom_de_la_class span.gensmall {
    propriété : valeur;
    }

    /*Police des liens de la phrase*/
    .nom_de_la_class span.gensmall a {
    propriété : valeur;
    }

    En espérant t'être utile ^^
    Sinon ignores-moi et lance-moi en bas d'un ravin, j'suis désolée T_T



    Anonymous
    Invité

    Ven 31 Oct 2014 - 20:13

    Je pense jamais au .gensmall, je sais jamais à quoi ça sert :hum:
    Merci Onyx, je vais modifier Very Happy

    Je t'ajoute au crédit ♥
    RainbowPanda
    RainbowPanda
    FémininAge : 30Messages : 52

    Ven 31 Oct 2014 - 20:18

    Wow c'est carrément parfait ! Merci beaucoup c'est vraiment ce que je voulais (:
    Après pour la proposition de Onyx, je suppose que je vous laisse voir ca toutes les deux car moi je n'y comprend rien x_x En tout cas merci de vous être intéressé à ma demande !
    Anonymous
    Invité

    Ven 31 Oct 2014 - 20:20

    En fait grace à Onyx je peux mettre en forme le texte du "Ces derniers temps on a vu ..." :3
    Du coup je pense avoir terminé, qu'en penses-tu ?
    RainbowPanda
    RainbowPanda
    FémininAge : 30Messages : 52

    Ven 31 Oct 2014 - 20:23

    C'est parfait, j'aime vraiment car sa correspond complètement à ma demande.
    Alors merci à toi et à Onyx, vraiment bon boulot, vous êtes trop forte ♥
    Anonymous
    Invité

    Ven 31 Oct 2014 - 21:13

    Alors !

    Dans le CSS
    Code:
    /* ------------------------------- QEEL -------------------------------*/

    /* FOND DU QEEL */
    .fond_qeel {
      background-image: url('http://i59.tinypic.com/2i8it93.png');
      width: 900px;
      height: 416px;
      position: relative;
      margin: auto;
      font-family: 'Fjalla One', sans-serif;
    }

    /* MISE EN FORME DES LIENS DU QEEL */
    .fond_qeel a {
      text-decoration: none;
      font-weight: none;
    }

    /* BLOC DERNIER INSCRIT */
    .bloc1 {
      background-color: #393F57;
      width: 300px;
      color: #1F2133;
      font-size: 25px;
      font-family: 'Fjalla One', sans-serif;
      top: 0.55em;
      left: 3.4em;
      position: absolute;
      padding: 15px;
    }

    /* MISE EN FORME DERNIER INSCRIT */
    #yosh {
      float: right;
      font-size: 18px;
      color: #4C8E68;
    }

    /* MISE EN FORME NOMBRE DE MEMBRES */
    #matt {
      float: right;
      font-size: 18px;
      color: #4C8E68;
    }

    /* MISE EN FORME BLOC STATISTIQUES */
    .bloc2 {
      background-color: #393F57;
      width: 530px;
      color: #1F2133;
      font-size: 16px;
      font-family: 'Fjalla One', sans-serif;
      bottom: 1em;
      left: 5em;
      position: absolute;
      padding: 15px;
    }

    /* MISE EN FORME DERNIERS CONNECTES */
    #kaboum .row1 {
      background-color : transparent;
    }

    #kaboum span.gensmall {
      font-size: 18px;
      color: #1F2133;
      font-family: 'Fjalla One', sans-serif;
    }

    /* MISE EN FORME BLOC DERNIERS CONNECTES */
    .bloc4 {
      width: 180px;
      height: 270px;
      overflow: auto;
      text-align: justify;
      padding: 15px;
      background-color: #393F57;
      color: #1F2133;
      position: absolute;
      top: 0.85em;
      left: 26.9em;
    }

    /* POSITIONNEMENT DES GROUPES */
    .bloc3 {
      position: absolute;
      width: 184px;
      height: 416px;
      right: 0em;
      text-align: center;
    }

    /* INFOBULLES DES GROUPES */
    .Infobulle {
      position: relative;
      font-size: 30px;
    }
       
    .Infobulle .Infobulle_contenu {
      position : absolute;
      z-index: 1;
      right: -0.05em;
      width : 170px;
      height: 80px;
      overflow: auto;
      font-family: arial;
      font-size: 12px;
      background-color: #393F57;
      padding: 5px;
      color: #CCCCCC;
      text-align: justify;
      display : none;
    }

    .Infobulle:hover .Infobulle_contenu {
      display : block; /*Fait apparaître l'infobulle*/
    }

    /* MISE EN FORME DEFILEMENT IMAGE → CREDITS */
    .qeel {
      width: 330px;
      height: 134px;
      overflow: hidden;
      position: absolute;
      left: 5.3em;
      background-color: #393F57;
      top: 11.2em;
    }

    .qeel_img {
      position: relative;
      z-index: 2;
      width: 330px;
      height: 134px;
      margin-left: 0px;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }

    .qeel:hover .qeel_img {
      margin-left: 400px;
      transform: all;
      -o-transform: all;
      -moz-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }

    .qeel_description {
      position: relative;
      z-index: 1;
      width: 300px;
      height: 134px;
      margin-top: -130px;
      text-align: justify;
      font-size: 15px;
      color: #292C40;
      padding: 15px;
      overflow: auto;
      font-family: 'Fjalla One', sans-serif;
    }

    /* ------------------------------- FIN QEEL -------------------------------*/

    Et dans le template Index_Body tu remplaces
    Code:
    <!-- BEGIN disable_viewonline -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>
          <td class="catHead" colspan="2" height="28">
          <!-- BEGIN switch_viewonline_link -->
          <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
          <!-- END switch_viewonline_link -->

          <!-- BEGIN switch_viewonline_nolink -->
          <span class="cattitle">{L_WHO_IS_ONLINE}</span>
          <!-- END switch_viewonline_nolink -->
          </td>
       </tr>
       <tr>
          <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
          <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
          {TOTAL_USERS}<br />
          {NEWEST_USER}</span></td>
       </tr>
       <tr>
          <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
          {RECORD_USERS}<br />
          <br />
          {LOGGED_IN_USER_LIST}</span></td>
       </tr>
       {L_CONNECTED_MEMBERS}
       {L_WHOSBIRTHDAY_TODAY}
       {L_WHOSBIRTHDAY_WEEK}
       <tr>
          <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
       </tr>
       <!-- BEGIN switch_chatbox_activate -->
       <tr>
          <td class="row1">
             <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :&nbsp; {CHATTERS_LIST}<br />
                <!-- BEGIN switch_chatbox_popup -->
                <div id="chatbox_popup"></div>
                <script type="text/javascript">
                //<![CDATA[
                insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                //]]>
                </script>
                <!-- END switch_chatbox_popup -->
             </span>
          </td>
       </tr>
       <!-- END switch_chatbox_activate -->
    </table>
    <!-- END disable_viewonline -->

    Par
    Code:
    <!-- BEGIN disable_viewonline -->
    <div class="fond_qeel"><div class="bloc1">Bienvenue à ...<span id="yosh">{NEWEST_USER}</span>
      <script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");
      </script><br /> <br />
      Parmis nos ...<br /><span id="matt">{TOTAL_USERS}</span>
      <script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"").replace(/membres enregistrés/,"membres");
      </script> </div>

      <div class="bloc2"><span id="celine" style="color: #4C8E68;">{TOTAL_USERS_ONLINE}</span>
        <script type="text/javascript">document.getElementById('celine').innerHTML=document.getElementById('celine').innerHTML.replace(/Il y a en tout/,"<font color=#1F2133>Pendulum compte actuellement</font>").replace(/utilisateur(s?) en ligne/,"<font color=#1F2133>membres en ligne</font>").replace(/::/,"").replace(/Enregistré(s?)/,"<font color=#1F2133>membres enregistrés</font>").replace(/Invisible(s?) et/,"<font color=#1F2133>en secret &</font>").replace(/Invité(s?)/,"<font color=#1F2133>invité</font>");
          </script></div>
       
        <div class="qeel"><div class="qeel_img"><img src="http://i62.tinypic.com/34owxet.png" /></div><div class="qeel_description">Codage du QEEL par Halloween avec l'aide d'Onyx sur <a href="http://www.never-utopia.com">Never Utopia</a>.<br /><br />Autre blabla</div></div>
    <div style="clear: both;"></div>
       
        <div class="bloc4"><table id="kaboum">{L_CONNECTED_MEMBERS}</table>
        <script type="text/javascript">
        jQuery('#kaboum span.gensmall').html(jQuery('#kaboum span.gensmall').html().replace('Membres connectés au cours des 16 dernières heures : ','Ces derniers temps on a vu passer ... '));
        </script> </div>
        <div class="bloc3"><br /><div class="Infobulle"><span style="color: #5CC677;">Groupe</span><div class="Infobulle_contenu">Clematii nec scelere Alexandrini inter nullo per contactus nobilis ad comitem impotentia permissus est scelere inter omnino sibi Clematii humilia letali inter ferebatur introducta cuius letali nobilis amore hiscere oblato amore fines ut nobilis misceri ferebatur iam letali misceri cum per supergressa amore ut Honoratum nobilis per pseudothyrum pretioso ut oblato generum ad inter Clematius loqui scelere mediocrium generum formula ut formula contactus fines occideretur Clematii reginae supergressa loqui nec generum impetraret loqui orientis Clematius ut permissus eius cuiusdam oblato humilia orientis nec comitem formula letali ad reginae nec inter sibi reginae letali Alexandrini Honoratum missa eius cuius scelere generum.</div></div><br />
          <div class="Infobulle"><span style="color: #5CC677;">Groupe</span><div class="Infobulle_contenu">Clematii nec scelere Alexandrini inter nullo per contactus nobilis ad comitem impotentia permissus est scelere inter omnino sibi Clematii humilia letali inter ferebatur introducta cuius letali nobilis amore hiscere oblato amore fines ut nobilis misceri ferebatur iam letali misceri cum per supergressa amore ut Honoratum nobilis per pseudothyrum pretioso ut oblato generum ad inter Clematius loqui scelere mediocrium generum formula ut formula contactus fines occideretur Clematii reginae supergressa loqui nec generum impetraret loqui orientis Clematius ut permissus eius cuiusdam oblato humilia orientis nec comitem formula letali ad reginae nec inter sibi reginae letali Alexandrini Honoratum missa eius cuius scelere generum.</div></div> <br />
          <div class="Infobulle"><span style="color: #5CC677;">Groupe</span><div class="Infobulle_contenu">Clematii nec scelere Alexandrini inter nullo per contactus nobilis ad comitem impotentia permissus est scelere inter omnino sibi Clematii humilia letali inter ferebatur introducta cuius letali nobilis amore hiscere oblato amore fines ut nobilis misceri ferebatur iam letali misceri cum per supergressa amore ut Honoratum nobilis per pseudothyrum pretioso ut oblato generum ad inter Clematius loqui scelere mediocrium generum formula ut formula contactus fines occideretur Clematii reginae supergressa loqui nec generum impetraret loqui orientis Clematius ut permissus eius cuiusdam oblato humilia orientis nec comitem formula letali ad reginae nec inter sibi reginae letali Alexandrini Honoratum missa eius cuius scelere generum.</div></div> <br />
          <div class="Infobulle"><span style="color: #5CC677;">Groupe</span><div class="Infobulle_contenu">Clematii nec scelere Alexandrini inter nullo per contactus nobilis ad comitem impotentia permissus est scelere inter omnino sibi Clematii humilia letali inter ferebatur introducta cuius letali nobilis amore hiscere oblato amore fines ut nobilis misceri ferebatur iam letali misceri cum per supergressa amore ut Honoratum nobilis per pseudothyrum pretioso ut oblato generum ad inter Clematius loqui scelere mediocrium generum formula ut formula contactus fines occideretur Clematii reginae supergressa loqui nec generum impetraret loqui orientis Clematius ut permissus eius cuiusdam oblato humilia orientis nec comitem formula letali ad reginae nec inter sibi reginae letali Alexandrini Honoratum missa eius cuius scelere generum.</div></div> <br />
          <div class="Infobulle"><span style="color: #5CC677;">Groupe</span><div class="Infobulle_contenu">Clematii nec scelere Alexandrini inter nullo per contactus nobilis ad comitem impotentia permissus est scelere inter omnino sibi Clematii humilia letali inter ferebatur introducta cuius letali nobilis amore hiscere oblato amore fines ut nobilis misceri ferebatur iam letali misceri cum per supergressa amore ut Honoratum nobilis per pseudothyrum pretioso ut oblato generum ad inter Clematius loqui scelere mediocrium generum formula ut formula contactus fines occideretur Clematii reginae supergressa loqui nec generum impetraret loqui orientis Clematius ut permissus eius cuiusdam oblato humilia orientis nec comitem formula letali ad reginae nec inter sibi reginae letali Alexandrini Honoratum missa eius cuius scelere generum.</div></div> <br />
        <div class="Infobulle"><span style="color: #5CC677;">Groupe</span><div class="Infobulle_contenu">Clematii nec scelere Alexandrini inter nullo per contactus nobilis ad comitem impotentia permissus est scelere inter omnino sibi Clematii humilia letali inter ferebatur introducta cuius letali nobilis amore hiscere oblato amore fines ut nobilis misceri ferebatur iam letali misceri cum per supergressa amore ut Honoratum nobilis per pseudothyrum pretioso ut oblato generum ad inter Clematius loqui scelere mediocrium generum formula ut formula contactus fines occideretur Clematii reginae supergressa loqui nec generum impetraret loqui orientis Clematius ut permissus eius cuiusdam oblato humilia orientis nec comitem formula letali ad reginae nec inter sibi reginae letali Alexandrini Honoratum missa eius cuius scelere generum.</div></div></div>
    </div>
      <link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
    <!-- END disable_viewonline -->

    En faisant attention à remplacer le "16" qui suit par la durée que tu as défini sur ton forum (24h ou autre)
    Code:
    <script type="text/javascript">
        jQuery('#kaboum span.gensmall').html(jQuery('#kaboum span.gensmall').html().replace('Membres connectés au cours des 16 dernières heures : ','Ces derniers temps on a vu passer ... '));
        </script>

    Dis-moi si tout colle Wink
    RainbowPanda
    RainbowPanda
    FémininAge : 30Messages : 52

    Sam 1 Nov 2014 - 0:51

    Alors tout colle, sauf un truc, rien ne s'affiche dans le bloc des 24 dernière heure, il reste vide Sad
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 1 Nov 2014 - 1:50

    Tu peux nous donner le lien de ton forum qu'on puisse voir? Et est-ce qu'ils apparaissaient avant que tu installes le code?



    RainbowPanda
    RainbowPanda
    FémininAge : 30Messages : 52

    Sam 1 Nov 2014 - 1:53

    Si je me souviens bien oui :/
    Merci de te pencher sur ce problème !

    Code:
    http://pendulum.forumactif.org/
    Anonymous
    Invité

    Sam 1 Nov 2014 - 8:52

    Tu as bien pensé à ça ?

    Halloween a écrit:En faisant attention à remplacer le "16" qui suit par la durée que tu as défini sur ton forum (24h ou autre)
    Code:
    <script type="text/javascript">
        jQuery('#kaboum span.gensmall').html(jQuery('#kaboum span.gensmall').html().replace('Membres connectés au cours des 16 dernières heures : ','Ces derniers temps on a vu passer ... '));
        </script>

    Tu as mis les 24 dernières heures ou une autre valeur ? Tu as pensé à le cocher dans l'affichage ?
    RainbowPanda
    RainbowPanda
    FémininAge : 30Messages : 52

    Sam 1 Nov 2014 - 11:53

    Autant pour moi, je ne l'avais pas cocher dans affichages x_x
    Désolé ! Bon bah tout va bien alors, juste une erreur de ma part ayant oublié de cocher ca.

    Merci beaucoup !!
    Anonymous
    Invité

    Sam 1 Nov 2014 - 18:18

    Ah ! Very Happy
    Je vais poster le LS alors, bonne continuation Wink
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 2 Nov 2014 - 1:17

    Bonsoir,

    RainbowPanda, n'oublies pas de cocher l'icône "terminé" si tu considère la commande terminée Wink



    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 12 Nov 2014 - 2:28

    Bon eh bien, j'archive vu qu'il n'y a pas de nouvelles.



    Contenu sponsorisé


      La date/heure actuelle est Dim 24 Nov 2024 - 5:20